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

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;
 			});
 		}
 	});