Push live session activity over WebSocket with polling fallback

src_assets/common/assets/web/troubleshooting.html

@@ -282,6 +282,8 @@
           logFilter: null,
           logInterval: null,
           sessionInterval: null,
+          sessionSocket: null,
+          sessionReconnectTimer: null,
           restartPressed: false,
           showApplyMessage: false,
           platform: "",
@@ -440,13 +442,69 @@
         this.refreshLogs();
         this.refreshClients();
         this.refreshActiveSessions();
+        this.connectActiveSessionsSocket();
       },
       beforeDestroy() {
         clearInterval(this.logInterval);
         clearInterval(this.sessionInterval);
+        clearTimeout(this.sessionReconnectTimer);
+        if (this.sessionSocket) {
+          this.sessionSocket.onclose = null;
+          this.sessionSocket.close();
+          this.sessionSocket = null;
+        }
       },
       methods: {
+        connectActiveSessionsSocket() {
+          fetch("./api/sessions/ws-token")
+            .then((r) => r.json())
+            .then((r) => {
+              if (!r || r.status !== true || !r.token) {
+                throw new Error("No websocket token");
+              }
+
+              const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+              const wsUrl = `${protocol}://${window.location.host}/api/sessions/active/ws?token=${encodeURIComponent(r.token)}`;
+
+              this.sessionSocket = new WebSocket(wsUrl);
+
+              this.sessionSocket.onmessage = (event) => {
+                try {
+                  const payload = JSON.parse(event.data);
+                  if (payload && payload.status === true && payload.sessions) {
+                    this.activeSessions = payload.sessions;
+                  }
+                } catch (_e) {
+                  return;
+                }
+              };
+
+              this.sessionSocket.onclose = () => {
+                this.sessionSocket = null;
+                clearTimeout(this.sessionReconnectTimer);
+                this.sessionReconnectTimer = setTimeout(() => {
+                  this.connectActiveSessionsSocket();
+                }, 1000);
+              };
+
+              this.sessionSocket.onerror = () => {
+                if (this.sessionSocket) {
+                  this.sessionSocket.close();
+                }
+              };
+            })
+            .catch(() => {
+              clearTimeout(this.sessionReconnectTimer);
+              this.sessionReconnectTimer = setTimeout(() => {
+                this.connectActiveSessionsSocket();
+              }, 1000);
+            });
+        },
         refreshActiveSessions() {
+          if (this.sessionSocket && this.sessionSocket.readyState === WebSocket.OPEN) {
+            return;
+          }
+
           fetch("./api/sessions/active")
             .then((r) => r.json())
             .then((r) => {