roster kind of sort of works

priv/static/js/dist/webrtc.d.ts

@@ -10,5 +10,7 @@
  * @module
  */
 declare function main(): Promise<void>;
+type ws_msg = ["username", string] | ["users", Array<string>];
+declare function handle_ws_msg(message: ws_msg, roster_ul: HTMLUListElement, whoami: HTMLHeadingElement): void;
 declare function handle_join(init: HTMLDivElement, init_name: HTMLInputElement, peers: HTMLDivElement, ws: WebSocket): Promise<void>;
 declare function ws_send_json(ws: WebSocket, x: any): void;

priv/static/js/dist/webrtc.js

@@ -16,18 +16,39 @@ async function main() {
     let ws = new WebSocket('/ws/webrtc');
     // grab document elements
     let init = document.getElementById('init');
-    let peers = document.getElementById('peers');
+    let roster = document.getElementById('roster');
+    let roster_ul = document.getElementById('roster-ul');
+    let whoami = document.getElementById('whoami');
     let init_name = document.getElementById('init-name');
     let init_join = document.getElementById('init-join');
     // handle button click
     init_join.addEventListener('click', function () {
-        handle_join(init, init_name, peers, ws);
+        handle_join(init, init_name, roster, ws);
     });
     // handle message from ws
     ws.onopen = function (e) { console.log('ws open:', e); };
     ws.onclose = function (e) { console.warn('ws closed:', e); };
     ws.onerror = function (e) { console.error('ws error:', e); };
-    ws.onmessage = function (e) { console.log('ws message', e); };
+    ws.onmessage =
+        function (e) {
+            // console.log('ws message:', e.data);
+            let message = JSON.parse(e.data);
+            handle_ws_msg(message, roster_ul, whoami);
+        };
+}
+function handle_ws_msg(message, roster_ul, whoami) {
+    switch (message[0]) {
+        case "username":
+            whoami.innerText = 'Whoami: ' + message[1];
+            break;
+        case "users":
+            for (let uname of message[1]) {
+                let thisli = document.createElement('li');
+                thisli.innerText = uname;
+                roster_ul.appendChild(thisli);
+            }
+            break;
+    }
 }
 async function handle_join(init, init_name, peers, ws) {
     console.log('connecting...');

priv/static/js/dist/webrtc.js.map

@@ -1 +1 @@
-{"version":3,"file":"webrtc.js","sourceRoot":"","sources":["../ts/webrtc.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;AAEH,IAAI,EAAE,CAAC;AAEP,KAAK,UACL,IAAI;IAIA,8BAA8B;IAC9B,IAAI,EAAE,GAAG,IAAI,SAAS,CAAC,YAAY,CAAC,CAAC;IAErC,yBAAyB;IACzB,IAAI,IAAI,GAAI,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAsB,CAAC;IACjE,IAAI,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAqB,CAAC;IAEjE,IAAI,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAqB,CAAC;IACzE,IAAI,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAsB,CAAC;IAE1E,sBAAsB;IACtB,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAC9B;QACI,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC5C,CAAC,CACJ,CAAC;IAEF,yBAAyB;IACzB,EAAE,CAAC,MAAM,GAAM,UAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3D,EAAE,CAAC,OAAO,GAAK,UAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9D,EAAE,CAAC,OAAO,GAAK,UAAS,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9D,EAAE,CAAC,SAAS,GAAG,UAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjE,CAAC;AAED,KAAK,UACL,WAAW,CACN,IAA0B,EAC1B,SAA4B,EAC5B,KAA0B,EAC1B,EAAqB;IAGtB,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7B,IAAI,SAAS,GAAW,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAC/C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAEpC,YAAY,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;AACzB,CAAC;AAGD,SACA,YAAY,CACP,EAAc,EACd,CAAQ;IAGT,IAAI,CAAC,GAAW,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IAE7B,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACf,CAAC"}
+{"version":3,"file":"webrtc.js","sourceRoot":"","sources":["../ts/webrtc.ts"],"names":[],"mappings":"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"}

priv/static/js/ts/webrtc.ts

@@ -22,7 +22,9 @@ main
 
     // grab document elements
     let init      = document.getElementById('init')      as HTMLDivElement;
-    let peers = document.getElementById('peers')   as HTMLDivElement;
+    let roster    = document.getElementById('roster')    as HTMLDivElement;
+    let roster_ul = document.getElementById('roster-ul') as HTMLUListElement;
+    let whoami    = document.getElementById('whoami')    as HTMLHeadingElement;
 
     let init_name = document.getElementById('init-name') as HTMLInputElement;
     let init_join = document.getElementById('init-join') as HTMLButtonElement;
@@ -30,7 +32,7 @@ main
     // handle button click
     init_join.addEventListener('click',
         function() {
-            handle_join(init, init_name, peers, ws);
+            handle_join(init, init_name, roster, ws);
         }
     );
 
@@ -38,9 +40,41 @@ main
     ws.onopen    = function(e) { console.log('ws open:', e); };
     ws.onclose   = function(e) { console.warn('ws closed:', e); };
     ws.onerror   = function(e) { console.error('ws error:', e); };
-    ws.onmessage = function(e) { console.log('ws message', e); };
+    ws.onmessage =
+        function(e) {
+            // console.log('ws message:', e.data);
+            let message = JSON.parse(e.data) as ws_msg;
+            handle_ws_msg(message, roster_ul, whoami);
+        };
 }
 
+type ws_msg = ["username", string]
+            | ["users", Array<string>];
+
+function
+handle_ws_msg
+    (message   : ws_msg,
+     roster_ul : HTMLUListElement,
+     whoami    : HTMLHeadingElement)
+    : void
+{
+    switch(message[0]) {
+        case "username":
+            whoami.innerText = 'Whoami: ' + message[1];
+            break;
+        case "users":
+            for (let uname of message[1]) {
+                let thisli = document.createElement('li');
+                thisli.innerText = uname;
+                roster_ul.appendChild(thisli);
+            }
+            break;
+    }
+
+}
+
+
+
 async function
 handle_join
     (init      : HTMLDivElement,

priv/static/webrtc.html

@@ -22,10 +22,12 @@
         </div>
 
 
-        <div id="peers" hidden>
+        <div id="roster" hidden>
-            <h1>Peers</h1>
+            <h2 id="whoami">Whoami: </h2>
 
-            <ul id="peers-ul"></ul>
+            <h2>Roster</h2>
+
+            <ul id="roster-ul"></ul>
         </div>
     </div>