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

2025-01-22 12:48:14 -05:00 · 2022-06-08 18:51:47 +08:00 · 2022-06-08 18:51:47 +08:00 · 9bff4fae2f
commit 9bff4fae2f
parent fd697c5f44
6 changed files with 201 additions and 146 deletions
--- a/README.md
+++ b/README.md
@ -4,7 +4,7 @@
  <br>
  <small><i>LOGO designed by <a href="https://xio.ng" target="_blank">熊大</a> .</i></small>
  <br><br>
-<img src="https://img.shields.io/github/workflow/status/naiba/nezha/Dashboard%20image?label=Dash%20v0.13.28&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/github/v/release/naiba/nezha?color=brightgreen&label=Agent&style=for-the-badge&logo=github">&nbsp;<img src="https://img.shields.io/github/workflow/status/naiba/nezha/Agent%20release?label=Agent%20CI&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/badge/Installer-v0.10.6-brightgreen?style=for-the-badge&logo=linux">
+<img src="https://img.shields.io/github/workflow/status/naiba/nezha/Dashboard%20image?label=Dash%20v0.13.29&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/github/v/release/naiba/nezha?color=brightgreen&label=Agent&style=for-the-badge&logo=github">&nbsp;<img src="https://img.shields.io/github/workflow/status/naiba/nezha/Agent%20release?label=Agent%20CI&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/badge/Installer-v0.10.6-brightgreen?style=for-the-badge&logo=linux">
  <br>
  <br>
  <p>:trollface: <b>Nezha Monitoring: Self-hosted, lightweight server and website monitoring and O&M tool.</b></p>
--- a/resource/template/theme-daynight/home.html
+++ b/resource/template/theme-daynight/home.html
@ -256,45 +256,58 @@
            }
        })
        const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
-        const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
-        ws.onopen = function (evt) {
-            Swal.fire({
-                position: 'top',
-                icon: 'success',
-                title: '{{tr "RealtimeChannelEstablished"}}',
-                text: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
-                showConfirmButton: false,
-                timer: 2000
-            });
-        }
-        ws.onmessage = function (evt) {
-            const data = JSON.parse(evt.data)
-            statusCards.servers = data.servers
-            const keys = Object.keys(statusCards.servers)
-            for (let i = 0; i < keys.length; i++) {
-                const ns = statusCards.servers[keys[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 ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
+            ws.onopen = function (evt) {
+                canShowError = true;
+                Swal.fire({
+                    position: 'top',
+                    icon: 'success',
+                    title: '{{tr "RealtimeChannelEstablished"}}',
+                    text: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
+                    showConfirmButton: false,
+                    timer: 2000
+                });
+            }
+            ws.onmessage = function (evt) {
+                const data = JSON.parse(evt.data)
+                statusCards.servers = data.servers
+                const keys = Object.keys(statusCards.servers)
+                for (let i = 0; i < keys.length; i++) {
+                    const ns = statusCards.servers[keys[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
+                        }
                    }
                }
            }
+            ws.onclose = function () {
+                if (canShowError) {
+                    canShowError = false;
+                    Swal.fire({
+                        position: 'top',
+                        icon: 'error',
+                        title: '{{tr "RealtimeChannelDisconnect"}}',
+                        text: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
+                        showConfirmButton: false,
+                        timer: 2000
+                    });
+                }
+                setTimeout(function () {
+                    connect()
+                }, 3000);
+            }
+            ws.onerror = function () {
+                ws.close()
+            }
        }
-        ws.onclose = function () {
-            Swal.fire({
-                position: 'top',
-                icon: 'error',
-                title: '{{tr "RealtimeChannelDisconnect"}}',
-                text: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
-                showConfirmButton: false,
-                timer: 2000
-            });
-
-        }
+        connect();
    </script>
 </body>

--- a/resource/template/theme-default/home.html
+++ b/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}}
--- a/resource/template/theme-hotaru/home.html
+++ b/resource/template/theme-hotaru/home.html
@ -243,41 +243,55 @@
        })

        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 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 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 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
+                        }
                    }
                }
            }
+            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()
+            }
        }
