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`.

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -26,7 +26,7 @@ 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-2024 CZ.NIC z.s.p.o. (https://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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2020-2022 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2020-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,47 +7,33 @@
 
 /* eslint no-console: "off" */
 
-const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
+import { io } from "socket.io-client";
 
-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;
+import { REFORIS_URL_PREFIX } from "../utils/forisUrls";
 
 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] || [];
@@ -55,13 +41,6 @@ class WebSockets {
         return this;
     }
 
-    subscribe(module) {
-        this.waitForConnection(() => {
-            this.send("subscribe", module);
-        });
-        return this;
-    }
-
     unbind(module, action, callback) {
         const callbacks = this.callbacks[module][action];
 
@@ -75,28 +54,12 @@ 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;
 
@@ -105,20 +68,17 @@ 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();
-    }
 }
 
 export default WebSockets;

src/webSockets/hooks.js

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