feat: add retry connect socket, close when logged out

Signed-off-by: pakintada@gmail.com <Pakin>

src/lib/components/app-account-select.svelte

@@ -14,6 +14,7 @@
 	import * as adb from '$lib/core/adb/adb';
 	import { browser } from '$app/environment';
 	import { deleteCookiesOnNonBrowser } from '$lib/helpers/cookie';
+	import { socketStore } from '$lib/core/stores/websocketStore';
 
 	const sidebar = useSidebar();
 
@@ -44,6 +45,13 @@
 		}
 
 		authStore.set(null);
+
+		let socket = get(socketStore);
+		if (socket) {
+			socket.close(1011, 'logout');
+		}
+
+		socketStore.set(null);
 		if (browser && 'cookieStore' in window) await cookieStore.delete('logged_in');
 		else deleteCookiesOnNonBrowser('logged_in');
 		await auth.signOut();

src/lib/core/handlers/messageHandler.ts

@@ -9,6 +9,7 @@ import {
 	recipeStreamMeta
 } from '../stores/recipeStore';
 import { buildOverviewFromServer } from '$lib/data/recipeService';
+import { auth } from '../client/firebase';
 
 export const messages = writable<string[]>([]);
 
@@ -118,7 +119,23 @@ const handlers: Record<string, (payload: any) => void> = {
 			}
 		}
 	},
-	stream_patch_update: (p) => {}
+	stream_patch_update: (p) => {},
+	notify: (p) => {
+		let noti_level = p.level ?? 'INFO';
+		let msg = p.msg ?? `Notify from ${p.from}`;
+		let target = p.to;
+
+		if (target) {
+			//
+			let currentUsername = auth.currentUser?.displayName;
+			if (currentUsername && currentUsername === target) {
+				addNotification(`${noti_level}:${msg}`);
+			}
+		} else {
+			// broadcast to all
+			addNotification(`${noti_level}:${msg}`);
+		}
+	}
 };
 
 export function handleIncomingMessages(raw: string) {

src/lib/core/stores/websocketStore.ts

@@ -3,20 +3,25 @@ import { env } from '$env/dynamic/public';
 import { get, writable } from 'svelte/store';
 import { handleIncomingMessages } from '../handlers/messageHandler';
 import { queue as msgQueue } from '../handlers/ws_messageSender';
+import { auth } from '../client/firebase';
 
-export const socketStore = writable<WebSocket | null>(null, (set) => {
+let socket: WebSocket | null = null;
+
+export const socketStore = writable<WebSocket | null>(null);
+
+export function connectToWebsocket() {
 	if (browser) {
 		console.log('connecting to ', env.PUBLIC_WSS);
-		const socket = new WebSocket(`${env.PUBLIC_WSS}`);
+		socket = new WebSocket(`${env.PUBLIC_WSS}`);
 
 		socket.addEventListener('open', () => {
-			set(socket);
+			socketStore.set(socket);
 
 			// recover messages on connect, flushing
 			while (get(msgQueue).length) {
 				let queue = get(msgQueue);
 				let current = queue.shift();
-				if (current) {
+				if (current && socket) {
 					socket.send(current);
 					// set next
 					msgQueue.set(queue);
@@ -29,18 +34,25 @@ export const socketStore = writable<WebSocket | null>(null, (set) => {
 		});
 
 		socket.addEventListener('close', () => {
-			set(null);
+			socketStore.set(null);
+			socket = null;
+
+			if (auth.currentUser) {
+				console.log('try reconnect websocket ...');
+				// retry again
+				setTimeout(() => connectToWebsocket(), 5000);
+			}
 		});
 
 		socket.addEventListener('error', (e) => {
 			console.log('WebSocket error: ', e);
-			set(null);
+			socketStore.set(null);
 		});
 
 		return () => {
-			if (socket.readyState === WebSocket.OPEN) {
+			if (socket?.readyState === WebSocket.OPEN) {
 				socket.close();
 			}
 		};
 	}
-});
+}

src/routes/(authed)/+layout.svelte

@@ -7,8 +7,20 @@
 	import '../layout.css';
 	import ErrorLayout from '$lib/components/error-layout.svelte';
 	import { sidebarStore } from '$lib/core/stores/sidebar';
+	import { onMount } from 'svelte';
+	import { auth } from '$lib/core/stores/auth';
+	import { get } from 'svelte/store';
+	import { connectToWebsocket } from '$lib/core/stores/websocketStore';
 
 	let { children } = $props();
+
+	onMount(() => {
+		let currentUser = get(auth);
+		console.log(`on mount layout current user: ${JSON.stringify(currentUser)}`);
+		if (currentUser) {
+			connectToWebsocket();
+		}
+	});
 </script>
 
 <svelte:head>