Enhance WebSocket connection handling with improved timeout and error states

ts/network_ts.ts

@@ -30,10 +30,60 @@ class Server {
         break
     }
 
-    var url = this.protocol + window.location.hostname + ":" + window.location.port + "/data/" + "?Token=" + getCookie("Token")
+    var wsHost:string = 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:boolean = data["cmd"] == "updateLog"
+    var responseReceived:boolean = false
+    var requestFinished:boolean = false
+    var timeoutMs:number = 12000
+    var requestTimeout:number
+
+    var finishRequest = function(state:string, responseSuccess:boolean = false):void {
+      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:string = "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
@@ -54,8 +104,11 @@ class Server {
     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:string = "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.")
@@ -65,12 +118,8 @@ class Server {
 
 
     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);
@@ -144,11 +193,25 @@ class Server {
       createLayout()
 
     }
+
+    ws.onclose = function() {
+      if (responseReceived == true) {
+        return
+      }
+
+      var closeState:string = "offline"
+      if (isLogUpdate == true && WS_FAILURE_COUNT < 2) {
+        closeState = "idle"
+      }
+      finishRequest(closeState, false)
+    }
   
   }
   
 }
 
+var WS_FAILURE_COUNT:number = 0
+
 function getCookie(name) {
   var value = "; " + document.cookie;
   var parts = value.split("; " + name + "=");