thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2024-11-17 01:16:33 +00:00
Code

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
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,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);
}
}
};

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
}

3
index.html
View File

@ -4,7 +4,8 @@
<title>Hello websockets</title>
</head>
<body>
<canvas id="game" width=800 height=600></canvas>
<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) => {