fluxy-bot 0.1.22 → 0.1.24

package/client/src/hooks/useWebSocket.ts

@@ -8,14 +8,12 @@ export function useWebSocket() {
   useEffect(() => {
     const client = new WsClient();
     clientRef.current = client;
-    client.connect();
 
-    const checkConnection = setInterval(() => {
-      setConnected(client.connected);
-    }, 1000);
+    const unsub = client.onStatus(setConnected);
+    client.connect();
 
     return () => {
-      clearInterval(checkConnection);
+      unsub();
       client.disconnect();
     };
   }, []);

package/client/src/lib/ws-client.ts

@@ -1,10 +1,22 @@
 type MessageHandler = (msg: any) => void;
+type StatusHandler = (connected: boolean) => void;
+
+interface QueuedMessage {
+  type: string;
+  data: any;
+}
 
 export class WsClient {
   private ws: WebSocket | null = null;
   private handlers = new Map<string, Set<MessageHandler>>();
+  private statusHandlers = new Set<StatusHandler>();
   private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private heartbeatTimer: ReturnType<typeof setInterval> | null = null;
   private url: string;
+  private queue: QueuedMessage[] = [];
+  private intentionalClose = false;
+  private reconnectDelay = 1000;
+  private static MAX_RECONNECT_DELAY = 8000;
 
   constructor(url?: string) {
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -13,23 +25,42 @@ export class WsClient {
   }
 
   connect(): void {
+    this.intentionalClose = false;
     this.ws = new WebSocket(this.url);
 
+    this.ws.onopen = () => {
+      this.reconnectDelay = 1000;
+      this.notifyStatus(true);
+      this.flushQueue();
+      this.startHeartbeat();
+    };
+
     this.ws.onmessage = (e) => {
+      // Ignore pong frames
+      if (e.data === 'pong') return;
       const msg = JSON.parse(e.data);
       const handlers = this.handlers.get(msg.type);
       handlers?.forEach((h) => h(msg.data));
     };
 
     this.ws.onclose = () => {
-      this.reconnectTimer = setTimeout(() => this.connect(), 2000);
+      this.stopHeartbeat();
+      this.notifyStatus(false);
+      if (!this.intentionalClose) {
+        this.reconnectTimer = setTimeout(() => {
+          this.reconnectDelay = Math.min(this.reconnectDelay * 2, WsClient.MAX_RECONNECT_DELAY);
+          this.connect();
+        }, this.reconnectDelay);
+      }
     };
 
     this.ws.onerror = () => this.ws?.close();
   }
 
   disconnect(): void {
-    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    this.intentionalClose = true;
+    if (this.reconnectTimer) { clearTimeout(this.reconnectTimer); this.reconnectTimer = null; }
+    this.stopHeartbeat();
     this.ws?.close();
     this.ws = null;
   }
@@ -40,13 +71,46 @@ export class WsClient {
     return () => this.handlers.get(type)?.delete(handler);
   }
 
+  onStatus(handler: StatusHandler): () => void {
+    this.statusHandlers.add(handler);
+    return () => this.statusHandlers.delete(handler);
+  }
+
   send(type: string, data: any): void {
+    const message = { type, data };
     if (this.ws?.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({ type, data }));
+      this.ws.send(JSON.stringify(message));
+    } else {
+      // Queue for delivery on reconnect
+      this.queue.push(message);
     }
   }
 
   get connected(): boolean {
     return this.ws?.readyState === WebSocket.OPEN;
   }
+
+  private flushQueue(): void {
+    while (this.queue.length > 0 && this.ws?.readyState === WebSocket.OPEN) {
+      const msg = this.queue.shift()!;
+      this.ws.send(JSON.stringify(msg));
+    }
+  }
+
+  private notifyStatus(connected: boolean): void {
+    this.statusHandlers.forEach((h) => h(connected));
+  }
+
+  private startHeartbeat(): void {
+    this.stopHeartbeat();
+    this.heartbeatTimer = setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.ws.send('ping');
+      }
+    }, 25_000);
+  }
+
+  private stopHeartbeat(): void {
+    if (this.heartbeatTimer) { clearInterval(this.heartbeatTimer); this.heartbeatTimer = null; }
+  }
 }