support SSE(Server-sent Events)

delete websocket done #117 done #119 done #120
arl · Jan 6, 2024 · b797f63 · b797f63
1 parent 5cd7e6a
commit b797f63
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 107 deletions.
diff --git a/_example/default/go.mod b/_example/default/go.mod
@@ -4,6 +4,4 @@ go 1.19
 
 require github.com/arl/statsviz v0.6.0
 
-require github.com/gorilla/websocket v1.5.0 // indirect
-
 replace github.com/arl/statsviz => ../../
diff --git a/_example/default/go.sum b/_example/default/go.sum
@@ -1,5 +1,5 @@
-github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
-github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
 github.com/rogpeppe/go-internal v1.11.0 h1:cWPaGQEPrBb5/AsnsZesgZZ9yb1OQ+GOISoDNXVBh4M=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f h1:v4INt8xihDGvnrfjMDVXGxw9wrfxYyCjk0KbXjhR55s=
+golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
+golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
 golang.org/x/tools v0.1.12 h1:VveCTK38A2rkS8ZqFY25HIDFscX5X9OoEhJd3quQmXU=
diff --git a/go.mod b/go.mod
@@ -3,11 +3,12 @@ module github.com/arl/statsviz
 go 1.20
 
 require (
-	github.com/gorilla/websocket v1.5.0
+	github.com/gorilla/websocket v1.5.1
 	github.com/rogpeppe/go-internal v1.11.0
 )
 
 require (
-	golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f // indirect
+	golang.org/x/net v0.17.0 // indirect
+	golang.org/x/sys v0.13.0 // indirect
 	golang.org/x/tools v0.1.12 // indirect
 )
diff --git a/go.sum b/go.sum
@@ -1,8 +1,10 @@
-github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
-github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
+github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
 github.com/rogpeppe/go-internal v1.11.0 h1:cWPaGQEPrBb5/AsnsZesgZZ9yb1OQ+GOISoDNXVBh4M=
 github.com/rogpeppe/go-internal v1.11.0/go.mod h1:ddIwULY96R17DhadqLgMfk9H9tvdUzkipdSkR5nkCZA=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f h1:v4INt8xihDGvnrfjMDVXGxw9wrfxYyCjk0KbXjhR55s=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
+golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
+golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
+golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/tools v0.1.12 h1:VveCTK38A2rkS8ZqFY25HIDFscX5X9OoEhJd3quQmXU=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
diff --git a/internal/static/js/app.js b/internal/static/js/app.js
@@ -3,15 +3,6 @@ import * as plot from "./plot.js";
 import * as theme from "./theme.js";
 import PlotsDef from './plotsdef.js';
 
-const buildWebsocketURI = () => {
-    var loc = window.location,
-        ws_prot = "ws:";
-    if (loc.protocol === "https:") {
-        ws_prot = "wss:";
-    }
-    return ws_prot + "//" + loc.host + loc.pathname + "ws"
-}
-
 const dataRetentionSeconds = 600;
 var timeout = 250;
 
@@ -26,38 +17,45 @@ let paused = false;
 let show_gc = true;
 let timerange = 60;
 
-/* WebSocket connection handling */
-const connect = () => {
-    const uri = buildWebsocketURI();
-    let ws = new WebSocket(uri);
-    console.info(`Attempting websocket connection to server at ${uri}`);
-
-    ws.onopen = () => {
+const dataProcessor = {
+    initDone: false,
+    close: () => {
+    },
+    connected: false,
+    retrying: false,
+    onopen: () => {
+        dataProcessor.initDone = false;
+        dataProcessor.connected = true;
         console.info("Successfully connected");
         timeout = 250; // reset connection timeout for next time
-    };
-
-    ws.onclose = event => {
-        console.error(`Closed websocket connection: code ${event.code}`);
-        setTimeout(connect, clamp(timeout += timeout, 250, 5000));
-    };
-
-    ws.onerror = err => {
-        console.error(`Websocket error, closing connection.`);
-        ws.close();
-    };
-
-    let initDone = false;
-    ws.onmessage = event => {
+    },
+    onclose: event => {
+        dataProcessor.connected = false;
+        console.error(`Closed connection: code ${event.code || event}`);
+        if (dataProcessor.retrying) {
+            return
+        }
+        dataProcessor.retrying = true
+        setTimeout(() => {
+            connect()
+            dataProcessor.retrying = false
+        }, clamp(timeout += timeout, 250, 5000));
+    },
+    onerror: err => {
+        console.error(`error, closing connection.`, err);
+        dataProcessor.close();
+    },
+    onmessage: event => {
         let data = JSON.parse(event.data)
-
-        if (!initDone) {
+        if (!dataProcessor.initDone) {
             configurePlots(PlotsDef);
             stats.init(PlotsDef, dataRetentionSeconds);
 
             attachPlots();
 
-            $('#play_pause').change(() => { paused = !paused; });
+            $('#play_pause').change(() => {
+                paused = !paused;
+            });
             $('#show_gc').change(() => {
                 show_gc = !show_gc;
                 updatePlots();
@@ -67,16 +65,27 @@ const connect = () => {
                 timerange = val;
                 updatePlots();
             });
-            initDone = true;
-            return;
+            dataProcessor.initDone = true;
         }
-
+        dataProcessor.onData(data);
+    },
+    onData: data => {
         stats.pushData(data);
-        if (paused) {
+        if (paused || !dataProcessor.connected) {
             return
         }
-        updatePlots(PlotsDef.events);
+        updatePlots()
+    }
+}
+/* WebSocket connection handling */
+const connect = () => {
+    const url = window.location.pathname + "ws";
+    const eventSource = new EventSource(url);
+    console.info(`Attempting sse connection to server at ${url}`);
+    for (let event in dataProcessor) {
+        eventSource[event] = dataProcessor[event];
     }
+    dataProcessor.close = eventSource.close
 }
 
 connect();
@@ -102,7 +111,31 @@ const attachPlots = () => {
     }
 }
 
-const updatePlots = () => {
+function throttle(func, delay) {
+    let initial = true;
+    let last = null;
+    let timer = null;
+    return function () {
+        const context = this;
+        const args = arguments;
+        if (initial) {
+            func.apply(context, args);
+            initial = false;
+            last = Date.now();
+        } else {
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                const now = Date.now();
+                if (now - last >= delay) {
+                    func.apply(context, args);
+                    last = now;
+                }
+            }, delay - (Date.now() - last));
+        }
+    }
+}
+
+const updatePlots = throttle(() => {
     // Create shapes.
     let shapes = new Map();
 
@@ -123,7 +156,7 @@ const updatePlots = () => {
             plot.update(xrange, data, shapes);
         }
     });
-}
+}, PlotsDef.sendFrequency||1000)
 
 const updatePlotsLayout = () => {
     plots.forEach(plot => {
@@ -139,7 +172,7 @@ theme.updateThemeMode();
 $('#color_theme_sw').change(() => {
     const themeMode = theme.getThemeMode();
     const newTheme = themeMode === "dark" && "light" || "dark";
-    localStorage.setItem("theme-mode", newTheme);    
+    localStorage.setItem("theme-mode", newTheme);
     theme.updateThemeMode();
     updatePlotsLayout();
 });
diff --git a/internal/static/js/stats.js b/internal/static/js/stats.js
@@ -92,4 +92,4 @@ const slice = (n) => {
     return sliced;
 }
 
-export { init, pushData, slice };
+export { init, pushData, slice };