get messages + client id from ws

src/lib/Message.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { IMessage } from '$lib/message';
+	import type { IMessage } from '$lib/message.svelte';
 
 	interface Props {
 		message: IMessage;

src/lib/message.svelte.ts

@@ -0,0 +1,37 @@
+import { getContext, setContext } from "svelte";
+
+export interface IMessage {
+	senderId: number;
+	content: string;
+};
+
+export class MessageStore {
+	#clientId: number = $state(-1);
+	messages: IMessage[] = $state([]);
+
+	constructor(messages: IMessage[]) {
+		this.messages = messages;
+	}
+
+	setClientId(id: number) {
+		this.#clientId = id;
+	}
+
+	getClientId() {
+		return this.#clientId;
+	}
+
+	addMessage(message: IMessage) {
+		this.messages.push(message);
+	}
+}
+
+const MESSAGE_CONTEXT_SYMBOL = Symbol('MESSAGE_STORE');
+
+export function setMessageStore(messages: IMessage[]): MessageStore {
+	return setContext(MESSAGE_CONTEXT_SYMBOL, new MessageStore(messages));
+}
+
+export function getMessageStore(): MessageStore {
+	return getContext(MESSAGE_CONTEXT_SYMBOL);
+}

src/lib/message.ts

@@ -1,4 +0,0 @@
-export interface IMessage {
-	senderId: number;
-	content: string;
-};

src/lib/socket.ts

@@ -1,8 +1,12 @@
+import { MessageStore, type IMessage } from './message.svelte';
+
 export class ChatSocket {
 	#socket: WebSocket;
+	#store: MessageStore;
 
-	constructor(url: string) {
+	constructor(url: string, store: MessageStore) {
 		this.#socket = new WebSocket(url);
+		this.#store = store;
 
 		this.#socket.onopen = (e) => {
 			this.#onOpen(e);
@@ -30,7 +34,15 @@ export class ChatSocket {
 	}
 
 	#onMessage(e: MessageEvent) {
-		console.log('onMessage', e);
+		const regex = /^\d+$/;
+		
+		if (regex.test(e.data)) {
+			this.#store.setClientId(parseInt(e.data));
+			return;
+		}
+
+		const message: IMessage = JSON.parse(e.data);
+		this.#store.addMessage(message);
 	}
 
 	#onClose(e: CloseEvent) {

src/routes/+layout.svelte

@@ -4,14 +4,17 @@
 	import { ChatSocket } from '$lib/socket';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
+	import { setMessageStore } from '$lib/message.svelte';
 
 	let { children } = $props();
 
 	let socket;
 
+	const store = setMessageStore([]);
+
 	onMount(() => {
 		if (browser) {
-			socket = new ChatSocket('ws://localhost:3000/ws');
+			socket = new ChatSocket('ws://localhost:3000/ws', store);
 		}
 	});
 </script>

src/routes/+page.server.ts

@@ -10,7 +10,5 @@ export const actions = {
 			method: 'POST',
 			body: formData,
 		});
-
-		console.log(response.status);
 	},
 } satisfies Actions;

src/routes/+page.svelte

@@ -2,41 +2,40 @@
 	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
-	import { type IMessage } from '$lib/message';
+	import { getMessageStore } from '$lib/message.svelte';
 	import Message from '$lib/Message.svelte';
 	import type { SubmitFunction } from '@sveltejs/kit';
 
-	const localId = 0;
+	const messageStore = getMessageStore();
-
-	let messages: IMessage[] = [];
 
 	let messageContent: string = $state('');
 
 	const sendMessage: SubmitFunction = async ({}) => {
-		return async ({update,result}) => {
+		return async ({ update }) => {
 			await update({
 				invalidateAll: false,
-				reset: true,
+				reset: true
 			});
-
-			if (result.type === 'success') {
-				console.log('SUCCESS');
-			}
-			else {
-				console.log('SOMETHING WENT WRONG');
-			}
 		};
 	};
 </script>
 
-<div class="flex flex-col border rounded-md h-full">
+<div class="flex h-full flex-col rounded-md border">
-	<div class="flex flex-col gap-4 p-8 grow">
+	<div class="flex grow flex-col gap-4 p-8">
-		{#each messages as message}
+		{#each messageStore.messages as message}
-			<Message {message} localSenderId={localId}/>
+			<Message {message} localSenderId={messageStore.getClientId()} />
 		{/each}
 	</div>
-	<form class="flex flex-row w-full" method="POST" action="?/send-message" use:enhance={sendMessage}>
+	<form
-		<Input class="rounded-r-none" name="content" bind:value={messageContent}/>
+		class="flex w-full flex-row"
-		<Button type="submit" class="rounded-l-none" disabled={messageContent.trim().length < 1}>Send</Button>
+		method="POST"
+		action="?/send-message"
+		use:enhance={sendMessage}
+	>
+		<input type="hidden" name="client-id" value={messageStore.getClientId()} />
+		<Input class="rounded-r-none" name="content" bind:value={messageContent} autocomplete="off" />
+		<Button type="submit" class="rounded-l-none" disabled={messageContent.trim().length < 1}
+			>Send</Button
+		>
 	</form>
 </div>