diff --git a/README.md b/README.md
index bb13dea..7b3e7f7 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
LOGO designed by 熊大 .
-
+
:trollface: Nezha Monitoring: Self-hosted, lightweight server and website monitoring and O&M tool.
diff --git a/resource/template/theme-daynight/home.html b/resource/template/theme-daynight/home.html
index 5fe513f..a3b66eb 100644
--- 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();
diff --git a/resource/template/theme-default/home.html b/resource/template/theme-default/home.html
index c5da7d5..4466edf 100644
--- 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 });
{{end}}
\ No newline at end of file
diff --git a/resource/template/theme-hotaru/home.html b/resource/template/theme-hotaru/home.html
index 8c83464..8509789 100644
--- 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()
diff --git a/resource/template/theme-mdui/home.html b/resource/template/theme-mdui/home.html
index b3d87f7..e6651b6 100644
--- 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();