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

src/lib/stores/socketStore.ts

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

src/lib/stores/uptimeStore.ts

@@ -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());

src/routes/+layout.svelte

@@ -1,6 +1,20 @@
+<svelte:options runes={true} />
+
 <script>
 	import '../app.pcss';
 	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>
 
 <Header />

src/routes/servers/+page.svelte

@@ -5,6 +5,8 @@
 	import { io } from 'socket.io-client';
 	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
 	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();
 
@@ -18,33 +20,25 @@
 
 	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(() => {
 		if (token) {
-			const socket = io('https://status.neshweb.net/');
-
+			if (!socket.connected) {
+				socket.connect();
+			}
+			else {
+				console.log("already connected");
+			}
 			socket.on('connect', () => {
+				console.log("logging in")
 				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) => {
 				let recent = data[data.length - 1];
 				let monitor: Heartbeat = {
@@ -58,11 +52,13 @@
 				};
 				monitorList.set(monitor.monitorID, monitor);
 				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
 			});
 
 			socket.on('heartbeat', (data) => {
 				monitorList.set(data.monitorID, data);
 				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
 			});
 		}
 	});

src/routes/services/+page.svelte

@@ -5,6 +5,9 @@
 	import type { Service } from '$lib/types/data-types';
 	import { io } from 'socket.io-client';
 	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();
 
@@ -18,19 +21,24 @@
 
 	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(() => {
 		if (token) {
-			const socket = io('https://status.neshweb.net/');
-
+			if (!socket.connected) {
+				socket.connect();
+			}
+			else {
+				console.log("connected")
+			}
 			socket.on('connect', () => {
+				console.log("login")
 				socket.emit('loginByToken', token, () => {});
 			});
 
-			socket.on('heartbeatList', (idString: string, data) => {
+			socket.on('heartbeatList', (_: string, data) => {
 				let recent = data[data.length - 1];
 				let monitor: Heartbeat = {
 					monitorID: recent.monitor_id,
@@ -43,11 +51,13 @@
 				};
 				monitorList.set(monitor.monitorID, monitor);
 				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
 			});
 
 			socket.on('heartbeat', (data) => {
 				monitorList.set(data.monitorID, data);
 				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
 			});
 		}
 	});