RLG-Web client: use WebSockets for game lists.

Use the WebSocket connection to /status to create the list of current
games.

rlgterm.js

@@ -75,6 +75,8 @@ var games = {
   }
 };
 
+var wsHost = "localhost:8080";
+
 var session = {
   /* The session id assigned by the server. */
   id: null,
@@ -91,6 +93,8 @@ var session = {
 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 @@ function formlogin(ev) {
   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 @@ function getcurrent(clear) {
   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 @@ function getcurrent(clear) {
     if (!reply.s) {
       return;
     }
-    var gamediv = document.getElementById("gametable");
+    tableCurrent(reply.g);
-    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);
-    }
   };
   req.open('GET', '/status', true);
   req.send();
-  if (session.lcred)
-    getchoices();
   return;
 }
 
@@ -699,7 +742,7 @@ function makeWatcher(n) {
 }
 
 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 @@ function setmode(mode, ev) {
     document.getElementById("register").style.display = "block";
     document.getElementById("current").style.display = "none";
   }
+  wsCurrent();
 }
 
 function toggleBlock(id) {