Disconnect the WebSocket after an idle period

After deploying the WebSocket reconnection logic, our total connection
count slowly grew until nginx stopped being able to handle new
connections, leading to a severely degraded experience.

Closing the WebSocket for idle consumers should reduce the concurrent
connection count. Eventually we will need to handle re-starting the
connection anyway (and potentially only starting it on demand).

Author: shepmaster

ui/frontend/websocketMiddleware.ts

@@ -44,17 +44,35 @@ const openWebSocket = (currentLocation: Location) => {
 // https://exponentialbackoffcalculator.com
 const backoffMs = (n: number) => Math.min(100 * Math.pow(2, n), 10000);
 
+const idleTimeoutMs = 60 * 60 * 1000;
+
 export const websocketMiddleware =
   (window: Window): Middleware =>
   (store) => {
     let socket: WebSocket | null = null;
     let wasConnected = false;
     let reconnectAttempt = 0;
 
+    let timeout: number | null = null;
+    const resetTimeout = () => {
+      if (timeout) {
+        window.clearTimeout(timeout);
+      }
+
+      timeout = window.setTimeout(() => {
+        if (!socket) {
+          return;
+        }
+
+        socket.close();
+      }, idleTimeoutMs);
+    };
+
     const connect = () => {
       socket = openWebSocket(window.location);
-
       if (socket) {
+        resetTimeout();
+
         socket.addEventListener('open', () => {
           store.dispatch(websocketConnected());
 
@@ -85,6 +103,7 @@ export const websocketMiddleware =
             const rawMessage = JSON.parse(event.data);
             const message = WSMessageResponse.parse(rawMessage);
             store.dispatch(message);
+            resetTimeout();
           } catch (e) {
             console.log('Unable to parse WebSocket message', event.data, e);
           }
@@ -110,6 +129,7 @@ export const websocketMiddleware =
       if (socket && socket.readyState == socket.OPEN && sendActionOnWebsocket(action)) {
         const message = JSON.stringify(action);
         socket.send(message);
+        resetTimeout();
       }
 
       next(action);