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

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "5.4.0",
+    "version": "5.4.1",
     "description": "Set of components and utils for Foris and its plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -14,6 +14,7 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
+        "socket.io-client": "4.4.1",
         "axios": "^0.21.1",
         "immutability-helper": "3.0.1",
         "moment": "^2.24.0",
@@ -23,7 +24,7 @@
     },
     "peerDependencies": {
         "bootstrap": "4.4.1",
-        "prop-types": "15.7.2",
+        "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2"
@@ -49,7 +50,7 @@
         "jest-mock-axios": "^3.2.0",
         "moment-timezone": "^0.5.34",
         "prettier": "2.0.5",
-        "prop-types": "15.7.2",
+        "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",

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);

translations/nb_NO/LC_MESSAGES/forisjs.po

@@ -8,15 +8,16 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-05-20 15:42+0200\n"
-"PO-Revision-Date: 2022-03-10 23:09+0000\n"
+"PO-Revision-Date: 2022-05-25 13:20+0000\n"
 "Last-Translator: Allan Nordhøy <epost@anotheragency.no>\n"
+"Language-Team: Norwegian Bokmål <https://hosted.weblate.org/projects/turris/"
+"foris-js/nb_NO/>\n"
 "Language: nb_NO\n"
-"Language-Team: Norwegian Bokmål "
-"<https://hosted.weblate.org/projects/turris/foris-js/nb_NO/>\n"
-"Plural-Forms: nplurals=2; plural=n != 1\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 4.13-dev\n"
 "Generated-By: Babel 2.9.0\n"
 
 #: src/api/utils.js:61
@@ -38,11 +39,11 @@ msgstr "Ukjent API-feil."
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copied!"
-msgstr ""
+msgstr "Kopiert"
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copy"
-msgstr ""
+msgstr "Kopier"
 
 #: src/common/RebootButton.js:27
 #, fuzzy
@@ -125,9 +126,8 @@ msgid "auto"
 msgstr "automatisk"
 
 #: src/common/WiFiSettings/WiFiForm.js:284
-#, fuzzy
 msgid "Custom"
-msgstr "automatisk"
+msgstr "Tilpasset"
 
 #: src/common/WiFiSettings/WiFiGuestForm.js:42
 #, fuzzy
@@ -395,4 +395,3 @@ msgstr "Inneholder ikke en kommainndelt liste med e-postadresser."
 #~ "\n"
 #~ "gjeldende Wi-Fi-oppsett og tilbakestiller forvalgte verdier.\n"
 #~ "        "
-

translations/ru/LC_MESSAGES/forisjs.po

@@ -8,16 +8,17 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-05-20 15:42+0200\n"
-"PO-Revision-Date: 2022-03-12 06:58+0000\n"
+"PO-Revision-Date: 2022-05-28 09:19+0000\n"
 "Last-Translator: Алексей Леньшин <alenshin@gmail.com>\n"
+"Language-Team: Russian <https://hosted.weblate.org/projects/turris/foris-js/"
+"ru/>\n"
 "Language: ru\n"
-"Language-Team: Russian <https://hosted.weblate.org/projects/turris/foris-"
-"js/ru/>\n"
-"Plural-Forms: nplurals=3; plural=n%10==1 && n%100!=11 ? 0 : n%10>=2 && "
-"n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=3; plural=n%10==1 && n%100!=11 ? 0 : n%10>=2 && n"
+"%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2;\n"
+"X-Generator: Weblate 4.13-dev\n"
 "Generated-By: Babel 2.9.0\n"
 
 #: src/api/utils.js:61
@@ -38,11 +39,11 @@ msgstr "Неизвестная ошибка программного интер
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copied!"
-msgstr ""
+msgstr "Скопировано!"
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copy"
-msgstr ""
+msgstr "Копировать"
 
 #: src/common/RebootButton.js:27
 msgid "Reboot request failed."
@@ -105,9 +106,8 @@ msgid "Hide SSID"
 msgstr "Скрыть SSID"
 
 #: src/common/WiFiSettings/WiFiForm.js:186
-#, fuzzy
 msgid "802.11n/ac/ax mode"
-msgstr "Режим 802.11n/ac"
+msgstr "Режим 802.11n/ac/ax"
 
 #: src/common/WiFiSettings/WiFiForm.js:199
 msgid "Channel"
@@ -227,9 +227,8 @@ msgstr ""
 "некоторых устройствах."
 
 #: src/common/WiFiSettings/constants.js:34
-#, fuzzy
 msgid "WPA2/3 pre-shared key, that is required to connect to the network."
-msgstr "Общий ключ WPA2, необходимый для подключения к сети."
+msgstr "Общий ключ WPA2/3, необходимый для подключения к сети."
 
 #: src/common/WiFiSettings/constants.js:37
 msgid "If set, network is not visible when scanning for available networks."
@@ -250,17 +249,16 @@ msgstr ""
 "помещении сигнал проходит не так хорошо."
 
 #: src/common/WiFiSettings/constants.js:43
