Implement robust reconnection system, updates, optimize typing

frontend/src/core/updateManager.ts

@@ -0,0 +1,126 @@
+/**
+ * @fileoverview Update Manager for Telegram-like update system
+ * @description Handles update sequence numbers, batching, and gap detection
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import { openDB, type IDBPDatabase } from "idb";
+import type { WebSocketCredentials, WebSocketMessage } from "./types";
+
+interface UpdateMessage<T = any> {
+    type: string;
+    data: T;
+}
+
+interface BatchedUpdatesMessage {
+    type: "updates";
+    seq: number;
+    updates: UpdateMessage[];
+}
+
+const DB_NAME = "fromchat-updates";
+const DB_VERSION = 1;
+const STORE_NAME = "lastSequence";
+
+let db: IDBPDatabase | null = null;
+
+/**
+ * Initialize IndexedDB for storing last sequence number
+ */
+async function initDB(): Promise<IDBPDatabase> {
+    if (db) return db;
+    
+    db = await openDB(DB_NAME, DB_VERSION, {
+        upgrade(database) {
+            if (!database.objectStoreNames.contains(STORE_NAME)) {
+                database.createObjectStore(STORE_NAME);
+            }
+        }
+    });
+    
+    return db;
+}
+
+/**
+ * Get the last received sequence number from IndexedDB
+ */
+export async function getLastSequence(): Promise<number> {
+    try {
+        return (await initDB())
+            .transaction(STORE_NAME, "readonly")
+            .objectStore(STORE_NAME)
+            .get("lastSeq") || 0;
+    } catch (error) {
+        console.error("Failed to get last sequence:", error);
+        return 0;
+    }
+}
+
+/**
+ * Store the last received sequence number in IndexedDB
+ */
+export async function setLastSequence(seq: number): Promise<void> {
+    try {
+        (await initDB()).transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).put(seq, "lastSeq");
+    } catch (error) {
+        console.error("Failed to set last sequence:", error);
+    }
+}
+
+/**
+ * Process a batched updates message
+ * @param message - The batched updates message from the server
+ * @param handler - Function to handle individual updates
+ * @param requestMissedFn - Optional function to request missed updates (for gap detection)
+ */
+export async function processBatchedUpdates(
+    message: BatchedUpdatesMessage,
+    handler: (update: UpdateMessage) => void,
+    requestMissedFn?: (lastSeq: number) => Promise<void>
+): Promise<void> {
+    const { seq, updates } = message;
+    const lastSeq = await getLastSequence();
+    
+    // Check for gap
+    if (seq !== lastSeq + 1 && lastSeq > 0) {
+        console.warn(`Update gap detected: expected ${lastSeq + 1}, got ${seq}`);
+        
+        // Request missing updates if function provided
+        if (requestMissedFn) {
+            try {
+                await requestMissedFn(lastSeq);
+            } catch (error) {
+                console.error("Failed to request missed updates for gap:", error);
+            }
+        }
+    }
+    
+    // Process all updates in the batch
+    for (const update of updates) {
+        handler(update);
+    }
+    
+    // Update last sequence number
+    await setLastSequence(seq);
+}
+
+/**
+ * Request missed updates from the server
+ * @param lastSeq - The last sequence number we received
+ * @param requestFn - Function to send the request to the server
+ * @param credentials - Optional WebSocket credentials for authentication
+ */
+export async function requestMissedUpdates(
+    lastSeq: number,
+    requestFn: (request: WebSocketMessage<{ lastSeq: number }>) => Promise<void>,
+    credentials?: WebSocketCredentials
+): Promise<void> {
+    if (lastSeq > 0) {
+        await requestFn({
+            type: "getUpdates",
+            data: { lastSeq },
+            credentials
+        });
+    }
+}

frontend/src/core/websocket.ts

@@ -12,6 +12,8 @@ import { CallSignalingHandler } from "./calls/signaling";
 import { onlineStatusManager } from "./onlineStatusManager";
 import { typingManager } from "./typingManager";
 import { useUserStore } from "@/state/user";
