Enhance WebSocket connection handling with improved timeout and error states

html/js/network_ts.js

@@ -21,9 +21,55 @@ var Server = /** @class */ (function () {
                 this.protocol = "wss://";
                 break;
         }
-        var url = this.protocol + window.location.hostname + ":" + window.location.port + "/data/" + "?Token=" + getCookie("Token");
+        var wsHost = window.location.host;
+        if (wsHost == undefined || wsHost.length < 1) {
+            wsHost = window.location.hostname;
+        }
+        var url = this.protocol + wsHost + "/data/" + "?Token=" + getCookie("Token");
         data["cmd"] = this.cmd;
         var ws = new WebSocket(url);
+        var isLogUpdate = data["cmd"] == "updateLog";
+        var responseReceived = false;
+        var requestFinished = false;
+        var timeoutMs = 12000;
+        var requestTimeout;
+        var finishRequest = function (state, responseSuccess) {
+            if (responseSuccess === void 0) { responseSuccess = false; }
+            if (requestFinished == true) {
+                return;
+            }
+            requestFinished = true;
+            SERVER_CONNECTION = false;
+            window.clearTimeout(requestTimeout);
+            if (responseSuccess == true) {
+                if (state == "online") {
+                    WS_FAILURE_COUNT = 0;
+                }
+            }
+            else {
+                WS_FAILURE_COUNT++;
+            }
+            if (isLogUpdate == false) {
+                showElement("loading", false);
+            }
+            if (state != "") {
+                setConnectionState(state);
+            }
+        };
+        requestTimeout = window.setTimeout(function () {
+            console.log("Websocket request timed out.");
+            var timeoutState = "offline";
+            if (isLogUpdate == true && WS_FAILURE_COUNT < 2) {
+                timeoutState = "idle";
+            }
+            finishRequest(timeoutState, false);
+            try {
+                ws.close();
+            }
+            catch (err) {
+                console.log(err);
+            }
+        }, timeoutMs);
         ws.onopen = function () {
             WS_AVAILABLE = true;
             if (data["cmd"] != "updateLog") {
@@ -37,18 +83,18 @@ var Server = /** @class */ (function () {
         };
         ws.onerror = function (e) {
             console.log("No websocket connection to xTeVe could be established. Check your network configuration.");
-            SERVER_CONNECTION = false;
-            setConnectionState("offline");
+            var errorState = "offline";
+            if (isLogUpdate == true && WS_FAILURE_COUNT < 2) {
+                errorState = "idle";
+            }
+            finishRequest(errorState, false);
             if (WS_AVAILABLE == false) {
                 alert("No websocket connection to xTeVe could be established. Check your network configuration.");
             }
         };
         ws.onmessage = function (e) {
-            SERVER_CONNECTION = false;
-            showElement("loading", false);
-            if (data["cmd"] != "updateLog") {
-                setConnectionState("online");
-            }
+            responseReceived = true;
+            finishRequest("online", true);
             console.log("RESPONSE:");
             var response = JSON.parse(e.data);
             console.log(response);
@@ -103,9 +149,20 @@ var Server = /** @class */ (function () {
             }
             createLayout();
         };
+        ws.onclose = function () {
+            if (responseReceived == true) {
+                return;
+            }
+            var closeState = "offline";
+            if (isLogUpdate == true && WS_FAILURE_COUNT < 2) {
+                closeState = "idle";
+            }
+            finishRequest(closeState, false);
+        };
     };
     return Server;
 }());
+var WS_FAILURE_COUNT = 0;
 function getCookie(name) {
     var value = "; " + document.cookie;
     var parts = value.split("; " + name + "=");