🚀 dashboard v0.13.29 前端断开后自动重连

resource/template/theme-default/home.html

@@ -262,46 +262,60 @@
     return dest;
   }
 
-  const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
-  const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
-  ws.onopen = function (evt) {
-    $.suiAlert({
-      title: '{{tr "RealtimeChannelEstablished"}}',
-      description: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
-      type: 'success',
-      time: '2',
-      position: 'top-center',
-    });
-  }
-  ws.onmessage = function (evt) {
-    const oldServers = statusCards.servers
-    const data = JSON.parse(evt.data)
-    statusCards.servers = data.servers
-    for (let i = 0; i < statusCards.servers.length; i++) {
-      const ns = statusCards.servers[i];
-      if (!ns.Host) ns.live = false
-      else {
-        const lastActive = new Date(ns.LastActive).getTime()
-        if (data.now - lastActive > 10 * 1000) {
-          ns.live = false
-        } else {
-          ns.live = true
+  let canShowError = true;
+  function connect() {
+    const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
+    const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
+    ws.onopen = function (evt) {
+      canShowError = true;
+      $.suiAlert({
+        title: '{{tr "RealtimeChannelEstablished"}}',
+        description: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
+        type: 'success',
+        time: '2',
+        position: 'top-center',
+      });
+    }
+    ws.onmessage = function (evt) {
+      const oldServers = statusCards.servers
+      const data = JSON.parse(evt.data)
+      statusCards.servers = data.servers
+      for (let i = 0; i < statusCards.servers.length; i++) {
+        const ns = statusCards.servers[i];
+        if (!ns.Host) ns.live = false
+        else {
+          const lastActive = new Date(ns.LastActive).getTime()
+          if (data.now - lastActive > 10 * 1000) {
+            ns.live = false
+          } else {
+            ns.live = true
+          }
         }
       }
+      statusCards.groups = groupingData(statusCards.servers, "Tag")
+    }
+    ws.onclose = function () {
+      if (canShowError) {
+        canShowError = false;
+        $.suiAlert({
+          title: '{{tr "RealtimeChannelDisconnect"}}',
+          description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
+          type: 'warning',
+          time: '2',
+          position: 'top-center',
+        });
+      }
+      setTimeout(function () {
+        connect()
+      }, 3000);
+    }
+    ws.onerror = function () {
+      ws.close()
     }
-    statusCards.groups = groupingData(statusCards.servers, "Tag")
   }
-  ws.onclose = function () {
-    $.suiAlert({
-      title: '{{tr "RealtimeChannelDisconnect"}}',
-      description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
-      type: 'warning',
-      time: '2',
-      position: 'top-center',
-    });
-  }
-  $('.ui.accordion')
-    .accordion({ "exclusive": false })
-    ;
+
+  connect();
+
+  $('.ui.accordion').accordion({ "exclusive": false });
 </script>
 {{end}}