--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/websocket.js	Sun May 12 19:02:10 2024 -0700
@@ -0,0 +1,62 @@
+/*
+  url is now relative to the window location. Note that nginx may drop
+  the connection after 60sec of inactivity.
+*/
+
+class ReconnectingWebsocket {
+    
+    constructor(url, onMessage) {
+        this.onMessage = onMessage;
+        this.ws = null;
+        this.connectTimer = null
+        this.pong = 0;
+        
+        this.fullUrl = (
+            "ws://"
+                + window.location.host
+                + window.location.pathname
+                + (window.location.pathname.match(/\/$/) ? "" : "/")
+                + url);
+        this.connect();
+    }
+    setStatus(txt) {
+        const docStatus = document.querySelector('#status')
+        if (docStatus) {
+            docStatus.innerText = txt;
+        }
+    }
+    connect() {
+        this.reconnect = true;
+        this.ws = new WebSocket(this.fullUrl);
+        
+        this.ws.onopen = () => { this.setStatus("connected"); };
+        this.ws.onerror = (e) => { this.setStatus("error: "+e); };
+        this.ws.onclose = () => {
+            this.pong = 1 - this.pong;
+            this.setStatus("disconnected (retrying "+(this.pong ? "😼":"😺")+")");
+            this.ws = null;
+
+            this.connectTimer = setTimeout(() => {
+                this.connectTimer = null;
+                requestAnimationFrame(() => {
+                    if (this.reconnect) {
+                        this.connect();
+                    }
+                });
+            }, 2000);
+        };
+        this.ws.onmessage = (evt) => {
+            this.onMessage(JSON.parse(evt.data));
+        };
+    }
+    disconnect() {
+        this.reconnect = false;
+        this.ws.close();
+    }
+}
+
+
+
+function reconnectingWebSocket(url, onMessage) {
+    return new ReconnectingWebsocket(url, onMessage);
+}