+import { getLastSequence, processBatchedUpdates, requestMissedUpdates } from "./updateManager";
+import { getAuthToken } from "@/core/api/user/auth";
 
 /**
  * Creates a new WebSocket connection to the chat server
@@ -148,55 +150,119 @@ async function reconnect(): Promise<void> {
  */
 function setupEventHandlers(): void {
     // Message handler
-    messageHandler = (e: MessageEvent) => {
+    messageHandler = async (e: MessageEvent) => {
         try {
             const response: WebSocketMessage<any> = JSON.parse(e.data);
 
+            // Handle batched updates
+            if (response.type === "updates" && "seq" in response && "updates" in response) {
+                // Create function to request missed updates with credentials
+                const token = getAuthToken();
+                const requestMissedFn = token ? async (lastSeq: number) => {
+                    await requestMissedUpdates(lastSeq, async (req) => {
+                        await request(req);
+                    }, {
+                        scheme: "Bearer",
+                        credentials: token
+                    });
+                } : undefined;
+                
+                await processBatchedUpdates(response as any, (update) => {
+                    // Route individual updates to appropriate handlers
+                    handleUpdate(update);
+                }, requestMissedFn);
+                return;
+            }
+
             // Handle call signaling messages
             if (callSignalingHandler && response.type === "call_signaling" && response.data) {
                 callSignalingHandler.handleWebSocketMessage(response.data);
             }
 
-            // Handle status and typing messages
-            if (response.type === "statusUpdate") {
-                onlineStatusManager.handleStatusUpdate(response as any);
-            } else if (response.type === "typing") {
-                typingManager.handleTyping(response as any);
-            } else if (response.type === "stopTyping") {
-                typingManager.handleStopTyping(response as any);
-            } else if (response.type === "dmTyping") {
-                typingManager.handleDmTyping(response as any);
-            } else if (response.type === "stopDmTyping") {
-                typingManager.handleStopDmTyping(response as any);
-            } else if (response.type === "suspended") {
-                // Handle account suspension
-                const { setSuspended } = useUserStore.getState();
-                const reason = response.data?.reason || "No reason provided";
-                setSuspended(reason);
-                // Close WebSocket connection
-                websocket.close();
-            } else if (response.type === "account_deleted") {
-                // Handle account deletion - silent logout
-                const { logout } = useUserStore.getState();
-                logout();
-                // Close WebSocket connection
-                websocket.close();
-            }
-
-            // Route message to global handler if set
-            if (globalMessageHandler) {
-                globalMessageHandler(response);
-            }
+            // Handle status and typing messages (these may come as immediate messages or in batches)
+            handleUpdate(response);
         } catch (error) {
             console.error("Error parsing WebSocket message:", error);
         }
     };
+
+    // Helper function to handle individual updates
+    function handleUpdate(response: WebSocketMessage<any>): void {
+        if (response.type === "statusUpdate") {
+            onlineStatusManager.handleStatusUpdate(response as any);
+        } else if (response.type === "typing") {
+            typingManager.handleTyping(response as any);
+        } else if (response.type === "stopTyping") {
+            typingManager.handleStopTyping(response as any);
+        } else if (response.type === "dmTyping") {
+            typingManager.handleDmTyping(response as any);
+        } else if (response.type === "stopDmTyping") {
+            typingManager.handleStopDmTyping(response as any);
+        } else if (response.type === "suspended") {
+            // Handle account suspension
+            const { setSuspended } = useUserStore.getState();
+            const reason = response.data?.reason || "No reason provided";
+            setSuspended(reason);
+            // Close WebSocket connection
+            websocket.close();
+        } else if (response.type === "account_deleted") {
+            // Handle account deletion - silent logout
+            const { logout } = useUserStore.getState();
+            logout();
+            // Close WebSocket connection
+            websocket.close();
+        }
+
+        // Route message to global handler if set
+        if (globalMessageHandler) {
+            globalMessageHandler(response);
+        }
+    }
     websocket.addEventListener("message", messageHandler);
 
     // Open handler
-    openHandler = () => {
+    openHandler = async () => {
         reconnectAttempts = 0; // Reset on successful connection
         isReconnecting = false;
+        
+        // Authenticate by sending ping with credentials and request missed updates
+        try {
+            const token = getAuthToken();
+            if (token) {
+                const credentials = {
+                    scheme: "Bearer",
+                    credentials: token
+                };
+                
+                // Send ping to authenticate and set user_by_ws on the server
+                try {
+                    await request({
+                        type: "ping",
+                        credentials,
+                        data: {}
+                    });
+                } catch (error) {
+                    console.error("Failed to send ping on reconnect:", error);
+                }
+                
+                // Send last sequence number and request missed updates on reconnect
+                // Wait a bit for ping to complete authentication
+                await delay(100);
+                
+                try {
+                    const lastSeq = await getLastSequence();
+                    if (lastSeq > 0) {
+                        await requestMissedUpdates(lastSeq, async (req) => {
+                            await request(req);
+                        }, credentials);
+                    }
+                } catch (error) {
+                    console.error("Failed to request missed updates:", error);
+                }
+            }
+        } catch (error) {
+            console.error("Failed to authenticate on reconnect:", error);
+        }
     };
     websocket.addEventListener("open", openHandler);