1 files changed, 65 insertions, 7 deletions

diff --git a/web/html/index.html b/web/html/index.html
index 9cbb019d..bbbbb708 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -1102,6 +1102,20 @@
         });
         fileInput.click();
       },
+      startPolling() {
+        // Fallback polling mechanism
+        const pollInterval = setInterval(async () => {
+          if (window.wsClient && window.wsClient.isConnected) {
+            clearInterval(pollInterval);
+            return;
+          }
+          try {
+            await this.getStatus();
+          } catch (e) {
+            console.error(e);
+          }
+        }, 2000);
+      },
     },
     async mounted() {
       if (window.location.protocol !== "https:") {
@@ -1113,13 +1127,57 @@
         this.ipLimitEnable = msg.obj.ipLimitEnable;
       }
 
-      while (true) {
-        try {
-          await this.getStatus();
-        } catch (e) {
-          console.error(e);
-        }
-        await PromiseUtil.sleep(2000);
+      // Initial status fetch
+      await this.getStatus();
+
+      // Setup WebSocket for real-time updates
+      if (window.wsClient) {
+        window.wsClient.connect();
+        
+        // Listen for status updates
+        window.wsClient.on('status', (payload) => {
+          this.setStatus(payload);
+        });
+
+        // Listen for Xray state changes
+        window.wsClient.on('xray_state', (payload) => {
+          if (this.status && this.status.xray) {
+            this.status.xray.state = payload.state;
+            this.status.xray.errorMsg = payload.errorMsg || '';
+            switch (payload.state) {
+              case 'running':
+                this.status.xray.color = "green";
+                this.status.xray.stateMsg = '{{ i18n "pages.index.xrayStatusRunning" }}';
+                break;
+              case 'stop':
+                this.status.xray.color = "orange";
+                this.status.xray.stateMsg = '{{ i18n "pages.index.xrayStatusStop" }}';
+                break;
+              case 'error':
+                this.status.xray.color = "red";
+                this.status.xray.stateMsg = '{{ i18n "pages.index.xrayStatusError" }}';
+                break;
+            }
+          }
+        });
+
+        // Notifications disabled - white notifications are not needed
+
+        // Fallback to polling if WebSocket fails
+        window.wsClient.on('error', () => {
+          console.warn('WebSocket connection failed, falling back to polling');
+          this.startPolling();
+        });
+
+        window.wsClient.on('disconnected', () => {
+          if (window.wsClient.reconnectAttempts >= window.wsClient.maxReconnectAttempts) {
+            console.warn('WebSocket reconnection failed, falling back to polling');
+            this.startPolling();
+          }
+        });
+      } else {
+        // Fallback to polling if WebSocket is not available
+        this.startPolling();
       }
     },
   });