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) {