Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

do not connect to socket io for status page

Browse Source
pull/124/head
LouisLam 3 years ago
parent 08c7a37052
commit 4b0a8087a2
3 changed files with 199 additions and 129 deletions
Show Stats Download Patch File Download Diff File

5
src/main.js
Unescape View File

@ -20,6 +20,7 @@ import EditMonitor from "./pages/EditMonitor.vue";
import Settings from "./pages/Settings.vue"; import Settings from "./pages/Settings.vue";
import Setup from "./pages/Setup.vue"; import Setup from "./pages/Setup.vue";
import List from "./pages/List.vue"; import List from "./pages/List.vue";
import StatusPage from "./pages/StatusPage.vue";
import { appName } from "./util.ts"; import { appName } from "./util.ts";
@ -94,6 +95,10 @@ const routes = [
path: "/setup", path: "/setup",
component: Setup, component: Setup,
}, },
{
path: "/status-page",
component: StatusPage,
},
] ]
const router = createRouter({ const router = createRouter({

287
src/mixins/socket.js
Unescape View File

@ -4,6 +4,10 @@ const toast = useToast()
let socket; let socket;
const noSocketIOPage = [
"/status-page",
];
export default { export default {
data() { data() {
@ -14,6 +18,8 @@ export default {
firstConnect: true, firstConnect: true,
connected: false, connected: false,
connectCount: 0, connectCount: 0,
initedSocketIO: false,
}, },
remember: (localStorage.remember !== "0"), remember: (localStorage.remember !== "0"),
allowLoginDialog: false, // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed. allowLoginDialog: false, // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
@ -31,161 +37,176 @@ export default {
created() { created() {
window.addEventListener("resize", this.onResize); window.addEventListener("resize", this.onResize);
this.initSocketIO();
},
let protocol = (location.protocol === "https:") ? "wss://" : "ws://"; methods: {
let wsHost; initSocketIO(bypass = false) {
const env = process.env.NODE_ENV || "production"; // No need to re-init
if (env === "development" || localStorage.dev === "dev") { if (this.socket.initedSocketIO) {
wsHost = protocol + location.hostname + ":3001"; return;
} else { }
wsHost = protocol + location.host;
}
socket = io(wsHost, { // No need to connect to the socket.io for status page
transports: ["websocket"], if (! bypass && noSocketIOPage.includes(location.pathname)) {
}); return;
}
socket.on("info", (info) => {
this.info = info; this.socket.initedSocketIO = true;
});
socket.on("setup", (monitorID, data) => {
this.$router.push("/setup")
});
socket.on("autoLogin", (monitorID, data) => {
this.loggedIn = true;
this.storage().token = "autoLogin";
this.allowLoginDialog = false;
});
socket.on("monitorList", (data) => {
// Add Helper function
Object.entries(data).forEach(([monitorID, monitor]) => {
monitor.getUrl = () => {
try {
return new URL(monitor.url);
} catch (_) {
return null;
}
};
});
this.monitorList = data;
});
socket.on("notificationList", (data) => { let protocol = (location.protocol === "https:") ? "wss://" : "ws://";
this.notificationList = data;
});
socket.on("heartbeat", (data) => { let wsHost;
if (! (data.monitorID in this.heartbeatList)) { const env = process.env.NODE_ENV || "production";
this.heartbeatList[data.monitorID] = []; if (env === "development" || localStorage.dev === "dev") {
wsHost = protocol + location.hostname + ":3001";
} else {
wsHost = protocol + location.host;
} }
this.heartbeatList[data.monitorID].push(data) socket = io(wsHost, {
transports: ["websocket"],
});
// Add to important list if it is important socket.on("info", (info) => {
// Also toast this.info = info;
if (data.important) { });
if (data.status === 0) { socket.on("setup", (monitorID, data) => {
toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, { this.$router.push("/setup")
timeout: false, });
});
} else if (data.status === 1) {
toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
timeout: 20000,
});
} else {
toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
}
if (! (data.monitorID in this.importantHeartbeatList)) { socket.on("autoLogin", (monitorID, data) => {
this.importantHeartbeatList[data.monitorID] = []; this.loggedIn = true;
this.storage().token = "autoLogin";
this.allowLoginDialog = false;
});
socket.on("monitorList", (data) => {
// Add Helper function
Object.entries(data).forEach(([monitorID, monitor]) => {
monitor.getUrl = () => {
try {
return new URL(monitor.url);
} catch (_) {
return null;
}
};
});
this.monitorList = data;
});
socket.on("notificationList", (data) => {
this.notificationList = data;
});
socket.on("heartbeat", (data) => {
if (! (data.monitorID in this.heartbeatList)) {
this.heartbeatList[data.monitorID] = [];
} }
this.importantHeartbeatList[data.monitorID].unshift(data) this.heartbeatList[data.monitorID].push(data)
}
}); // Add to important list if it is important
// Also toast
if (data.important) {
if (data.status === 0) {
toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
timeout: false,
});
} else if (data.status === 1) {
toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
timeout: 20000,
});
} else {
toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
}
socket.on("heartbeatList", (monitorID, data, overwrite = false) => { if (! (data.monitorID in this.importantHeartbeatList)) {
if (! (monitorID in this.heartbeatList) || overwrite) { this.importantHeartbeatList[data.monitorID] = [];
this.heartbeatList[monitorID] = data; }
} else {
this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID])
}
});
socket.on("avgPing", (monitorID, data) => { this.importantHeartbeatList[data.monitorID].unshift(data)
this.avgPingList[monitorID] = data }
}); });
socket.on("uptime", (monitorID, type, data) => { socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
this.uptimeList[`${monitorID}_${type}`] = data if (! (monitorID in this.heartbeatList) || overwrite) {
}); this.heartbeatList[monitorID] = data;
} else {
this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID])
}
});
socket.on("certInfo", (monitorID, data) => { socket.on("avgPing", (monitorID, data) => {
this.certInfoList[monitorID] = JSON.parse(data) this.avgPingList[monitorID] = data
}); });
socket.on("importantHeartbeatList", (monitorID, data, overwrite) => { socket.on("uptime", (monitorID, type, data) => {
if (! (monitorID in this.importantHeartbeatList) || overwrite) { this.uptimeList[`${monitorID}_${type}`] = data
this.importantHeartbeatList[monitorID] = data; });
} else {
this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])
}
});
socket.on("connect_error", (err) => {
console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
this.socket.connected = false;
this.socket.firstConnect = false;
});
socket.on("disconnect", () => {
console.log("disconnect")
this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
this.socket.connected = false;
});
socket.on("connect", () => {
console.log("connect")
this.socket.connectCount++;
this.socket.connected = true;
// Reset Heartbeat list if it is re-connect
if (this.socket.connectCount >= 2) {
this.clearData()
}
let token = this.storage().token; socket.on("certInfo", (monitorID, data) => {
this.certInfoList[monitorID] = JSON.parse(data)
});
if (token) { socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
if (token !== "autoLogin") { if (! (monitorID in this.importantHeartbeatList) || overwrite) {
this.loginByToken(token) this.importantHeartbeatList[monitorID] = data;
} else { } else {
this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])
}
});
// Timeout if it is not actually auto login socket.on("connect_error", (err) => {
setTimeout(() => { console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
if (! this.loggedIn) { this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
this.allowLoginDialog = true; this.socket.connected = false;
this.$root.storage().removeItem("token"); this.socket.firstConnect = false;
} });
}, 5000);
socket.on("disconnect", () => {
console.log("disconnect")
this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
this.socket.connected = false;
});
socket.on("connect", () => {
console.log("connect")
this.socket.connectCount++;
this.socket.connected = true;
// Reset Heartbeat list if it is re-connect
if (this.socket.connectCount >= 2) {
this.clearData()
} }
} else {
this.allowLoginDialog = true;
}
this.socket.firstConnect = false; let token = this.storage().token;
});
}, if (token) {
if (token !== "autoLogin") {
this.loginByToken(token)
} else {
methods: { // Timeout if it is not actually auto login
setTimeout(() => {
if (! this.loggedIn) {
this.allowLoginDialog = true;
this.$root.storage().removeItem("token");
}
}, 5000);
}
} else {
this.allowLoginDialog = true;
}
this.socket.firstConnect = false;
});
},
storage() { storage() {
return (this.remember) ? localStorage : sessionStorage; return (this.remember) ? localStorage : sessionStorage;
@ -336,6 +357,14 @@ export default {
localStorage.remember = (this.remember) ? "1" : "0" localStorage.remember = (this.remember) ? "1" : "0"
}, },
// Reconnect the socket io, if status-page to dashboard
"$route.fullPath"(newValue, oldValue) {
if (noSocketIOPage.includes(newValue)) {
return;
}
this.initSocketIO();
},
}, },
} }

36
src/pages/StatusPage.vue
Unescape View File

@ -0,0 +1,36 @@
<template>
<button v-if="hasToken" @click="edit">
<font-awesome-icon icon="edit" />
</button>
</template>
<script>
import { useToast } from "vue-toastification"
const toast = useToast()
export default {
data() {
return {
hasToken: false,
}
},
computed: {
},
watch: {
},
created() {
this.hasToken = ("token" in localStorage);
},
mounted() {
},
methods: {
edit() {
console.log("here");
this.$root.initSocketIO(true);
}
},
}
</script>
Write Preview
Loading…
Cancel
Save