thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2025-11-04 02:59:21 +00:00
Code Activity

implement hello message with player id

Browse Source
This commit is contained in:
Thibaud Gasser
2024-09-08 12:05:02 +02:00
parent 621d2489e4
commit 9625031969
4 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client.mts
View File

@@ -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,12 +26,22 @@ ws.onopen = (e) => {
ws.onmessage = (evt) => {
const msg: Message = JSON.parse(evt.data);
if (ctx && msg.kind == "update") {
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);
}
else {
}
default: {
console.log(msg);
}
}
};

6
common.mts
View File

@@ -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
}

1
index.html
View File

@@ -5,6 +5,7 @@
</head>
<body>
<canvas id="game" width=800 height=600></canvas>
<h1 id="title">Offline</h1>
</body>
<script type="module" src="client.mjs"></script>
</html>

4
server.mts
View File

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