108 lines
2.7 KiB
TypeScript
108 lines
2.7 KiB
TypeScript
/**
|
|
* webrtc page script
|
|
*
|
|
* Author: Peter Harpending <peterharpending@qpq.swiss>
|
|
* Date: 2026-02-04
|
|
* Copyright: Copyright (c) 2026 QPQ AG
|
|
*
|
|
* Reference: https://git.qpq.swiss/QPQ-AG/research-megadoc/src/commit/c7c4592d4b21ad120145ef63334471a1a7ec1e60/paste/2026-02/grok-webrtc.html
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
main();
|
|
|
|
async function
|
|
main
|
|
()
|
|
: Promise<void>
|
|
{
|
|
// start websocket immediately
|
|
let ws = new WebSocket('/ws/webrtc');
|
|
|
|
// grab document elements
|
|
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;
|
|
|
|
// handle button click
|
|
init_join.addEventListener('click',
|
|
function() {
|
|
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.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,
|
|
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);
|
|
}
|