Fix WebUI becoming unresponsive if the MultiClient was closed but the WebAUI was left open for too long.

- Implemented maximum number of retry attempts (20)
    - Added Output Logs directory to .gitignore

data/web/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@fortawesome/react-fontawesome": "^0.1.10",
     "crypto-js": "^4.0.0",
     "css-loader": "^3.5.3",
     "lodash-es": "^4.17.15",
@@ -20,7 +20,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "sass-loader": "^8.0.2",
@@ -28,20 +28,20 @@
     "webpack-cli": "^3.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
+    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-react": "^7.10.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^2.5.1",
     "file-loader": "^6.0.0",
-    "node-sass": "^4.14.0",
+    "node-sass": "^4.14.1",
     "webpack": "^4.43.0"
   }
 }

data/web/src/js/WebUI/containers/WebUI.js

@@ -3,12 +3,14 @@ import { connect } from 'react-redux';
 import HeaderBar from '../../HeaderBar/components/HeaderBar';
 import Monitor from '../../Monitor/components/Monitor';
 import WidgetArea from '../../WidgetArea/containers/WidgetArea';
+import MonitorTools from '../../global/MonitorTools';
 import '../../../styles/WebUI/containers/WebUI.scss';
 
 // Redux actions
 import setWebSocket from '../Redux/actions/setWebSocket';
 import WebSocketUtils from '../../global/WebSocketUtils';
 import updateGameState from '../../global/Redux/actions/updateGameState';
+import appendMessage from '../../Monitor/Redux/actions/appendMessage';
 
 const mapReduxStateToProps = (reduxState) => ({
   connections: reduxState.gameState.connections,
@@ -18,13 +20,18 @@ const mapDispatchToProps = (dispatch) => ({
   doSetWebSocket: (webSocket) => dispatch(setWebSocket(webSocket)),
   handleIncomingMessage: (message) => dispatch(WebSocketUtils.handleIncomingMessage(message)),
   doUpdateGameState: (gameState) => dispatch(updateGameState(gameState)),
+  appendMonitorMessage: (message) => dispatch(appendMessage(message)),
 });
 
 class WebUI extends Component {
   constructor(props) {
     super(props);
     this.webSocket = null;
+    this.maxConnectionAttempts = 20;
     this.webUiRef = React.createRef();
+    this.state = {
+      connectionAttempts: 0,
+    };
   }
 
   componentDidMount() {
@@ -32,53 +39,59 @@ class WebUI extends Component {
   }
 
   webSocketConnect = () => {
-    const getParams = new URLSearchParams(document.location.search.substring(1));
+    this.props.appendMonitorMessage(MonitorTools.createTextDiv(
-    const port = getParams.get('port');
+      `Attempting to connect to MultiClient (attempt ${this.state.connectionAttempts + 1})...`,
-    if (!port) { throw new Error('Unable to determine socket port from GET parameters'); }
+    ));
+    // eslint-disable-next-line react/no-access-state-in-setstate
+    this.setState({ connectionAttempts: this.state.connectionAttempts + 1 }, () => {
+      if (this.state.connectionAttempts >= 20) {
+        this.props.appendMonitorMessage(MonitorTools.createTextDiv(
+          'Unable to connect to MultiClient. Maximum of 20 attempts exceeded.',
+        ));
+        return;
+      }
 
-    const webSocketAddress = `ws://localhost:${port}`;
+      const getParams = new URLSearchParams(document.location.search.substring(1));
-    try {
+      const port = getParams.get('port');
-      this.props.webSocket.close();
+      if (!port) { throw new Error('Unable to determine socket port from GET parameters'); }
-      this.props.doSetWebSocket(null);
+
-    } catch (error) {
+      const webSocketAddress = `ws://localhost:${port}`;
+      try {
+        this.props.webSocket.close();
+        this.props.doSetWebSocket(null);
+      } catch (error) {
       // Ignore errors caused by attempting to close an invalid WebSocket object
-    }
+      }
 
-    const webSocket = new WebSocket(webSocketAddress);
+      const webSocket = new WebSocket(webSocketAddress);
-    webSocket.onerror = () => {
+      webSocket.onerror = () => {
-      this.props.doUpdateGameState({
+        this.props.doUpdateGameState({
-        connections: {
+          connections: {
-          snesDevice: this.props.connections.snesDevice,
+            snesDevice: this.props.connections.snesDevice,
-          snesConnected: false,
+            snesConnected: false,
-          serverAddress: this.props.connections.serverAddress,
+            serverAddress: this.props.connections.serverAddress,
-          serverConnected: false,
+            serverConnected: false,
-        },
+          },
-      });
+        });
-      setTimeout(this.webSocketConnect, 5000);
+        if (this.state.connectionAttempts < this.maxConnectionAttempts) {
-    };
+          setTimeout(this.webSocketConnect, 5000);
-    webSocket.onclose = () => {
+        }
-      // If the WebSocket connection is closed for some reason, attempt to reconnect
+      };
-      this.props.doUpdateGameState({
-        connections: {
-          snesDevice: this.props.connections.snesDevice,
-          snesConnected: false,
-          serverAddress: this.props.connections.serverAddress,
-          serverConnected: false,
-        },
-      });
-      setTimeout(this.webSocketConnect, 5000);
-    };
 
-    // Dispatch a custom event when websocket messages are received
+      // Dispatch a custom event when websocket messages are received
-    webSocket.onmessage = (message) => {
+      webSocket.onmessage = (message) => {
-      this.props.handleIncomingMessage(message);
+        this.props.handleIncomingMessage(message);
-    };
+      };
 
-    // Store the webSocket object in the Redux store so other components can access it
+      // Store the webSocket object in the Redux store so other components can access it
-    webSocket.onopen = () => {
+      webSocket.onopen = () => {
-      this.props.doSetWebSocket(webSocket);
+        this.props.doSetWebSocket(webSocket);
-      webSocket.send(WebSocketUtils.formatSocketData('webStatus', 'connections'));
+        webSocket.send(WebSocketUtils.formatSocketData('webStatus', 'connections'));
-    };
+        this.props.appendMonitorMessage(MonitorTools.createTextDiv('Connected to MultiClient.'));
+        this.setState({ connectionAttempts: 0 });
+      };
+      this.setState({ connectionInProgress: false });
+    });
   };
 
   render() {