mirror of https://github.com/nealey/vail.git
223 lines
6.0 KiB
HTML
223 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Vail API Demo</title>
|
|
<style>
|
|
body {
|
|
font-family: Arimo, Arial, monospace;
|
|
}
|
|
|
|
section {
|
|
border: 1px solid black;
|
|
margin: 1em;
|
|
}
|
|
|
|
p {
|
|
max-width: 40em;
|
|
}
|
|
|
|
.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:
|
|
* clients: the number of connected clients has changed
|
|
* 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 clients are sounding
|
|
* 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)
|
|
this.dispatchEvent(new CustomEvent("message", {detail: {message}}))
|
|
if (message.Clients != this.clients) {
|
|
this.clients = message.Clients
|
|
this.dispatchEvent(new CustomEvent("clients", {detail: {clients: this.clients}}))
|
|
}
|
|
if (message.Duration.length == 0) {
|
|
this.offset = Date.now() - message.Timestamp
|
|
return
|
|
}
|
|
|
|
// Defer dispatching sound events
|
|
let now = Date.now()
|
|
let when = message.Timestamp + this.offset + this.delay
|
|
let tx = true
|
|
let detail = {}
|
|
for (let duration of message.Duration) {
|
|
let delay = when - now
|
|
if (tx && (delay >= 0)) {
|
|
setTimeout(() => this.sound(true, {when, duration}), delay)
|
|
setTimeout(() => this.sound(false, {when: when+duration, duration}), 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}))
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Log an event's detail */
|
|
function log(selector, event) {
|
|
let section = document.querySelector(selector)
|
|
let log = section.querySelector(".log")
|
|
let line = log.appendChild(document.createElement("div"))
|
|
line.textContent = event.type + ": " + JSON.stringify(event.detail)
|
|
line.scrollIntoView()
|
|
}
|
|
|
|
/** Update the displayed number of clients. */
|
|
function clients(event) {
|
|
let clients = document.querySelector("#nclients")
|
|
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 => log("#messages", event))
|
|
vail.addEventListener("clients", event => log("#clients", event))
|
|
vail.addEventListener("sound", event => log("#sounds", event))
|
|
vail.addEventListener("nosound", event => log("#sounds", event))
|
|
|
|
vail.addEventListener("clients", event => clients(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="nclients">0</span></div>
|
|
|
|
<section id="sounds">
|
|
<h2>sound events</h2>
|
|
<div class="log"></div>
|
|
<p>
|
|
Implementations should use sound events, which will be dispatched
|
|
in the correct order, and only have one duration per event.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="clients">
|
|
<h2>clients events</h2>
|
|
<div class="log"></div>
|
|
<p>
|
|
Clients events are dispatched whenever the number of
|
|
connected clients changes.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="messages">
|
|
<h2>message events</h2>
|
|
<div class="log"></div>
|
|
<p>
|
|
Message events are "raw" events. They may arrive out of order,
|
|
and can have multiple durations.
|
|
The Vail class parses these into properly-sequenced
|
|
"sound" events.
|
|
</p>
|
|
</section>
|
|
</body>
|
|
</html>
|