-#, fuzzy
 msgid ""
 "Change this to adjust 802.11n/ac/ax mode of operation. 802.11n with 40 "
 "MHz wide channels can yield higher throughput but can cause more "
 "interference in the network. If you don't know what to choose, use the "
 "default option with 20 MHz wide channel."
 msgstr ""
-"Измените это, чтобы настроить режим работы 802.11n/ac. 802.11n с каналами"
-" шириной 40 МГц обеспечивает более высокую пропускную способность, но "
-"может вызывать больше помех в сети. Если вы не знаете, что выбрать, "
-"используйте опцию по умолчанию с каналом шириной 20 МГц."
+"Измените это, чтобы настроить режим работы 802.11n/ac/ax. 802.11n с каналами "
+"шириной 40 МГц обеспечивает более высокую пропускную способность, но может "
+"вызывать больше помех в сети. Если вы не знаете, что выбрать, используйте "
+"опцию по умолчанию с каналом шириной 20 МГц."
 
 #: src/common/WiFiSettings/constants.js:46
 msgid ""
@@ -374,4 +372,3 @@ msgstr "Не содержит списка электронных адресов
 #~ "конфигурации Wi-Fi и восстановлению "
 #~ "значений по умолчанию.\n"
 #~ "        "
-

translations/sk/LC_MESSAGES/forisjs.po

@@ -8,15 +8,16 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-05-20 15:42+0200\n"
-"PO-Revision-Date: 2022-03-17 17:58+0000\n"
+"PO-Revision-Date: 2022-05-30 06:14+0000\n"
 "Last-Translator: Atec <dr.atec@gmail.com>\n"
+"Language-Team: Slovak <https://hosted.weblate.org/projects/turris/foris-js/"
+"sk/>\n"
 "Language: sk\n"
-"Language-Team: Slovak <https://hosted.weblate.org/projects/turris/foris-"
-"js/sk/>\n"
-"Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2;\n"
+"X-Generator: Weblate 4.13-dev\n"
 "Generated-By: Babel 2.9.0\n"
 
 #: src/api/utils.js:61
@@ -37,11 +38,11 @@ msgstr "Nastala neznáma chyba v API."
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copied!"
-msgstr ""
+msgstr "Skopírované!"
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copy"
-msgstr ""
+msgstr "Kopírovať"
 
 #: src/common/RebootButton.js:27
 msgid "Reboot request failed."
@@ -104,9 +105,8 @@ msgid "Hide SSID"
 msgstr "Skryť SSID"
 
 #: src/common/WiFiSettings/WiFiForm.js:186
-#, fuzzy
 msgid "802.11n/ac/ax mode"
-msgstr "802.11 n/ac mód"
+msgstr "802.11 n/ac/ax mód"
 
 #: src/common/WiFiSettings/WiFiForm.js:199
 msgid "Channel"
@@ -226,9 +226,8 @@ msgstr ""
 "problémy."
 
 #: src/common/WiFiSettings/constants.js:34
-#, fuzzy
 msgid "WPA2/3 pre-shared key, that is required to connect to the network."
-msgstr "WPA2 vopred zdieľaný kľúč, ktorý sa vyžaduje na pripojenie k sieti."
+msgstr "WPA2/3 vopred zdieľaný kľúč, ktorý sa vyžaduje na pripojenie k sieti."
 
 #: src/common/WiFiSettings/constants.js:37
 msgid "If set, network is not visible when scanning for available networks."
@@ -249,17 +248,16 @@ msgstr ""
 "budov šíri horšie."
 
 #: src/common/WiFiSettings/constants.js:43
-#, fuzzy
 msgid ""
 "Change this to adjust 802.11n/ac/ax mode of operation. 802.11n with 40 "
 "MHz wide channels can yield higher throughput but can cause more "
 "interference in the network. If you don't know what to choose, use the "
 "default option with 20 MHz wide channel."
 msgstr ""
-"Zmenou tejto položky sa nastavuje režim prevádzky 802.11n/ac. Štandard "
-"802.11n so šírkou kanálov 40 MHz môže priniesť vyššiu priepustnosť, ale "
-"môže spôsobiť väčšie rušenie. Ak si nie ste istí, použite predvolenú "
-"možnosť so šírkou kanála 20 MHz."
+"Zmenou tejto položky sa nastavuje režim prevádzky 802.11n/ac/ax. Štandard "
+"802.11n so šírkou kanálov 40 MHz môže priniesť vyššiu priepustnosť, ale môže "
+"spôsobiť väčšie rušenie. Ak si nie ste istí, použite predvolenú možnosť so "
+"šírkou kanála 20 MHz."
 
 #: src/common/WiFiSettings/constants.js:46
 msgid ""
@@ -370,4 +368,3 @@ msgstr "Neobsahuje zoznam e-mailov oddelených čiarkami."
 #~ "že sa tým odstráni aktuálna konfigurácia"
 #~ " a obnovia sa východiskové hodnoty.\n"
 #~ "        "
-