Social development practitioner. Trying to understand our world.
gateway = "██████████" // Replace this with your Gateway identifier.
counter = "example" // Edit this to change the counter.
account = "████████████" // Replace with your AWS account number.
region = "us-east-1" // Replace with your AWS region, as needed.
origin = location.origin.replace("observablehq", "████████") // Replace with your origin.
Changed in fork
-md`All that’s left is implementing a [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) client to run in the browser. My implementation is available below; it exposes an *increment* function that increments the counter, and updates the mutable *count* to reflect the counter’s value.`+md`All that’s left is implementing a [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) client to run in the browser. My implementation is available below; it exposes an *increment* function that increments the counter, and updates the mutable *count* to reflect the counter’s value. For this to work for you, remember to replace my gateway ID (i3c3e2tpt9) with your own.`
increment = {
let queue = [];
let socket;
let timeout;
let delay = 250;
(function open() {
socket = new WebSocket(`wss://i3c3e2tpt9.execute-api.us-east-1.amazonaws.com/prod?id=${encodeURIComponent(counter)}`);
socket.onopen = () => {
delay = 250;
queue.forEach(message => socket.send(message));
queue = null;
};
socket.onclose = () => {
delay *= 2;
timeout = setTimeout(open, delay + Math.random() * delay);
queue = [];
};
socket.onmessage = event => {
const data = JSON.parse(event.data);
if (isNaN(mutable count) || data.count > mutable count) {
mutable count = data.count;
}
};
})();
invalidation.then(() => {
socket.onclose = null;
socket.close();
clearTimeout(timeout);
});
return () => {
const message = JSON.stringify({type: "increment"});
if (queue) queue.push(message);
else socket.send(message);
++mutable count;
};
}
mutable count = counter, NaN
stage = "prod" // Replace if you choose a different stage name.
html`<style>
pre {
box-sizing: border-box;
border-left: solid 4px #e2e5e9;
margin-left: -14px;
padding-left: 10px;
}
body {
counter-reset: item;
}
.counter::before {
counter-increment: item;
content: counter(item) ". ";
}
</style>`