Enhance WebSocket client connection logic and improve event listener management (#3636)

- Updated WebSocketClient to allow connection during CONNECTING state.
- Introduced a flag for reconnection attempts.
- Improved event listener registration to prevent duplicate callbacks.
- Refactored online clients update logic in inbounds.html for better performance and clarity.
- Added CSS styles for subscription link boxes in subpage.html to enhance UI consistency and interactivity.

Co-authored-by: lolka1333 <test123@gmail.com>

1 files changed, 24 insertions, 8 deletions

diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index eeffd98d..b945da90 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -1602,7 +1602,6 @@
           if (payload && Array.isArray(payload)) {
             // Use setInbounds to properly convert to DBInbound objects with methods
             this.setInbounds(payload);
-            this.searchInbounds(this.searchKey);
           }
         });
 
@@ -1614,14 +1613,31 @@
           
           // Update online clients list in real-time
           if (payload && Array.isArray(payload.onlineClients)) {
-            this.onlineClients = payload.onlineClients;
-            // Recalculate client counts to update online status
-            this.dbInbounds.forEach(dbInbound => {
-              const inbound = this.inbounds.find(ib => ib.id === dbInbound.id);
-              if (inbound && this.clientCount[dbInbound.id]) {
-                this.clientCount[dbInbound.id] = this.getClientCounts(dbInbound, inbound);
+            const nextOnlineClients = payload.onlineClients;
+            let onlineChanged = this.onlineClients.length !== nextOnlineClients.length;
+            if (!onlineChanged) {
+              const prevSet = new Set(this.onlineClients);
+              for (const email of nextOnlineClients) {
+                if (!prevSet.has(email)) {
+                  onlineChanged = true;
+                  break;
+                }
               }
-            });
+            }
+            this.onlineClients = nextOnlineClients;
+            if (onlineChanged) {
+              // Recalculate client counts to update online status
+              this.dbInbounds.forEach(dbInbound => {
+                const inbound = this.inbounds.find(ib => ib.id === dbInbound.id);
+                if (inbound && this.clientCount[dbInbound.id]) {
+                  this.clientCount[dbInbound.id] = this.getClientCounts(dbInbound, inbound);
+                }
+              });
+
+              if (this.enableFilter) {
+                this.filterInbounds();
+              }
+            }
           }
           
           // Update last online map in real-time