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

Using socket.io for websocket handling and make reforis configurable

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

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/common/__tests__/RebootButton.test.js

@@ -46,7 +46,7 @@ describe("<RebootButton/>", () => {
         fireEvent.click(getByText(componentContainer, "Reboot"));
         fireEvent.click(getByText(componentContainer, "Confirm reboot"));
         expect(mockAxios.post).toHaveBeenCalledWith(
-            "/reforis/api/reboot",
+            "/api/reboot",
             undefined,
             expect.anything()
         );

src/testUtils/mockGlobals.js

@@ -10,3 +10,4 @@ global._ = (str) => str;
 global.ngettext = (str) => str;
 global.babel = { format: (str) => str };
 global.ForisTranslations = { locale: "en" };
+global.setImmediate = (fn) => setTimeout(fn, 0);

src/utils/forisUrls.js

@@ -5,7 +5,7 @@
  * 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);