From 85a223d5738500d534452be8c9844e0621259dee Mon Sep 17 00:00:00 2001
From: 409 <409dev@protonmail.com>
Date: Sat, 7 Jun 2025 13:36:08 +0200
Subject: [PATCH] get messages + client id from ws

---
 src/lib/Message.svelte     |  2 +-
 src/lib/message.svelte.ts  | 37 ++++++++++++++++++++++++++++++++++++
 src/lib/message.ts         |  4 ----
 src/lib/socket.ts          | 16 ++++++++++++++--
 src/routes/+layout.svelte  |  5 ++++-
 src/routes/+page.server.ts |  2 --
 src/routes/+page.svelte    | 39 +++++++++++++++++++-------------------
 7 files changed, 75 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/message.svelte.ts
 delete mode 100644 src/lib/message.ts

diff --git a/src/lib/Message.svelte b/src/lib/Message.svelte
index 0133b76..7beeee9 100644
--- a/src/lib/Message.svelte
+++ b/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;
diff --git a/src/lib/message.svelte.ts b/src/lib/message.svelte.ts
new file mode 100644
index 0000000..3fe4fea
--- /dev/null
+++ b/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);
+}
diff --git a/src/lib/message.ts b/src/lib/message.ts
deleted file mode 100644
index df762b8..0000000
--- a/src/lib/message.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface IMessage {
-	senderId: number;
-	content: string;
-};
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index 070edd9..21ab0ca 100644
--- a/src/lib/socket.ts
+++ b/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) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 37f8681..3cbc0dc 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 7591871..9d8e8d9 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -10,7 +10,5 @@ export const actions = {
 			method: 'POST',
 			body: formData,
 		});
-
-		console.log(response.status);
 	},
 } satisfies Actions;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 350523e..85dc692 100644
--- a/src/routes/+page.svelte
+++ b/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;
-
-	let messages: IMessage[] = [];
+	const messageStore = getMessageStore();
 
 	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 flex-col gap-4 p-8 grow">
-		{#each messages as message}
-			<Message {message} localSenderId={localId}/>
+<div class="flex h-full flex-col rounded-md border">
+	<div class="flex grow flex-col gap-4 p-8">
+		{#each messageStore.messages as message}
+			<Message {message} localSenderId={messageStore.getClientId()} />
 		{/each}
 	</div>
-	<form class="flex flex-row w-full" method="POST" action="?/send-message" use:enhance={sendMessage}>
-		<Input class="rounded-r-none" name="content" bind:value={messageContent}/>
-		<Button type="submit" class="rounded-l-none" disabled={messageContent.trim().length < 1}>Send</Button>
+	<form
+		class="flex w-full flex-row"
+		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>