chore(dev): improve bulk change handling

Debouncing the change events and being a bit more robust in regards to webui changes being intermixed: making the fetch a fire-and-forget to avoid errors, and waiting for the websocket connection to be re-established to avoid the browser attempting to reload when the server may not be up for a few seconds.

scripts/dev.js

@@ -13,7 +13,7 @@ args.push("--dev");
 args.push("--secret");
 args.push(secret);
 
-let buildproc, runproc;
+let buildproc, runproc, timeout;
 function run(changedFile) {
     if (changedFile) {
         console.log(`Change to ${changedFile} detected`);
@@ -28,6 +28,8 @@ function run(changedFile) {
         runproc = undefined;
     }
 
+    clearTimeout(timeout);
+    timeout = setTimeout(function() {
         buildproc = spawn("npm", ["run", "build:dev"], { stdio: "inherit", shell: true });
         buildproc.on("exit", code => {
             buildproc = undefined;
@@ -38,12 +40,15 @@ function run(changedFile) {
                 });
             }
         });
+    }, 20);
 }
 
 run();
 chokidar.watch("src").on("change", run);
 chokidar.watch("static/fixed_responses").on("change", run);
 
-chokidar.watch("static/webui").on("change", () => {
-    fetch("http://localhost/custom/webuiFileChangeDetected?secret=" + secret);
+chokidar.watch("static/webui").on("change", async () => {
+    try {
+        await fetch("http://localhost/custom/webuiFileChangeDetected?secret=" + secret);
+    } catch (e) {}
 });

src/controllers/custom/webuiFileChangeDetectedController.ts

@@ -1,11 +1,10 @@
 import { args } from "@/src/helpers/commandLineArguments";
-import { config } from "@/src/services/configService";
 import { sendWsBroadcast } from "@/src/services/webService";
 import { RequestHandler } from "express";
 
 export const webuiFileChangeDetectedController: RequestHandler = (req, res) => {
     if (args.dev && args.secret && req.query.secret == args.secret) {
-        sendWsBroadcast({ ports: { http: config.httpPort, https: config.httpsPort } });
+        sendWsBroadcast({ reload: true });
     }
     res.end();
 };

src/services/webService.ts

@@ -110,6 +110,7 @@ interface IWsMsgFromClient {
 }
 
 interface IWsMsgToClient {
+    reload?: boolean;
     ports?: {
         http: number | undefined;
         https: number | undefined;

static/webui/script.js

@@ -9,7 +9,8 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 let auth_pending = false,
-    did_initial_auth = false;
+    did_initial_auth = false,
+    ws_is_open = false;
 const sendAuth = isRegister => {
     if (localStorage.getItem("email") && localStorage.getItem("password")) {
         auth_pending = true;
@@ -28,10 +29,18 @@ const sendAuth = isRegister => {
 function openWebSocket() {
     window.ws = new WebSocket("/custom/ws");
     window.ws.onopen = () => {
+        ws_is_open = true;
         sendAuth(false);
     };
     window.ws.onmessage = e => {
         const msg = JSON.parse(e.data);
+        if ("reload" in msg) {
+            setTimeout(() => {
+                getWebSocket().then(() => {
+                    location.reload();
+                });
+            }, 100);
+        }
         if ("ports" in msg) {
             location.port = location.protocol == "https:" ? msg.ports.https : msg.ports.http;
         }
@@ -72,7 +81,7 @@ function openWebSocket() {
         }
     };
     window.ws.onclose = function () {
-        window.ws = undefined;
+        ws_is_open = false;
         setTimeout(openWebSocket, 3000);
     };
 }
@@ -82,7 +91,7 @@ function getWebSocket() {
     return new Promise(resolve => {
         let interval;
         interval = setInterval(() => {
-            if (window.ws) {
+            if (ws_is_open) {
                 clearInterval(interval);
                 resolve(window.ws);
             }
@@ -117,7 +126,7 @@ function logout() {
 
 function doLogout() {
     logout();
-    if (window.ws) {
+    if (ws_is_open) {
         // Unsubscribe from notifications about nonce invalidation
         window.ws.send(JSON.stringify({ logout: true }));
     }