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

This commit is contained in:
naiba
2022-06-08 18:51:47 +08:00
parent fd697c5f44
commit 9bff4fae2f
6 changed files with 201 additions and 146 deletions

View File

@@ -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>