From b871968f8cf07bc5d78f96275a247f1a586ab20b Mon Sep 17 00:00:00 2001 From: Peter Harpending Date: Mon, 9 Feb 2026 21:11:53 -0800 Subject: [PATCH] roster kind of sort of works --- priv/static/js/dist/webrtc.d.ts | 2 ++ priv/static/js/dist/webrtc.js | 27 +++++++++++++++++--- priv/static/js/dist/webrtc.js.map | 2 +- priv/static/js/ts/webrtc.ts | 42 ++++++++++++++++++++++++++++--- priv/static/webrtc.html | 8 +++--- 5 files changed, 70 insertions(+), 11 deletions(-) diff --git a/priv/static/js/dist/webrtc.d.ts b/priv/static/js/dist/webrtc.d.ts index aab59c5..2bed83b 100644 --- a/priv/static/js/dist/webrtc.d.ts +++ b/priv/static/js/dist/webrtc.d.ts @@ -10,5 +10,7 @@ * @module */ declare function main(): Promise; +type ws_msg = ["username", string] | ["users", Array]; +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; declare function ws_send_json(ws: WebSocket, x: any): void; diff --git a/priv/static/js/dist/webrtc.js b/priv/static/js/dist/webrtc.js index 6206e20..e9d70a3 100644 --- a/priv/static/js/dist/webrtc.js +++ b/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...'); diff --git a/priv/static/js/dist/webrtc.js.map b/priv/static/js/dist/webrtc.js.map index 488260f..688c62a 100644 --- a/priv/static/js/dist/webrtc.js.map +++ b/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"} \ No newline at end of file +{"version":3,"file":"webrtc.js","sourceRoot":"","sources":["../ts/webrtc.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/priv/static/js/ts/webrtc.ts b/priv/static/js/ts/webrtc.ts index 341d085..85a4c5a 100644 --- a/priv/static/js/ts/webrtc.ts +++ b/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]; + +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, diff --git a/priv/static/webrtc.html b/priv/static/webrtc.html index fd9603e..4e02488 100644 --- a/priv/static/webrtc.html +++ b/priv/static/webrtc.html @@ -22,10 +22,12 @@ -