Integrate with Uptime Kuma Socket.io API

src/routes/services/+page.server.ts

@@ -0,0 +1,38 @@
+import { io } from 'socket.io-client';
+import * as fs from 'fs';
+
+export async function load() {
+	const credFile = './credentials.json';
+	const socket = io('https://status.neshweb.net/');
+
+	let credentials: { username: string; password: string };
+	if (fs.existsSync(credFile)) {
+		let buf = fs.readFileSync(credFile);
+		credentials = JSON.parse(buf.toString());
+	} else {
+		console.error('Credentials File does not exist, Socket.io connection will not work.');
+	}
+
+	console.log(credentials);
+
+	let token = '';
+
+	socket.on('connect', () => {
+		socket.emit(
+			'login',
+			{ username: credentials.username, password: credentials.password, token: '' },
+			(res) => {
+				token = res.token;
+				console.log('Token is:', token);
+			}
+		);
+	});
+
+	while (token == '') {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	return {
+		token
+	};
+}

src/routes/services/+page.svelte

@@ -3,11 +3,57 @@
 <script lang="ts">
 	import ServiceCard from '$lib/components/ServiceCard.svelte';
 	import type { Service } from '$lib/types/data-types';
+	import {io} from "socket.io-client";
+	import type {Heartbeat} from "$lib/types/uptime-kuma-types";
+
+	let { data }: { data: { token: string } } = $props();
+
+	$effect(() => {
+		console.log("Data:", data.token)
+	})
 
 	let services: readonly Service[] = $state.frozen([]);
 
 	let icons: readonly string[] = $state.frozen([]);
 
+	let monitorList: Map<number, Heartbeat> = $state(new Map());
+
+	//let token = $props();
+
+	$effect(() => {
+		if (data.token) {
+			const socket = io('https://status.neshweb.net/');
+
+			socket.on('connect', () => {
+				socket.emit("loginByToken", data.token, (res) => {
+					console.log(data.token)
+					console.log(res);
+				})
+			});
+
+			socket.on('heartbeatList', (idString: string, 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('heartbeat', (data) => {
+				monitorList.set(data.monitorID, data);
+				monitorList = new Map(monitorList.entries());
+			})
+		}
+	})
+
+
 	async function get(url: string): Promise<any> {
 		let res = await fetch(url);
 		if (res.ok) {
@@ -36,8 +82,8 @@
 	<meta name="description" content="Overview of Services running on neshweb.net" />
 </svelte:head>
 
-<div class="flex h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
+<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
 	{#each services as service}
-		<ServiceCard {service} {icons} />
+		<ServiceCard {service} {icons} monitor={monitorList.get(service.id)} />
 	{/each}
 </div>