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

handle closing connections

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-08 12:58:00 +02:00
parent 9625031969
commit be71a811d3
2 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client.mts
View File

@ -5,6 +5,8 @@ const grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
const canvas = document.getElementById("game") as HTMLCanvasElement | null; const canvas = document.getElementById("game") as HTMLCanvasElement | null;
const ctx = canvas?.getContext("2d") as CanvasRenderingContext2D | null; const ctx = canvas?.getContext("2d") as CanvasRenderingContext2D | null;
let myId: number | null = null;
ws.onopen = (e) => { ws.onopen = (e) => {
console.log("connected to server"); console.log("connected to server");
@ -26,20 +28,25 @@ ws.onopen = (e) => {
ws.onmessage = (evt) => { ws.onmessage = (evt) => {
const msg: Message = JSON.parse(evt.data); const msg: Message = JSON.parse(evt.data);
console.log(msg);
switch (msg.kind) { switch (msg.kind) {
case "hello": { case "hello": {
myId = (msg.data as Hello).id;
const h1 = document.getElementById("title") as HTMLHeadingElement | null; const h1 = document.getElementById("title") as HTMLHeadingElement | null;
if (h1) { if (h1) {
h1.innerText = `connected to server with id ${(msg.data as Hello).id}` h1.innerText = `connected to server with id ${myId}`
} }
break;
} }
case "update": { case "update": {
if (ctx) { if (ctx) {
drawGrid(ctx, (msg.data as Response).grid); drawGrid(ctx, (msg.data as Response).grid);
} }
break;
} }
default: { default: {
console.log(msg); console.log(msg);
break;
} }
} }
}; };
@ -48,22 +55,15 @@ ws.onmessage = (evt) => {
function drawGrid(ctx: CanvasRenderingContext2D, grid: number[]){ function drawGrid(ctx: CanvasRenderingContext2D, grid: number[]){
for (let y = 0; y < 3; ++y) { for (let y = 0; y < 3; ++y) {
for (let x = 0; x < 3; ++x) { for (let x = 0; x < 3; ++x) {
if (grid[y*3+x] == 0) { switch (grid[y*3+x]) {
ctx.fillStyle = "black"; case 0: ctx.fillStyle = "black"; break;
const rx = x + x * 100; case myId: ctx.fillStyle = "green"; break;
const ry = y + y * 100; default: ctx.fillStyle = "blue"; break;
ctx.fillRect(rx, ry, 90, 90);
} else if (grid[y*3+x] == 1) {
ctx.fillStyle = "green";
const rx = x + x * 100;
const ry = y + y * 100;
ctx.fillRect(rx, ry, 90, 90);
} else if (grid[y*3+x] == 2) {
ctx.fillStyle = "blue";
const rx = x + x * 100;
const ry = y + y * 100;
ctx.fillRect(rx, ry, 90, 90);
} }
const rx = x + x * 100;
const ry = y + y * 100;
ctx.fillRect(rx, ry, 90, 90);
} }
} }
} }

31
server.mts
View File

@ -8,30 +8,45 @@ let grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
console.log(`waiting for connection on ws://localhost:${port}`); console.log(`waiting for connection on ws://localhost:${port}`);
let id = -1; interface Client {
let clients: WebSocket[] = []; id: number,
ws: WebSocket
}
let id = 1;
let clients: Client[] = [];
wss.on("connection", (ws) => { wss.on("connection", (ws) => {
id += 1; id += 1;
if (id > 1) { if (clients.length == 2) {
throw new Error("too many players"); console.log("too many players");
ws.close();
return;
} }
clients.push(ws); clients.push({id, ws});
ws.send(JSON.stringify({kind: "hello", data: { id } as Hello})); 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) => {
const message = JSON.parse(event.data); const message = JSON.parse(event.data);
const {x, y} = message; const {x, y} = message;
const playerId = clients.indexOf(ws); const playerId = clients.find(x => x.ws === ws)?.id;
grid[y*3+x] = playerId + 1; console.assert(playerId);
if (grid[y*3+x] === 0) {
grid[y*3+x] = playerId as number;
for (const c of clients) { for (const c of clients) {
const msg: Message = { const msg: Message = {
kind: "update", kind: "update",
data: { grid } as Response, data: { grid } as Response,
} }
c.send(JSON.stringify(msg)); c.ws.send(JSON.stringify(msg));
}
} }
}); });
ws.on("close", () => {
console.log(`player #${id} disconnected`);
clients = clients.filter(x => x.id !== id);
});
}); });