Using socket.io for websocket handling and make reforis configurable

Socket.io wrapper is used to handle websockets now,
this means that websocket logic had to be redone.

Also it is necessary to set `REFORIS_PREFIX` env variable
during the build process. To set the path of backend url.
It was previously fixed to `/reforis`.

package.json

@@ -18,8 +18,9 @@
         "immutability-helper": "3.0.1",
         "moment": "^2.24.0",
         "qrcode.react": "^1.0.1",
-        "react-datetime": "^3.1.1",
+        "react-datetime": "^3.2.0",
-        "react-uid": "^2.2.0"
+        "react-uid": "^2.2.0",
+        "socket.io-client": "4.4.1"
     },
     "peerDependencies": {
         "bootstrap": "4.4.1",
@@ -29,14 +30,14 @@
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.12.10",
+        "@babel/cli": "^7.20.7",
-        "@babel/core": "^7.9.0",
+        "@babel/core": "^7.20.12",
-        "@babel/plugin-transform-runtime": "^7.9.0",
+        "@babel/plugin-transform-runtime": "^7.19.6",
-        "@babel/preset-env": "^7.9.0",
+        "@babel/preset-env": "^7.20.2",
         "@babel/preset-react": "^7.9.4",
         "@fortawesome/fontawesome-free": "^5.13.0",
         "@testing-library/react": "^8.0.9",
-        "babel-loader": "^8.1.0",
+        "babel-loader": "^8.3.0",
         "babel-polyfill": "^6.26.0",
         "bootstrap": "^4.5.0",
         "css-loader": "^5.2.4",
@@ -47,16 +48,16 @@
         "file-loader": "^6.0.0",
         "jest": "^25.2.0",
         "jest-mock-axios": "^3.2.0",
-        "moment-timezone": "^0.5.34",
+        "moment-timezone": "^0.5.40",
         "prettier": "2.0.5",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
-        "react-router-dom": "^5.1.2",
+        "react-router-dom": "^5.3.4",
         "react-styleguidist": "^11.2.0",
         "snapshot-diff": "^0.7.0",
         "style-loader": "^1.2.1",
-        "webpack": "^5.68.0"
+        "webpack": "^5.75.0"
     },
     "scripts": {
         "lint": "eslint src",

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -25,7 +25,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
 
     useEffect(() => {
         const module = "wifi";
-        ws.subscribe(module).bind(module, "reset", () => {
+        ws.bind(module, "reset", () => {
             // eslint-disable-next-line no-restricted-globals
             setTimeout(() => location.reload(), 1000);
         });

src/utils/forisUrls.js

@@ -1,11 +1,11 @@
 /*
- * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
-export const REFORIS_URL_PREFIX = "/reforis";
+export const REFORIS_URL_PREFIX = process.env.REFORIS_PREFIX || "";
 export const REFORIS_API_URL_PREFIX = `${REFORIS_URL_PREFIX}/api`;
 
 export const ForisURLs = {

src/webSockets/WebSockets.js

@@ -7,49 +7,33 @@
 
 /* eslint no-console: "off" */
 
-const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
+import { REFORIS_URL_PREFIX } from "../utils/forisUrls";
 
-const URL = process.env.LIGHTTPD
+const { io } = require("socket.io-client");
-    ? `${PROTOCOL}://${window.location.host}/${
-          process.env.WSPATH || "foris-ws"
-      }`
-    : `${PROTOCOL}://${window.location.hostname}:9081`;
-
-const WAITING_FOR_CONNECTION_TIMEOUT = 500;
 
 export class WebSockets {
     constructor() {
-        this.ws = new WebSocket(URL);
+        this.socket = io("/notifications", {
-        this.ws.onerror = (e) => {
+            path: `${REFORIS_URL_PREFIX}/reforis-ws`,
-            console.error("WS: Error:", e);
+        });
-        };
+        this.connection = null;
-        this.ws.onmessage = (e) => {
+        this.socket.on("disconnect", (reason) => {
-            console.debug(`WS: Received Message: ${e.data}`);
+            this.connection = null;
-            const data = JSON.parse(e.data);
+            console.debug(`SocketIO disconnected (${reason})`);
-            this.dispatch(data);
+        });
-        };
+        this.socket.on("notification", (message) => {
-        this.ws.onopen = () => {
+            console.debug("WS: Received Message:", message);
-            console.debug("WS: Connection open.");
+            this.dispatch(message);
-        };
+        });
-        this.ws.onclose = () => {
+        this.socket.on("connect", (connection) => {
-            console.debug("WS: Connection closed.");
+            this.connection = connection;
-        };
+            console.debug(`SocketIO connected.`);
+        });
 
         // callbacks[module][action]
         this.callbacks = {};
     }
 
-    waitForConnection(callback) {
-        if (this.ws.readyState === 1) {
-            callback();
-        } else {
-            const that = this;
-            setTimeout(() => {
-                that.waitForConnection(callback);
-            }, WAITING_FOR_CONNECTION_TIMEOUT);
-        }
-    }
-
     bind(module, action, callback) {
         this.callbacks[module] = this.callbacks[module] || {};
         this.callbacks[module][action] = this.callbacks[module][action] || [];
@@ -57,13 +41,6 @@ export class WebSockets {
         return this;
     }
 
-    subscribe(module) {
-        this.waitForConnection(() => {
-            this.send("subscribe", module);
-        });
-        return this;
-    }
-
     unbind(module, action, callback) {
         const callbacks = this.callbacks[module][action];
 
@@ -77,28 +54,12 @@ export class WebSockets {
         }
 
         if (Object.keys(this.callbacks[module]).length === 0) {
-            this.unsubscribe(module);
+            delete this.callbacks[module];
         }
 
         return this;
     }
 
-    unsubscribe(module) {
-        this.waitForConnection(() => {
-            this.send("unsubscribe", module);
-            delete this.callbacks[module];
-        });
-        return this;
-    }
-
-    send(action, params) {
-        const payload = JSON.stringify({ action, params });
-        this.waitForConnection(() => {
-            this.ws.send(payload);
-        });
-        return this;
-    }
-
     dispatch(json) {
         if (!json.module) return;
 
@@ -107,18 +68,15 @@ export class WebSockets {
             chain = this.callbacks[json.module][json.action];
         } catch (error) {
             if (error instanceof TypeError) {
-                console.warn(
+                console.debug(
-                    `Callback for this message wasn't found:${error.data}`
+                    `Callbacks for this module wasn't found: ${json.module}`
                 );
             } else throw error;
         }
 
         if (typeof chain === "undefined") return;
 
+        console.debug("Handling WS message", json);
         chain.forEach((callback) => callback(json));
     }
-
-    close() {
-        this.ws.close();
-    }
 }

src/webSockets/hooks.js

@@ -32,7 +32,7 @@ export function useWSForisModule(
             setData(message.data);
         }
 
-        ws.subscribe(module).bind(module, action, callback);
+        ws.bind(module, action, callback);
 
         return () => {
             ws.unbind(module, action, callback);