Mercurial > hg > rlgwebd
changeset 105:a9371002aecc
RLG-Web client: use WebSockets for game lists.
Use the WebSocket connection to /status to create the list of current
games.
author | John "Elwin" Edwards <elwin@sdf.org> |
---|---|
date | Sat, 14 Jul 2012 09:46:26 -0700 |
parents | 7d444ba4739e |
children | dc1414faee19 |
files | rlgterm.js |
diffstat | 1 files changed, 84 insertions(+), 40 deletions(-) [+] |
line wrap: on
line diff
--- a/rlgterm.js Fri Jul 13 22:26:20 2012 -0700 +++ b/rlgterm.js Sat Jul 14 09:46:26 2012 -0700 @@ -75,6 +75,8 @@ } }; +var wsHost = "localhost:8080"; + var session = { /* The session id assigned by the server. */ id: null, @@ -91,6 +93,8 @@ var statInterval = null; /* How frequently to check. */ var statDelta = 8000; +/* A WebSocket to listen for status events. */ +var statsock = null; function writeData(hexstr) { var codenum; @@ -466,6 +470,78 @@ return; } +function tableCurrent(gamelist) { + var gamediv = document.getElementById("gametable"); + while (gamediv.children.length > 2) + gamediv.removeChild(gamediv.children[2]); + if (gamelist.length === 0) { + gamediv.style.display = "none"; + document.getElementById("nogames").style.display = "block"; + } + else { + gamediv.style.display = "table"; + document.getElementById("nogames").style.display = "none"; + } + for (var i = 0; i < gamelist.length; i++) { + var row = document.createElement("div"); + var cell1 = document.createElement("div"); + var cell2 = document.createElement("div"); + var cell3 = document.createElement("div"); + var cell4 = document.createElement("div"); + cell1.appendChild(document.createTextNode(gamelist[i].p)); + var uname = gamelist[i].g; + if (uname in games) + cell2.appendChild(document.createTextNode(games[uname].name)); + else { + continue; + } + cell3.appendChild(document.createTextNode(idlestr(gamelist[i].i))); + var button = document.createElement("span"); + button.appendChild(document.createTextNode("Watch")); + button.onclick = makeWatcher(gamelist[i].n); + button.className = "ibutton"; + cell4.appendChild(button); + row.appendChild(cell1); + row.appendChild(cell2); + row.appendChild(cell3); + row.appendChild(cell4); + gamediv.appendChild(row); + } +} + +/* Handles the status socket, opening and closing it when necessary. */ +function wsCurrent() { + if (!WebSocket) + return; + if (session.id) { + /* Don't bother with status if already playing/watching. */ + if (statsock) { + statsock.close(); + statsock = null; + } + return; + } + if (statsock) + return; + statsock = new WebSocket("ws://" + wsHost + "/status"); + statsock.onmessage = function (ev) { + var msg; + try { + msg = JSON.parse(ev.data); + } catch (e) { + if (e instanceof SyntaxError) + return; + } + if (msg.t != "t") { + return; + } + tableCurrent(msg.g); + }; + statsock.onclose = function (ev) { + statsock = null; + } +} + function getcurrent(clear) { if (session.id || clear) { if (statInterval) { @@ -477,6 +553,11 @@ if (!statInterval) { statInterval = window.setInterval(getcurrent, statDelta); } + if (session.lcred) + getchoices(); + if (WebSocket) { + return; + } var req = new XMLHttpRequest(); req.onerror = errHandler; req.onreadystatechange = function () { @@ -492,48 +573,10 @@ if (!reply.s) { return; } - var gamediv = document.getElementById("gametable"); - while (gamediv.children.length > 2) - gamediv.removeChild(gamediv.children[2]); - if (reply.g.length === 0) { - gamediv.style.display = "none"; - document.getElementById("nogames").style.display = "block"; - } - else { - gamediv.style.display = "table"; - document.getElementById("nogames").style.display = "none"; - } - for (var i = 0; i < reply.g.length; i++) { - var row = document.createElement("div"); - var cell1 = document.createElement("div"); - var cell2 = document.createElement("div"); - var cell3 = document.createElement("div"); - var cell4 = document.createElement("div"); - cell1.appendChild(document.createTextNode(reply.g[i].p)); - var uname = reply.g[i].g; - if (uname in games) - cell2.appendChild(document.createTextNode(games[uname].name)); - else { - debug(1, "Unrecognized game: " + uname); - continue; - } - cell3.appendChild(document.createTextNode(idlestr(reply.g[i].i))); - var button = document.createElement("span"); - button.appendChild(document.createTextNode("Watch")); - button.onclick = makeWatcher(reply.g[i].n); - button.className = "ibutton"; - cell4.appendChild(button); - row.appendChild(cell1); - row.appendChild(cell2); - row.appendChild(cell3); - row.appendChild(cell4); - gamediv.appendChild(row); - } + tableCurrent(reply.g); }; req.open('GET', '/status', true); req.send(); - if (session.lcred) - getchoices(); return; } @@ -699,7 +742,7 @@ } function wsWatch(gamenumber) { - var sockurl = "ws://localhost:8080/watch/" + String(gamenumber); + var sockurl = "ws://" + wsHost + "/watch/" + String(gamenumber); var ws = new WebSocket(sockurl); ws.onopen = function (event) { session.id = true; @@ -871,6 +914,7 @@ document.getElementById("register").style.display = "block"; document.getElementById("current").style.display = "none"; } + wsCurrent(); } function toggleBlock(id) {