move to new skeleton

tutorials/websocket/json-rpc-over-websocket/web_root/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <h1>JSON-RPC over Websocket demo</h1>
+    <input id="url" type="text" placeholder="Type URL" value="ws://localhost:8000/websocket" style="width:20em;" /> 
+    <button id="connect">connect</button>
+    <div style="height: 0.3em;">&nbsp;</div>
+    <button id="btn1">Calculate 1 + 2</button>
+    <button id="btn2">Calculate 2 * 3</button>
+    <div style="margin-top: 1em;">Event log:</div>
+    <div id="log" style="background: #eee; height: 10em; padding: 0.5em; overflow:auto;"><div>
+  </body>
+  <script src="rpc-over-websocket.js"></script>
+  <script>
+    var rpc, E = function(id) { return document.getElementById(id); };
+    var url = E('url'), connect = E('connect'), btn1 = E('btn1'), btn2 = E('btn2'), msglog = E('log');
+    var enable = function(en) { btn1.disabled = btn2.disabled = !en; url.disabled = en; connect.innerHTML = en ? 'disconnect' : 'connect'; };
+    var log = text => msglog.innerHTML += text + '<br/>\n';
+    enable(false);
+    connect.onclick = function() {
+      console.log(rpc);
+      if (rpc) { rpc.close(); rpc = null; return; }
+      rpc = jsonrpc(url.value,
+            () => enable(true),
+            () => enable(false),
+            msg => log('NOTIFICATION: ' + JSON.stringify(msg)));
+    };
+    btn1.onclick = ev => rpc.call('sum', [1, 2]).then(res => log('SUM:' + JSON.stringify(res)));
+    btn2.onclick = ev => rpc.call('mul', [2, 3]).then(res => log('MUL:' + JSON.stringify(res)));
+  </script>
+</html>

tutorials/websocket/json-rpc-over-websocket/web_root/rpc-over-websocket.js

@@ -0,0 +1,36 @@
+// JSON-RPC over Websocket implementation
+var JSONRPC_TIMEOUT_MS = 1000;
+
+var jsonrpc = function(url, onopen, onclose, onnotification) {
+  var rpcid = 0, pending = {}, ws = new WebSocket(url);
+  if (!ws) return null;
+  ws.onclose = onclose;
+  ws.onmessage = function(ev) {
+    const frame = JSON.parse(ev.data);
+    console.log('rcvd', frame, 'pending:', pending);
+    if (frame.id !== undefined) {
+      if (pending[frame.id] !== undefined) pending[frame.id](frame);  // Resolve
+      delete (pending[frame.id]);
+    } else {
+      if (onnotification) onnotification(frame);
+    }
+  };
+  if (onopen) onopen();
+  return {
+    close: () => ws.close(),
+    call: function(method, params) {
+      const id = rpcid++, request = {id, method, params};
+      ws.send(JSON.stringify(request));
+      console.log('sent', request);
+      return new Promise(function(resolve, reject) {
+        setTimeout(function() {
+          if (pending[id] === undefined) return;
+          log('Timing out frame ', JSON.stringify(request));
+          delete (pending[id]);
+          reject();
+        }, JSONRPC_TIMEOUT_MS);
+        pending[id] = x => resolve(x);
+      });
+    },
+  };
+};