neale/vail
neale
/
vail
mirror of https://github.com/nealey/vail.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add protocol and API demos

This commit is contained in:
Neale Pickett 2024-10-22 18:28:23 -06:00
parent 5827fdc8e1
commit ba56a9e890
2 changed files with 292 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
static/api-demo.html Normal file
View File

@ -0,0 +1,185 @@
<!DOCTYPE html>
<html>
<head>
<title>Vail API Demo</title>
<style>
body {
font-family: Arimo, Arial, monospace;
}
.log {
max-height: 10em;
overflow: scroll;
}
</style>
<script type="module">
const Millisecond = 1
const Second = Millisecond * 1000
/** Vail server connection.
*
* This opens a websocket to the given repeater on vail.woozle.org,
* and dispatches events to itself. Use .addEventListener to set up
* event handlers as you desire.
*
* Events:
* message: a message was recieved
* sound: your application should start making a sound
* nosound: your application should stop making a sound
*
* Multiple sequential sound events may be dispatched before a nosound event is.
* This indicates "cross-talk": two people are sending to the repeater at the
* same time.
*
* Class variables you may enjoy:
*
* delay: rx delay to add to incoming messages, higher-latency networks will need a larger value
* transmitters: how many things are sending to the repeater right now
* reconnect: if true, will try to maintain a connection to the server
* reconnectDelay: how long to wait between disconnection and reconnect attempt
* clients: how many connected clients the repeater last reported
* offset: clock skew between us and the repeater
*/
class Vail extends EventTarget {
constructor(repeater) {
super()
/** URL to our WebSocket */
this.url = new URL("wss://vail.woozle.org/chat")
this.url.searchParams.set("repeater", repeater)
/** Delay to add */
this.delay = 4 * Second
/** How many things are making sound right now. 0 == be quiet */
this.transmitters = 0
/** Attempt to reconnect if the websocket closes */
this.reconnect = true
/** How long to wait before trying to reconnect */
this.reconnectDelay = 3 * Second
this.reopen()
}
/** Close the web socket and stop trying to reconnect */
close() {
this.reconnect = false
if (!this.socket) {
return
}
this.socket.close()
}
reopen() {
/** Number of clients connected */
this.clients = 0
/** Timestamp offset for incoming messages */
this.offset = 0
/** Our current websocket */
this.socket = new WebSocket(this.url, ["json.vail.woozle.org"])
this.socket.addEventListener("close", event => {
addTimeout(() => this.reopen(), this.reconnectDelay)
})
this.socket.addEventListener("message", event => {
this.message(event)
})
}
message(event) {
let message = JSON.parse(event.data)
if (message.Duration.length == 0) {
this.offset = Date.now() - message.Timestamp
return
}
this.clients = message.Clients
// Immediately dispatch a message event
let detail = {
message: message,
}
this.dispatchEvent(new CustomEvent("message", {detail}))
// Defer dispatching sound events
let now = Date.now()
let when = message.Timestamp + this.offset + this.delay
let tx = true
for (let duration of message.Duration) {
let delay = when - now
if (tx && (delay >= 0)) {
detail.when = when
detail.duration = duration
setTimeout(() => this.sound(true, detail), delay)
setTimeout(() => this.sound(false, detail), delay + duration)
}
when += duration
tx = !tx
}
}
/** Dispatch a sound event.
*
* This keeps an internal count of how many things are making sound at once.
* When that count reaches 0, a "nosound" event is dispatched.
*
* @param {bool} tx True to make sound, false to stop making sound.
* @param {Object} detail CustomEvent detail
*/
sound(tx, detail) {
if (tx) {
this.transmitters++
} else {
this.transmitters--
}
detail.transmitters = this.transmitters
if (this.transmitters > 0) {
this.dispatchEvent(new CustomEvent("sound", {detail}))
} else {
this.dispatchEvent(new CustomEvent("nosound", {detail}))
}
}
}
/** Handle the message event by logging it.
*
* We also take the opportunity to update the listed number of clients.
*/
function message(event) {
let log = document.querySelector("#messages .log")
let line = log.appendChild(document.createElement("div"))
line.textContent = JSON.stringify(event.detail.message)
line.scrollIntoView()
let clients = document.querySelector("#clients")
clients.textContent = event.target.clients
}
/** Handle the sound and nosound events by displaying different glyphs */
function sound(event, enable) {
let sounder = document.querySelector("#sounder")
sounder.textContent = enable ? "█" : ""
}
let vail = new Vail("demo") // Connect to the "demo" repeater
vail.addEventListener("message", event => message(event))
vail.addEventListener("sound", event => sound(event, true))
vail.addEventListener("nosound", event => sound(event, false))
</script>
</head>
<body>
<h1>Vail API Demo</h1>
<div><a href="https://vail.woozle.org/#demo" target="_blank">Repeater</a></div>
<div>Sounder: <span id="sounder"></span></div>
<div>Clients: <span id="clients">0</span></div>
<div id="messages">
<h2>messages</h2>
<div class="log"></div>
</div>
</body>
</html>

107
static/protocol-demo.html Normal file
View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html>
<head>
<title>Vail Protocol Demo</title>
<style>
body {
font-family: sans-serif;
}
.log {
font-family: monospace;
max-height: 10em;
overflow: scroll;
}
</style>
<script>
const Millisecond = 1
const Second = 1000 * Millisecond
class Vail extends EventTarget {
constructor(repeater, protocols=["json.vail.woozle.org"]) {
super()
this.url = new URL("wss://vail.woozle.org/chat")
this.url.searchParams.set("repeater", repeater)
this.protocols = protocols
this.transmitters = 0
this.reopen()
}
reopen() {
/** Number of clients connected */
this.clients = 0
/** Timestamp offset for incoming messages */
this.offset = 0
this.socket = new WebSocket(this.url, this.protocols)
this.socket.addEventListener("open", event => {
switch (this.socket.protocol) {
case "json.vail.woozle.org":
this.socket.addEventListener("message", event => this.jsonMessage(event))
break
case "binary.vail.woozle.org":
this.socket.addEventListener("message", event => this.binaryMessage(event))
break
default:
console.error("Unrecognized protocol:", this.socket.protocol)
}
})
this.socket.addEventListener("close", event => {
setTimeout(() => this.reopen(), 3 * Second)
})
}
jsonMessage(event) {
log("#json", event.data)
}
async binaryMessage(event) {
let buf = await event.data.arrayBuffer()
let view = new DataView(buf)
let ts = view.getBigUint64(0)
let clients = view.getUint16(8)
let durations = []
for (let i = 10; i < view.byteLength; i += 2) {
durations.push(view.getUint16(i))
}
let raw = [...new Uint8Array(buf)].map(x => x.toString(16).padStart(2, 0)).join(" ")
log("#binary", `${raw} ts=${ts} cli=${clients} dur=${durations}`)
}
}
function log(selector, text) {
let el = document.querySelector(selector)
if (!el) {
console.error("No match for selector", selector)
return
}
let log = el.querySelector(".log")
let line = log.appendChild(document.createElement("div"))
line.textContent = text
line.scrollIntoView()
}
function init(repeater) {
let cliJson = new Vail(repeater, ["json.vail.woozle.org"])
let cliBin = new Vail(repeater, ["binary.vail.woozle.org"])
}
init("demo")
</script>
</head>
<body>
<h1>Vail Protocol Demo</h1>
<div id="json">
<h2>JSON</h2>
<div class="log"></div>
</div>
<div id="binary">
<h2>Binary</h2>
<div class="log"></div>
</div>
</body>
</html>