Merge branch 'feature/ws-included' into 'master'

Draft: Using socket.io for websocket handling and make reforis configurable

See merge request turris/reforis/foris-js!201

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-uid": "^2.2.0"
+        "react-datetime": "^3.2.0",
+        "react-uid": "^2.2.0",
+        "socket.io-client": "^4.6.1"
     },
     "peerDependencies": {
         "bootstrap": "4.4.1",
@@ -29,14 +30,14 @@
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.12.10",
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/preset-env": "^7.9.0",
+        "@babel/cli": "^7.20.7",
+        "@babel/core": "^7.20.12",
+        "@babel/plugin-transform-runtime": "^7.19.6",
+        "@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",
@@ -45,18 +46,18 @@
         "eslint-config-reforis": "^1.0.0",
         "eslint-plugin-prettier": "^3.1.4",
         "file-loader": "^6.0.0",
-        "jest": "^25.2.0",
+        "jest": "^29.5.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-styleguidist": "^11.2.0",
+        "react-router-dom": "^5.3.4",
+        "react-styleguidist": "^13.1.1",
         "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
-    ? `${PROTOCOL}://${window.location.host}/${
-          process.env.WSPATH || "foris-ws"
-      }`
-    : `${PROTOCOL}://${window.location.hostname}:9081`;
-
-const WAITING_FOR_CONNECTION_TIMEOUT = 500;
+const { io } = require("socket.io-client");
 
 export class WebSockets {
     constructor() {
-        this.ws = new WebSocket(URL);
-        this.ws.onerror = (e) => {
-            console.error("WS: Error:", e);
-        };
-        this.ws.onmessage = (e) => {
-            console.debug(`WS: Received Message: ${e.data}`);
-            const data = JSON.parse(e.data);
-            this.dispatch(data);
-        };
-        this.ws.onopen = () => {
-            console.debug("WS: Connection open.");
-        };
-        this.ws.onclose = () => {
-            console.debug("WS: Connection closed.");
-        };
+        this.socket = io("/notifications", {
+            path: `${REFORIS_URL_PREFIX}/reforis-ws`,
+        });
+        this.connection = null;
+        this.socket.on("disconnect", (reason) => {
+            this.connection = null;
+            console.debug(`SocketIO disconnected (${reason})`);
+        });
+        this.socket.on("notification", (message) => {
+            console.debug("WS: Received Message:", message);
+            this.dispatch(message);
+        });
+        this.socket.on("connect", (connection) => {
+            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(
-                    `Callback for this message wasn't found:${error.data}`
+                console.debug(
+                    `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);