WebTTY: use WebSockets when possible.

shterm.js

@@ -6,6 +6,7 @@ var isalive = false; // Whether the session is currently active.
 var nsend = 0; // The number of the next packet to send.
 var nrecv = 0; // The next packet expected.
 var msgQ = []; // Queue for out-of-order messages.
+var conn = null; // WebSocket
 
 // A state machine that keeps track of polling the server.
 var ajaxstate = {
@@ -202,15 +203,23 @@ function postResponseHandler() {
 
 function sendback(str) {
   /* For responding to terminal queries. */
-  var formdata = {"t": "d", "n": nsend++, "d": str};
-  var datareq = new XMLHttpRequest();
-  datareq.onreadystatechange = postResponseHandler;
-  datareq.open('POST', '/feed', true);
-  datareq.send(JSON.stringify(formdata));
+  if (conn) {
+    var msgObj = {"t": "d", "d": str};
+    conn.send(JSON.stringify(msgObj));
+  }
+  else {
+    var formdata = {"t": "d", "n": nsend++, "d": str};
+    var datareq = new XMLHttpRequest();
+    datareq.onreadystatechange = postResponseHandler;
+    datareq.open('POST', '/feed', true);
+    datareq.send(JSON.stringify(formdata));
+  }
   return;
 }
 
 function sendkey(ev) {
+  if (!isalive)
+    return;
   var keynum = ev.keyCode;
   var code;
   if (keynum >= 65 && keynum <= 90) {
@@ -245,13 +254,18 @@ function sendkey(ev) {
     debug(1, "Ignoring keycode " + keynum);
     return;
   }
-  if (isalive)
-    ev.preventDefault();
-  var formdata = {"t": "d", "n": nsend++, "d": code};
-  var datareq = new XMLHttpRequest();
-  datareq.onreadystatechange = postResponseHandler;
-  datareq.open('POST', '/feed', true);
-  datareq.send(JSON.stringify(formdata));
+  ev.preventDefault();
+  if (conn) {
+    var msgObj = {"t": "d", "d": code};
+    conn.send(JSON.stringify(msgObj));
+  }
+  else {
+    var formdata = {"t": "d", "n": nsend++, "d": code};
+    var datareq = new XMLHttpRequest();
+    datareq.onreadystatechange = postResponseHandler;
+    datareq.open('POST', '/feed', true);
+    datareq.send(JSON.stringify(formdata));
+  }
   //dkey(code);
   return;
 }
@@ -265,6 +279,8 @@ var kpkeys = { "KP1": "1b4f46", "KP2": "1b4f42", "KP3": "1b5b367e",
                "KP7": "1b4f48", "KP8": "1b4f41", "KP9": "1b5b357e" };
 
 function vkey(c) {
+  if (!isalive)
+    return;
   var keystr;
   if (c.match(/^[a-z]$/)) {
     if (termemu.ctrlp()) {
@@ -304,11 +320,17 @@ function vkey(c) {
   else
     return;
   //writeData("Sending " + keystr);
-  var formdata = {"t": "d", "n": nsend++, "d": keystr};
-  var datareq = new XMLHttpRequest();
-  datareq.onreadystatechange = postResponseHandler;
-  datareq.open('POST', '/feed', true);
-  datareq.send(JSON.stringify(formdata));
+  if (conn) {
+    var msgObj = {"t": "d", "d": keystr};
+    conn.send(JSON.stringify(msgObj));
+  }
+  else {
+    var formdata = {"t": "d", "n": nsend++, "d": keystr};
+    var datareq = new XMLHttpRequest();
+    datareq.onreadystatechange = postResponseHandler;
+    datareq.open('POST', '/feed', true);
+    datareq.send(JSON.stringify(formdata));
+  }
   return;
 }
 
@@ -339,9 +361,45 @@ function togglectrl() {
   return;
 }
 
+function loginWS(h, w) {
+  if (conn)
+    return;
+  var sockurl = "ws://" + window.location.host + "/sock?w=" + w + "&h=" + h;
+  conn = new WebSocket(sockurl);
+  conn.onopen = function (event) {
+    isalive = true;
+    setTitle("Logged in");
+    debug(1, "Logged in via WebSocket");
+  }
+  conn.onmessage = function (event) {
+    var msgObj = JSON.parse(event.data);
+    if (msgObj.t == 'l') {
+      termemu.resize(msgObj.h, msgObj.w);
+    }
+    else if (msgObj.t == 'd') {
+      debug(0, msgObj.d);
+      writeData(msgObj.d);
+    }
+    else if (msgObj.t == 'q') {
+      debug(0, "Quit message!");
+      conn.close();
+    }
+  }
+  conn.onclose = function (event) {
+    conn = null;
+    isalive = false;
+    debug(1, "WebSocket connection closed.");
+    setTitle("Not connected.");
+  }
+}
+
 function login(h, w) {
   if (isalive)
     return;
+  if (window.WebSocket) {
+    loginWS(h, w);
+    return;
+  }
   params = {"login": true, "h": h, "w": w};
   var req = new XMLHttpRequest();
   req.onreadystatechange = function () {
@@ -368,6 +426,10 @@ function login(h, w) {
 }
 
 function stop() {
+  if (conn) {
+    conn.close();
+    return;
+  }
   var req = new XMLHttpRequest();
   req.onreadystatechange = function () {
     if (req.readyState == 4 && req.status == 200) {