From 8e22d37b64d79820873cf6e58870c7e3249a04e9 Mon Sep 17 00:00:00 2001 From: jude Date: Sat, 14 Jan 2023 16:59:11 +0000 Subject: [PATCH] Show the players Send keepalive pings. Remove players who haven't sent pings. --- app.py | 3 +-- static/css/style.css | 6 ++++++ static/js/index.js | 32 ++++++++++++++++++++++++++++++-- templates/index.html | 7 +++++++ 4 files changed, 44 insertions(+), 4 deletions(-) diff --git a/app.py b/app.py index 9b480ce..88b1f2f 100644 --- a/app.py +++ b/app.py @@ -12,9 +12,8 @@ def index(): @socketio.event def message(data): - print(data) emit('message', data, broadcast=True) if __name__ == '__main__': - socketio.run(app, log_output=True) + socketio.run(app, log_output=True, debug=True) diff --git a/static/css/style.css b/static/css/style.css index e69de29..2e4884f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -0,0 +1,6 @@ +#players { + position: absolute; + right: 0; + top: 0; + padding: 12px; +} diff --git a/static/js/index.js b/static/js/index.js index 107eaf4..28873c8 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -1,4 +1,6 @@ const ID = window.crypto.randomUUID(); +// Timeout to consider a player disconnected +const TIMEOUT = 30_000; let players = {}; @@ -8,7 +10,7 @@ document.addEventListener("DOMContentLoaded", () => { socket.on("connect", () => { console.log("Connected!"); socket.emit("message", { type: "ANNOUNCE", author: ID, name: "" }); - players[ID] = { name: "" }; + players[ID] = { name: "", timeout: null }; }); socket.on("message", (data) => { @@ -18,16 +20,42 @@ document.addEventListener("DOMContentLoaded", () => { case "ANNOUNCE": playerConnected(socket, data); break; + + case "KEEPALIVE": + keepAlive(data); + break; } } }); + + // Emit keepalive messages to inform other players we are still here + window.setInterval(() => { + socket.emit("message", { type: "KEEPALIVE", author: ID }); + }, TIMEOUT / 5); }); function playerConnected(socket, data) { // When a new player is seen, all announce to ensure they know all players. if (players[data.author] === undefined) { - players[data.author] = { name: data.name }; + players[data.author] = { name: data.name, timeout: window.setTimeout(() => { delete players[data.author]; updatePlayerDom(); }, TIMEOUT) }; socket.emit("message", { type: "ANNOUNCE", author: ID, name: "" }); } else { } + + updatePlayerDom(); +} + +function keepAlive(data) { + window.clearTimeout(players[data.author].timeout); + players[data.author].timeout = window.setTimeout(() => { delete players[data.author]; updatePlayerDom(); }, TIMEOUT); +} + +function updatePlayerDom() { + let list = document.querySelector('#playerList'); + list.replaceChildren(); + for (let playerId of Object.keys(players)) { + let newDom = document.createElement('li'); + newDom.textContent = playerId; + list.appendChild(newDom); + } } diff --git a/templates/index.html b/templates/index.html index 7a620b8..0c49a63 100644 --- a/templates/index.html +++ b/templates/index.html @@ -9,5 +9,12 @@ + +
+ Players + +
+