refactor(#35): Migrate realtime server to PartyKit and update client socket flow

src/routes/+page.svelte

@@ -1,10 +1,8 @@
 <script>
-	import { onMount } from 'svelte';
 	import { connectToWebSocket, sendMessage, generateId } from './estimation/estimation.js';
 	import { goto } from '$app/navigation';
 
 	let roomId = '';
-	let socket;
 	const cardSets = [
 		{ name: 'Fibonacci', values: [1, 2, 3, 5, 8, 13, 21, '?'], example: '(1, 2, 3, 5)' },
 		{
@@ -18,9 +16,39 @@
 
 	let selectedCardSet = cardSets[0];
 
-	function startARoom() {
+	function waitForSocketOpen(socket) {
+		if (socket.readyState === WebSocket.OPEN) {
+			return Promise.resolve();
+		}
+
+		return new Promise((resolve, reject) => {
+			const handleOpen = () => {
+				socket.removeEventListener('open', handleOpen);
+				socket.removeEventListener('error', handleError);
+				resolve();
+			};
+			const handleError = (event) => {
+				socket.removeEventListener('open', handleOpen);
+				socket.removeEventListener('error', handleError);
+				reject(event);
+			};
+
+			socket.addEventListener('open', handleOpen);
+			socket.addEventListener('error', handleError);
+		});
+	}
+
+	async function startARoom() {
 		const roomId = generateId();
-		sendMessage(socket, { roomId: roomId, type: 'create-room', cardSetName: selectedCardSet.name });
+		const socket = connectToWebSocket(roomId, onMessageReceived);
+		try {
+			await waitForSocketOpen(socket);
+			sendMessage(socket, { roomId: roomId, type: 'create-room', cardSetName: selectedCardSet.name });
+		} catch (error) {
+			console.error('Failed to connect to PartyKit:', error);
+			alert('Unable to create the room right now. Please try again.');
+			return;
+		}
 		goto(`/estimation/${roomId}`);
 	}
 
@@ -33,16 +61,6 @@
 	}
 
 	function onMessageReceived(message) {}
-
-	onMount(() => {
-		socket = connectToWebSocket(null, onMessageReceived);
-
-		setInterval(() => {
-			if (socket.readyState === WebSocket.OPEN) {
-				socket.send(JSON.stringify({ type: 'ping' }));
-			}
-		}, 45000); // send a ping every 45 seconds
-	});
 </script>
 
 <div class="container">

src/routes/estimation/estimation.js

@@ -1,18 +1,29 @@
 import { v4 as uuidv4 } from 'uuid';
+import PartySocket from 'partysocket';
 
 function generateId() {
 	const id = uuidv4();
 	return id;
 }
 
-function connectToWebSocket(roomId, onMessageReceived) {
-	let socket;
-    const isDevelopment = import.meta.env.DEV;
-	if (isDevelopment) {
-		socket = new WebSocket(`ws://localhost:8080`);
-	} else {
-		socket = new WebSocket(`wss://websocket.jcreek.co.uk`);
+const partyHost = import.meta.env.PUBLIC_PARTYKIT_HOST;
+const partyName = import.meta.env.PUBLIC_PARTYKIT_PARTY || 'main';
+
+function getPartyKitHost() {
+	if (partyHost) {
+		return partyHost;
 	}
+	return import.meta.env.DEV ? 'localhost:1999' : 'websocket.jcreek.co.uk';
+}
+
+function connectToWebSocket(roomId, onMessageReceived) {
+	const host = getPartyKitHost();
+	const socket = new PartySocket({
+		host,
+		room: roomId ?? 'lobby',
+		party: partyName,
+		...(import.meta.env.DEV ? { protocol: 'ws' } : {})
+	});
 
 	socket.addEventListener('open', () => {
 		console.log(`Connected to WebSocket server from roomId: ${roomId}`);