-        ws.onclose = function () {
-            $.suiAlert({
-                title: '{{tr "RealtimeChannelDisconnect"}}',
-                description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
-                type: 'warning',
-                time: '2',
-                position: 'top-center',
-            });
-        }
+        connect()
    </script>
 </body>

--- a/resource/template/theme-mdui/home.html
+++ b/resource/template/theme-mdui/home.html
@ -228,66 +228,80 @@
    })

    const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
-    const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
-    ws.onopen = function (evt) {
+    let canShowError = true;
+    function connect() {
+      const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
+      ws.onopen = function (evt) {
+        canShowError = true;
        mdui.snackbar({
          message: '{{tr "RealtimeChannelEstablished"}}',
          timeout: 2000,
          position: 'top',
-          onClosed: function(){
+          onClosed: function () {
            mdui.mutation();
          }
        });
-    }
-    var infoTooltip = {}, memTooltip = {};
-    ws.onmessage = function (evt) {
+      }
+      var infoTooltip = {}, memTooltip = {};
+      ws.onmessage = function (evt) {
        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
-                    if (statusCards.showCard) {
-                      if (infoTooltip[ns.ID]) {
-                        var disk =  statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal);
-                        var upTime = statusCards.secondToDate(ns.State.Uptime);
-                        var content =
-  `System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
+          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
+              if (statusCards.showCard) {
+                if (infoTooltip[ns.ID]) {
+                  var disk = statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal);
+                  var upTime = statusCards.secondToDate(ns.State.Uptime);
+                  var content =
+                    `System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
  CPU: ${ns.Host.CPU}
  Disk: ${disk}
  Online: ${upTime}
  Version: ${ns.Host.Version}`;
-                        infoTooltip[ns.ID].$element[0].innerText = content;
-                      }
-                      else {
-                        if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {});
-                      }
-
-                      if (memTooltip[ns.ID]) {
-                        var content = `${statusCards.formatByteSize(ns.State.MemUsed)}/${statusCards.formatByteSize(ns.Host.MemTotal)}`;
-                        memTooltip[ns.ID].$element[0].innerText = content;
-                      }
-                      else {
-                        if (document.getElementById(`mem-${ns.ID}`)) memTooltip[ns.ID] = new mdui.Tooltip(`#mem-${ns.ID}`, {});
-                      }
-                    } else {mdui.$('div').remove('.mdui-tooltip'); infoTooltip = {}; memTooltip = {};}
+                  infoTooltip[ns.ID].$element[0].innerText = content;
                }
+                else {
+                  if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {});
+                }
+
+                if (memTooltip[ns.ID]) {
+                  var content = `${statusCards.formatByteSize(ns.State.MemUsed)}/${statusCards.formatByteSize(ns.Host.MemTotal)}`;
+                  memTooltip[ns.ID].$element[0].innerText = content;
+                }
+                else {
+                  if (document.getElementById(`mem-${ns.ID}`)) memTooltip[ns.ID] = new mdui.Tooltip(`#mem-${ns.ID}`, {});
+                }
+              } else { mdui.$('div').remove('.mdui-tooltip'); infoTooltip = {}; memTooltip = {}; }
            }
+          }
        }
        mdui.mutation();
+      }
+      ws.onclose = function () {
+        if (canShowError) {
+          canShowError = false;
+          mdui.snackbar({
+            message: '{{tr "RealtimeChannelDisconnect"}}',
+            timeout: 2000,
+            position: 'top',
+          });
+        }
+        setTimeout(function () {
+          connect()
+        }, 3000);
+      }
+      ws.onerror = function () {
+        ws.close()
+      }
    }
-    ws.onclose = function () {
-        mdui.snackbar({
-          message: '{{tr "RealtimeChannelDisconnect"}}',
-          timeout: 2000,
-          position: 'top',
-        });
-    }
+    connect();
  </script>
 </body>
 </html>
--- a/service/singleton/singleton.go
+++ b/service/singleton/singleton.go
@ -12,7 +12,7 @@ import (
 	"github.com/naiba/nezha/pkg/utils"
 )

-var Version = "v0.13.28" // ！！记得修改 README 中的 badge 版本！！
+var Version = "v0.13.29" // ！！记得修改 README 中的 badge 版本！！

 var (
 	Conf  *model.Config