thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2025-01-12 04:41:06 +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 ws = new WebSocket("ws://localhost:1234");
const grid = [0, 0, 0, 0, 0, 0, 0, 0, 0] 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) => { ws.onopen = (e) => {
console.log("connected to server"); console.log("connected to server");
if (canvas) { if (canvas) {
if (ctx) { if (ctx) {
drawGrid(ctx, grid); drawGrid(ctx, grid);
@ -25,11 +26,21 @@ ws.onopen = (e) => {
ws.onmessage = (evt) => { ws.onmessage = (evt) => {
const msg: Message = JSON.parse(evt.data); const msg: Message = JSON.parse(evt.data);
if (ctx && msg.kind == "update") { switch (msg.kind) {
drawGrid(ctx, (msg.data as Response).grid); case "hello": {
} const h1 = document.getElementById("title") as HTMLHeadingElement | null;
else { if (h1) {
console.log(msg); 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 { export interface Message {
kind: MessageKind, kind: MessageKind,
data: Response | string, data: Response | Hello,
} }
export interface Request { export interface Request {
@ -14,3 +14,7 @@ export interface Response {
grid: number[] grid: number[]
} }
export interface Hello {
id: number
}

3
index.html
View File

@ -4,7 +4,8 @@
<title>Hello websockets</title> <title>Hello websockets</title>
</head> </head>
<body> <body>
<canvas id="game" width=800 height=600></canvas> <canvas id="game" width=800 height=600></canvas>
<h1 id="title">Offline</h1>
</body> </body>
<script type="module" src="client.mjs"></script> <script type="module" src="client.mjs"></script>
</html> </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"; import { WebSocket, WebSocketServer } from "ws";
const port = 1234 const port = 1234
@ -18,7 +18,7 @@ wss.on("connection", (ws) => {
} }
clients.push(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`); console.log(`player #${id} connected`);
ws.addEventListener("message", (event: any) => { ws.addEventListener("message", (event: any) => {