roster kind of sort of works

priv/static/js/ts/webrtc.ts

@@ -21,8 +21,10 @@ main
     let ws = new WebSocket('/ws/webrtc');
 
     // grab document elements
-    let init  = document.getElementById('init')    as HTMLDivElement;
-    let peers = document.getElementById('peers')   as HTMLDivElement;
+    let init      = document.getElementById('init')      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,