Optimize Socket.io connections for fewer open requests at any one time

This commit is contained in:
Neshura 2024-01-06 04:31:40 +01:00
parent 2d74a1eb89
commit 4ce3e29f57
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
5 changed files with 52 additions and 24 deletions

View file

@ -0,0 +1,4 @@
import { writable } from 'svelte/store';
import {io} from "socket.io-client";
export let socketStore = writable(io('https://status.neshweb.net/'));

View file

@ -0,0 +1,4 @@
import {type Writable, writable} from 'svelte/store';
import type {Heartbeat} from "$lib/types/uptime-kuma-types";
export let uptimeStore: Writable<Map<number, Heartbeat>> = writable(new Map());

View file

@ -1,6 +1,20 @@
<svelte:options runes={true} />
<script> <script>
import '../app.pcss'; import '../app.pcss';
import Header from './Header.svelte'; import Header from './Header.svelte';
import { socketStore } from "$lib/stores/socketStore";
import {beforeNavigate} from "$app/navigation";
$effect(() => {
beforeNavigate((navigation) => {
const servers = navigation.to.url.pathname === "/servers" || navigation.from.url.pathname === "/servers"
const services = navigation.to.url.pathname === "/services" || navigation.from.url.pathname === "/services"
if ( ! (servers && services) ) {
$socketStore.close()
}
})
})
</script> </script>
<Header /> <Header />

View file

@ -5,6 +5,8 @@
import { io } from 'socket.io-client'; import { io } from 'socket.io-client';
import type { Heartbeat } from '$lib/types/uptime-kuma-types'; import type { Heartbeat } from '$lib/types/uptime-kuma-types';
import ServerCard from '$lib/components/ServerCard.svelte'; import ServerCard from '$lib/components/ServerCard.svelte';
import { socketStore } from '$lib/stores/socketStore';
import {uptimeStore} from "$lib/stores/uptimeStore";
let { data }: { data: { promise: Promise<string> } } = $props(); let { data }: { data: { promise: Promise<string> } } = $props();
@ -18,33 +20,25 @@
let icons: readonly string[] = $state.frozen([]); let icons: readonly string[] = $state.frozen([]);
let monitorList: Map<number, Heartbeat> = $state(new Map()); let monitorList = $state($uptimeStore);
//let token = $props(); console.log(monitorList);
let socket = $socketStore;
$effect(() => { $effect(() => {
if (token) { if (token) {
const socket = io('https://status.neshweb.net/'); if (!socket.connected) {
socket.connect();
}
else {
console.log("already connected");
}
socket.on('connect', () => { socket.on('connect', () => {
console.log("logging in")
socket.emit('loginByToken', token, () => {}); socket.emit('loginByToken', token, () => {});
}); });
socket.on('importantHeartbeatList', (_, data) => {
let recent = data[data.length - 1];
let monitor: Heartbeat = {
monitorID: recent.monitor_id,
status: recent.status,
time: recent.time,
msg: recent.msg,
ping: recent.ping,
important: recent.important,
duration: recent.duration
};
monitorList.set(monitor.monitorID, monitor);
monitorList = new Map(monitorList.entries());
});
socket.on('heartbeatList', (_, data) => { socket.on('heartbeatList', (_, data) => {
let recent = data[data.length - 1]; let recent = data[data.length - 1];
let monitor: Heartbeat = { let monitor: Heartbeat = {
@ -58,11 +52,13 @@
}; };
monitorList.set(monitor.monitorID, monitor); monitorList.set(monitor.monitorID, monitor);
monitorList = new Map(monitorList.entries()); monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
}); });
socket.on('heartbeat', (data) => { socket.on('heartbeat', (data) => {
monitorList.set(data.monitorID, data); monitorList.set(data.monitorID, data);
monitorList = new Map(monitorList.entries()); monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
}); });
} }
}); });

View file

@ -5,6 +5,9 @@
import type { Service } from '$lib/types/data-types'; import type { Service } from '$lib/types/data-types';
import { io } from 'socket.io-client'; import { io } from 'socket.io-client';
import type { Heartbeat } from '$lib/types/uptime-kuma-types'; import type { Heartbeat } from '$lib/types/uptime-kuma-types';
import {socketStore} from "$lib/stores/socketStore";
import {onDestroy} from "svelte";
import {uptimeStore} from "$lib/stores/uptimeStore";
let { data }: { data: { promise: Promise<string> } } = $props(); let { data }: { data: { promise: Promise<string> } } = $props();
@ -18,19 +21,24 @@
let icons: readonly string[] = $state.frozen([]); let icons: readonly string[] = $state.frozen([]);
let monitorList: Map<number, Heartbeat> = $state(new Map()); let monitorList = $state($uptimeStore);
//let token = $props(); let socket = $socketStore;
$effect(() => { $effect(() => {
if (token) { if (token) {
const socket = io('https://status.neshweb.net/'); if (!socket.connected) {
socket.connect();
}
else {
console.log("connected")
}
socket.on('connect', () => { socket.on('connect', () => {
console.log("login")
socket.emit('loginByToken', token, () => {}); socket.emit('loginByToken', token, () => {});
}); });
socket.on('heartbeatList', (idString: string, data) => { socket.on('heartbeatList', (_: string, data) => {
let recent = data[data.length - 1]; let recent = data[data.length - 1];
let monitor: Heartbeat = { let monitor: Heartbeat = {
monitorID: recent.monitor_id, monitorID: recent.monitor_id,
@ -43,11 +51,13 @@
}; };
monitorList.set(monitor.monitorID, monitor); monitorList.set(monitor.monitorID, monitor);
monitorList = new Map(monitorList.entries()); monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
}); });
socket.on('heartbeat', (data) => { socket.on('heartbeat', (data) => {
monitorList.set(data.monitorID, data); monitorList.set(data.monitorID, data);
monitorList = new Map(monitorList.entries()); monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
}); });
} }
}); });