--- a/light9/web/websocket.js	Thu Jun 06 00:06:00 2019 +0000
+++ b/light9/web/websocket.js	Thu Jun 06 00:07:07 2019 +0000
@@ -2,30 +2,61 @@
   url is now relative to the window location. Note that nginx may drop
   the connection after 60sec of inactivity.
 */
-function reconnectingWebSocket(url, onMessage) {
-    var pong = 0;
+
+class ReconnectingWebsocket {
     
-    var fullUrl = (
-        "ws://"
-            + window.location.host
-            + window.location.pathname
-            + (window.location.pathname.match(/\/$/) ? "" : "/")
-            + url);
-    function connect() {
-        var ws = new WebSocket(fullUrl);
+    constructor(url, onMessage) {
+        this.onMessage = onMessage;
+        this.ws = null;
+        this.connectTimer = null
+        this.pong = 0;
         
-        ws.onopen = function() {   $("#status").text("connected"); };
-        ws.onerror = function(e) { $("#status").text("error: "+e); };
-        ws.onclose = function() {  
-            pong = 1 - pong;
-            $("#status").text("disconnected (retrying "+(pong ? "😼":"😺")+")"); 
-            // this should be under a requestAnimationFrame to
-            // save resources
-            setTimeout(connect, 2000);
+        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);
         };
-        ws.onmessage = function (evt) {
-            onMessage(JSON.parse(evt.data));
+        this.ws.onmessage = (evt) => {
+            this.onMessage(JSON.parse(evt.data));
         };
     }
-    connect();
+    disconnect() {
+        this.reconnect = false;
+        this.ws.close();
+    }
 }
+
+
+
+function reconnectingWebSocket(url, onMessage) {
+    return new ReconnectingWebsocket(url, onMessage);
+}