wip

priv/static/js/ts/webrtc.ts

@@ -13,8 +13,61 @@
 main();
 
 async function
-main()
+main
+    ()
+    : Promise<void>
 {
-    let pc: RTCPeerConnection = new RTCPeerConnection();
+    // start websocket immediately
+    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_name = document.getElementById('init-name') as HTMLInputElement;
+    let init_join = document.getElementById('init-join') as HTMLButtonElement;
+
+    // handle button click
+    init_join.addEventListener('click',
+        function() {
+            handle_join(init, init_name, peers, ws);
+        }
+    );
+
+    // handle message from ws
+    ws.onopen    = function(e) { console.log('ws open:', e); };
+    ws.onclose   = function(e) { console.log('ws closed:', e); };
+    ws.onerror   = function(e) { console.error('ws error:', e); };
+    ws.onmessage = function(e) { console.log('ws message', e); };
 }
 
+async function
+handle_join
+    (init      : HTMLDivElement,
+     init_name : HTMLInputElement,
+     peers     : HTMLDivElement,
+     ws        : WebSocket)
+    : Promise<void>
+{
+    console.log('connecting...');
+    let user_name: string = init_name.value.trim();
+    console.log('username:', user_name);
+
+    ws_send_json(ws, ['username', user_name]);
+
+    init.hidden = true;
+    peers.hidden = false;
+}
+
+
+function
+ws_send_json
+    (ws : WebSocket,
+     x  : any)
+    : void
+{
+    let s: string = JSON.stringify(x, undefined, 4);
+    console.log('sending:\n', s);
+
+    ws.send(s);
+}

priv/static/webrtc.html

@@ -16,13 +16,16 @@
         <h1 class="content-title">FEWD: webrtc demo</h1>
 
         <div id="init">
-            <label for="initName">username:</label>
-            <input autofocus id="initName" type="text"></input>
-            <button id="initSubmit">Join</button>
+            <label for="init-name">username:</label>
+            <input autofocus id="init-name" type="text" value='alice'>
+            <button id="init-join">connect</button>
         </div>
 
+
         <div id="peers" hidden>
-            Peers
+            <h1>Peers</h1>
+
+            <ul id="peers-ul"></ul>
         </div>
     </div>