chore(webui): keep config in sync with multiple tabs (#2325)

Adding "wsid" to uniquely identify a given tab (by the websocket connection) so we can avoid needless refreshing on the same tab.

Closes #2316

Reviewed-on: #2325
Co-authored-by: Sainan <63328889+Sainan@users.noreply.github.com>
Co-committed-by: Sainan <63328889+Sainan@users.noreply.github.com>

src/controllers/custom/configController.ts

@@ -2,6 +2,7 @@ import { RequestHandler } from "express";
 import { config } from "@/src/services/configService";
 import { getAccountForRequest, isAdministrator } from "@/src/services/loginService";
 import { saveConfig } from "@/src/services/configWatcherService";
+import { sendWsBroadcastExcept } from "@/src/services/webService";
 
 export const getConfigController: RequestHandler = async (req, res) => {
     const account = await getAccountForRequest(req);
@@ -24,6 +25,7 @@ export const setConfigController: RequestHandler = async (req, res) => {
             const [obj, idx] = configIdToIndexable(id);
             obj[idx] = value;
         }
+        sendWsBroadcastExcept(parseInt(String(req.query.wsid)), { config_reloaded: true });
         await saveConfig();
         res.end();
     } else {

src/services/webService.ts

@@ -136,7 +136,10 @@ export const stopWebServer = async (): Promise<void> => {
     await Promise.all(promises);
 };
 
+let lastWsid: number = 0;
+
 interface IWsCustomData extends ws {
+    id?: number;
     accountId?: string;
 }
 
@@ -150,6 +153,7 @@ interface IWsMsgFromClient {
 }
 
 interface IWsMsgToClient {
+    //wsid?: number;
     reload?: boolean;
     ports?: {
         http: number | undefined;
@@ -174,6 +178,10 @@ const wsOnConnect = (ws: ws, req: http.IncomingMessage): void => {
         ws.close();
         return;
     }
+
+    (ws as IWsCustomData).id = ++lastWsid;
+    ws.send(JSON.stringify({ wsid: lastWsid }));
+
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     ws.on("message", async msg => {
         const data = JSON.parse(String(msg)) as IWsMsgFromClient;
@@ -268,3 +276,21 @@ export const sendWsBroadcastTo = (accountId: string, data: IWsMsgToClient): void
         }
     }
 };
+
+export const sendWsBroadcastExcept = (wsid: number | undefined, data: IWsMsgToClient): void => {
+    const msg = JSON.stringify(data);
+    if (wsServer) {
+        for (const client of wsServer.clients) {
+            if ((client as IWsCustomData).id != wsid) {
+                client.send(msg);
+            }
+        }
+    }
+    if (wssServer) {
+        for (const client of wssServer.clients) {
+            if ((client as IWsCustomData).id != wsid) {
+                client.send(msg);
+            }
+        }
+    }
+};

static/webui/script.js

@@ -10,7 +10,8 @@
 
 let auth_pending = false,
     did_initial_auth = false,
-    ws_is_open = false;
+    ws_is_open = false,
+    wsid = 0;
 const sendAuth = isRegister => {
     if (ws_is_open && localStorage.getItem("email") && localStorage.getItem("password")) {
         auth_pending = true;
@@ -34,6 +35,9 @@ function openWebSocket() {
     };
     window.ws.onmessage = e => {
         const msg = JSON.parse(e.data);
+        if ("wsid" in msg) {
+            wsid = msg.wsid;
+        }
         if ("reload" in msg) {
             setTimeout(() => {
                 getWebSocket().then(() => {
@@ -1858,7 +1862,7 @@ for (const id of uiConfigs) {
                 value = parseInt(value);
             }
             $.post({
-                url: "/custom/setConfig?" + window.authz,
+                url: "/custom/setConfig?" + window.authz + "&wsid=" + wsid,
                 contentType: "application/json",
                 data: JSON.stringify({ [id]: value })
             });
@@ -1866,7 +1870,7 @@ for (const id of uiConfigs) {
     } else if (elm.type == "checkbox") {
         elm.onchange = function () {
             $.post({
-                url: "/custom/setConfig?" + window.authz,
+                url: "/custom/setConfig?" + window.authz + "&wsid=" + wsid,
                 contentType: "application/json",
                 data: JSON.stringify({ [id]: this.checked })
             }).then(() => {
@@ -1881,7 +1885,7 @@ for (const id of uiConfigs) {
 function doSaveConfig(id) {
     const elm = document.getElementById(id);
     $.post({
-        url: "/custom/setConfig?" + window.authz,
+        url: "/custom/setConfig?" + window.authz + "&wsid=" + wsid,
         contentType: "application/json",
         data: JSON.stringify({ [id]: parseInt(elm.value) })
     });