From ba56a9e890a3087af61ca7b95e69aabeaeb89a57 Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@woozle.org>
Date: Tue, 22 Oct 2024 18:28:23 -0600
Subject: [PATCH] Add protocol and API demos

---
 static/api-demo.html      | 185 ++++++++++++++++++++++++++++++++++++++
 static/protocol-demo.html | 107 ++++++++++++++++++++++
 2 files changed, 292 insertions(+)
 create mode 100644 static/api-demo.html
 create mode 100644 static/protocol-demo.html
diff --git a/static/api-demo.html b/static/api-demo.html
new file mode 100644
index 0000000..fa0437a
--- /dev/null
+++ b/static/api-demo.html
@@ -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>
diff --git a/static/protocol-demo.html b/static/protocol-demo.html
new file mode 100644
index 0000000..5cd4c26
--- /dev/null
+++ b/static/protocol-demo.html
@@ -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>
