Merge pull request #13 from SmartColumbusOS/370-reconnect-on-disconnect

370 reconnect on disconnect
UrbanOS-Examples · Nov 8, 2021 · c834d64 · c834d64
2 parents bee385e + a5e1e7d
commit c834d64
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,15 +18,16 @@
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
         "react-table": "7.7.0",
+        "reconnecting-websocket": "^4.4.0",
         "typescript": "^4.4.4",
         "web-vitals": "^1.1.2",
         "websocket": "^1.0.34"
     },
     "devDependencies": {
-      "jest-websocket-mock": "^2.2.1",
-      "mock-socket": "^9.0.6",
-      "prettier": "^2.4.1",
-      "wait-for-expect": "^3.0.2"
+        "jest-websocket-mock": "^2.2.1",
+        "mock-socket": "^9.0.6",
+        "prettier": "^2.4.1",
+        "wait-for-expect": "^3.0.2"
     },
     "scripts": {
         "start": "react-scripts start",

diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -30,8 +30,9 @@ test('renders alert pane', () => {
     expect(container.getElementsByClassName('AlertPane').length).toBe(1);
 });
 
-test('connects to alert stream on startup', () => {
+test('connects to alert stream on startup', async () => {
     render(<App />);
+    await socketServer.connected;
     expect(numberOfWebsocketClients()).toEqual(1);
 });
 
@@ -57,11 +58,13 @@ test('logs when the socket is disconnected', async () => {
     socketServer.close();
     await waitForExpect(() => {
         expect(fakeConsole).toHaveBeenCalledWith('Disconnected');
+        expect(numberOfWebsocketClients()).toEqual(0);
     });
 });
 
 test('logs when new alert is received', async () => {
     render(<App />);
+    await socketServer.connected;
     const alert: Alert = {
         avgSpeed: 0,
         coordinates: { latitude: 0, longitude: 0 },
@@ -84,6 +87,7 @@ test('logs when new alert is received', async () => {
 
 test('adds new alerts to current set', async () => {
     render(<App />);
+    await socketServer.connected;
     const alert: Alert = {
         avgSpeed: 0,
         coordinates: { latitude: 0, longitude: 0 },
@@ -136,3 +140,17 @@ test('only open one websocket connection', async () => {
     });
     expect(numberOfWebsocketClients()).toEqual(1);
 });
+
+test('reconnect after disconnect', async () => {
+    expect(numberOfWebsocketClients()).toEqual(0);
+    render(<App />);
+    const socket = await socketServer.connected;
+    expect(numberOfWebsocketClients()).toEqual(1);
+    socket.close();
+    await waitForExpect(() => {
+        expect(numberOfWebsocketClients()).toEqual(0);
+    });
+    await waitForExpect(() => {
+        expect(numberOfWebsocketClients()).toEqual(1);
+    });
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import './App.css';
 import { AlertPane } from './AlertPane';
 import { TitleBar } from './TitleBar';
+import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export interface Alert {
     id: string;
@@ -39,81 +40,33 @@ export enum AlertSeverity {
     WARN = 'warn',
 }
 
-const alert: Alert = {
-    avgSpeed: 60,
-    coordinates: {
-        latitude: -23,
-        longitude: -45,
-    },
-    id: '5678-alert',
-    refSpeed: 70,
-    location: 'HERON DRIVE',
-    severity: AlertSeverity.WARN,
-    speed: 0,
-    status: AlertStatus.NEW,
-    time: new Date().toString(),
-    type: AlertType.CONGESTION,
-    camera: 'CRANE CT @ BIRD LN',
-};
-
-const alert2: Alert = {
-    avgSpeed: 100,
-    coordinates: {
-        latitude: -23,
-        longitude: -45,
-    },
-    id: '9876-alert',
-    refSpeed: 70,
-    location: 'JOE DRIVE',
-    severity: AlertSeverity.WARN,
-    speed: 0,
-    status: AlertStatus.NEW,
-    time: '2021-10-27T21:36:00.231343Z',
-    type: AlertType.CONGESTION,
-    camera: 'HAYDEN RUN BLVD & HAYDEN RUN RD @ HAYDEN RUN RD & SPRING RIVER AVE',
-};
-
-const alert3: Alert = {
-    avgSpeed: 60,
-    coordinates: {
-        latitude: -23,
-        longitude: -45,
-    },
-    id: '0001-alert',
-    refSpeed: 70,
-    location: 'APPLE STREET',
-    severity: AlertSeverity.WARN,
-    speed: 0,
-    status: AlertStatus.NEW,
-    time: '2021-10-27T21:36:00.231343Z',
-    type: AlertType.CONGESTION,
-    camera: null,
-};
-
 export default function App() {
-    const [alerts, setAlerts] = useState([alert, alert2, alert3]);
-    const websocketRef = useRef<WebSocket>();
+    const [alerts, setAlerts] = useState<Alert[]>([]);
+    const websocketRef = useRef<ReconnectingWebSocket>();
 
     useEffect(() => {
-        const websocket = new WebSocket(`${process.env.REACT_APP_ALERTS_URL}`);
-        websocket.onopen = () => {
-            console.log('Connected to Alerting Engine');
-        };
-        websocket.onerror = () => {
-            console.log('Error received from server');
-        };
-        websocket.onclose = () => {
-            console.log('Disconnected');
-        };
-        websocket.onmessage = (message) => {
+        const websocket = new ReconnectingWebSocket(
+            `${process.env.REACT_APP_ALERTS_URL}`,
+        );
+        websocket.addEventListener('message', (message) => {
             const stringMessage = message.data as string;
             if (stringMessage !== 'Connected') {
                 console.log(stringMessage);
                 const alert = JSON.parse(stringMessage) as Alert;
                 setAlerts((alerts) => [alert, ...alerts]);
             }
-        };
+        });
+        websocket.addEventListener('open', () => {
+            console.log('Connected to Alerting Engine');
+        });
+        websocket.addEventListener('close', () => {
+            console.log('Disconnected');
+        });
+        websocket.addEventListener('error', () => {
+            console.log('Error received from server');
+        });
         websocketRef.current = websocket;
+        return () => websocket.close();
     }, []);
 
     return (