Remove reconnecting-websocket

Instead, we'll try once to connectr the WebSocket on page load.
See #52 for
implementing automatic reconnection

cueglow-webui/package.json

@@ -22,7 +22,6 @@
     "react-dom": "^16.14.0",
     "react-scripts": "^4.0.3",
     "react-tabulator": "^0.15.0",
-    "reconnecting-websocket": "^4.4.0",
     "tabulator-tables": "^4.9.3",
     "typescript": "^4.2.4",
     "uuid": "^8.3.2"

cueglow-webui/src/App.tsx

@@ -1,15 +1,12 @@
-import React, { createContext, useState } from 'react';
-import { v4 as uuidv4, NIL as uuidNilString, parse as uuidParse } from 'uuid';
+import { Dialog, HotkeysProvider, Spinner, UL } from '@blueprintjs/core';
 // import ReconnectingWebSocket from 'reconnecting-websocket';
 import { Router } from '@reach/router';
-import PatchWindow from './PatchWindow/PatchWindow';
+import React, { createContext } from 'react';
+import { NIL as uuidNilString, parse as uuidParse, v4 as uuidv4 } from 'uuid';
+import { bpNumVariables, bpVariables } from './BlueprintVariables/BlueprintVariables';
+import { ConnectionState, useConnection } from './ConnectionProvider/ConnectionProvider';
 import MainWindow from './MainWindow';
-import ReconnectingWebSocket from 'reconnecting-websocket';
-import { Dialog, HotkeysProvider, UL } from '@blueprintjs/core';
-import { bpVariables, bpNumVariables } from './BlueprintVariables/BlueprintVariables';
-
-let ws = new ReconnectingWebSocket("ws://" + window.location.host + "/ws", [],
-  { maxReconnectionDelay: 1000, minReconnectionDelay: 1000, debug: true });
+import PatchWindow from './PatchWindow/PatchWindow';
 
 // TODO install emotion (https://emotion.sh/docs/introduction), a CSS-in-JS library
 // in contrast to inline styles allows media queries, etc.
@@ -122,12 +119,8 @@ const patchExampleData = {
 export const PatchContext = createContext(patchExampleData);
 
 export function App() {
-    const [wsConnectionState, setWsConnectionState] = useState(ws.readyState);
-    ws.addEventListener(
-      "close", () => { setTimeout(() => setWsConnectionState(ws.readyState)) }
-    );
-    ws.addEventListener("open", () => (setWsConnectionState(ws.readyState)));
-
+    const connectionState = useConnection()  
+
     return (
       <HotkeysProvider>
         <PatchContext.Provider value={patchExampleData}>
@@ -138,7 +131,8 @@ export function App() {
             <MainWindow path="/" default />
             <PatchWindow path="patch/*" />
           </Router>
-          <NoConnectionAlert isOpen={wsConnectionState === 3 || wsConnectionState === 2 /*only show when connection is CLOSING or CLOSED*/} />
+          <NoConnectionAlert isOpen={connectionState === ConnectionState.Closed} />
+          <ConnectingAlert isOpen={connectionState === ConnectionState.Connecting} />
         </PatchContext.Provider >
       </HotkeysProvider>
     );
@@ -151,14 +145,23 @@ export function App() {
         <div style={{
           padding: bpVariables.ptGridSize,
         }}>
-          <p style={{marginBottom: 2*bpNumVariables.ptGridSizePx,}}>Cannot connect to the server. Retrying every second...</p>
+          <p style={{marginBottom: 2*bpNumVariables.ptGridSizePx,}}>Cannot connect to the server.</p>
           <p>Please check: </p>
           <UL style={{marginBottom: 2*bpNumVariables.ptGridSizePx,}}>
             <li>that the CueGlow Server is running</li>
             <li>your network connection to the CueGlow Server</li>
           </UL>
-          <p>You can also try reloading the page. </p>
+          <p>Then reload the page to try connecting.  </p>
         </div>
       </Dialog>
     )
+  }
+
+  function ConnectingAlert(props: { isOpen: boolean }) {
+    return (
+      <Dialog className="bp3-dark" isOpen={props.isOpen} title="Connecting..."
+        isCloseButtonShown={false} canOutsideClickClose={false} canEscapeKeyClose={false}>
+        <Spinner />
+      </Dialog>
+    )
   }

cueglow-webui/src/BlueprintVariables/BlueprintVariables.ts

@@ -9,7 +9,7 @@ export { bpVariables }
 
 // derived numeric variables
 function pixelStringToNumber(inputString: string): number {
-    return Number(inputString.slice(0, -3));
+    return Number(inputString.slice(0, -2));
 }
 
 export const bpNumVariables = {

cueglow-webui/src/ConnectionProvider/ConnectionProvider.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react"
+
+// TODO this module should provide automatic reconnection in the future
+// see https://github.com/cueglow/cueglow/issues/52
+
+const webSocketPath = "ws://" + window.location.host + "/ws"
+const webSocketConnection = new WebSocket(webSocketPath)
+
+export enum ConnectionState {
+    Connecting,
+    Open,
+    Closed,
+}
+
+function mapReadyStateToConnectionState(readyState: Number) {
+    switch (readyState) {
+        case 0: return ConnectionState.Connecting;
+        case 1: return ConnectionState.Open;
+        case 2: return ConnectionState.Closed;
+        case 3: return ConnectionState.Closed;
+    }
+}
+
+export function useConnection() {
+    const [connectionState, setConnectionState] = 
+        useState(mapReadyStateToConnectionState(webSocketConnection.readyState));
+
+    // add event handlers to WebSocket once
+    useEffect(() => {
+        webSocketConnection.addEventListener(
+            "open", () => {setConnectionState(ConnectionState.Open)}
+        );
+        webSocketConnection.addEventListener(
+            "close", () => {setConnectionState(ConnectionState.Closed)}
+        );
+    }, [])
+
+    return connectionState;
+}