diff --git a/client.mts b/client.mts index 04f0800..0b72d72 100644 --- a/client.mts +++ b/client.mts @@ -1,4 +1,4 @@ -import { Request, Response, Message } from "common.mjs"; +import { Request, Response, Message, Hello } from "common.mjs"; const ws = new WebSocket("ws://localhost:1234"); const grid = [0, 0, 0, 0, 0, 0, 0, 0, 0] @@ -7,6 +7,7 @@ const ctx = canvas?.getContext("2d") as CanvasRenderingContext2D | null; ws.onopen = (e) => { console.log("connected to server"); + if (canvas) { if (ctx) { drawGrid(ctx, grid); @@ -25,11 +26,21 @@ ws.onopen = (e) => { ws.onmessage = (evt) => { const msg: Message = JSON.parse(evt.data); - if (ctx && msg.kind == "update") { - drawGrid(ctx, (msg.data as Response).grid); - } - else { - console.log(msg); + switch (msg.kind) { + case "hello": { + const h1 = document.getElementById("title") as HTMLHeadingElement | null; + if (h1) { + h1.innerText = `connected to server with id ${(msg.data as Hello).id}` + } + } + case "update": { + if (ctx) { + drawGrid(ctx, (msg.data as Response).grid); + } + } + default: { + console.log(msg); + } } }; diff --git a/common.mts b/common.mts index 08b28d5..2afc014 100644 --- a/common.mts +++ b/common.mts @@ -2,7 +2,7 @@ export type MessageKind = "hello" | "update"; export interface Message { kind: MessageKind, - data: Response | string, + data: Response | Hello, } export interface Request { @@ -14,3 +14,7 @@ export interface Response { grid: number[] } +export interface Hello { + id: number +} + diff --git a/index.html b/index.html index a99e65a..5414f2e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ Hello websockets - + +

Offline

diff --git a/server.mts b/server.mts index fddc90e..b5a79e8 100644 --- a/server.mts +++ b/server.mts @@ -1,4 +1,4 @@ -import { Message, Response } from "common.mjs" +import { Message, Response, Hello } from "common.mjs" import { WebSocket, WebSocketServer } from "ws"; const port = 1234 @@ -18,7 +18,7 @@ wss.on("connection", (ws) => { } clients.push(ws); - ws.send(JSON.stringify({kind: "hello", data: `player #${id} connected`} as any)); + ws.send(JSON.stringify({kind: "hello", data: { id } as Hello})); console.log(`player #${id} connected`); ws.addEventListener("message", (event: any) => {