[#474 & #447] added ping to complete browser online/offline status

Author: Camille Moussu

__test__/features/websocket/WebSocketGate.test.tsx

@@ -56,9 +56,11 @@ describe("WebSocketGate", () => {
   const createMockSocket = (readyState = WebSocket.OPEN) => ({
     readyState,
     close: jest.fn(),
+    send: jest.fn(),
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
     cleanup: jest.fn(),
+    onmessage: null,
   });
 
   beforeEach(() => {
@@ -340,19 +342,11 @@ describe("WebSocketGate", () => {
         jest.advanceTimersByTime(1000);
       });
 
-      // Second failure
-      await act(async () => {
-        onCloseCallback?.(new CloseEvent("close", { code: 1006 }));
-        jest.advanceTimersByTime(2000);
-      });
-
-      // Success - should log and reset counter
-      await waitFor(() => {
-        expect(consoleLog).toHaveBeenCalledWith(
-          "WebSocket connected successfully"
-        );
-      });
+      expect(consoleLog).toHaveBeenCalledWith(
+        expect.stringContaining("(attempt 1/10)")
+      );
 
+      // Success - should reset counter
       // Next failure should start from attempt 1 again
       await act(async () => {
         onCloseCallback?.(new CloseEvent("close", { code: 1006 }));
@@ -906,4 +900,113 @@ describe("WebSocketGate", () => {
       expect(registerToCalendars).not.toHaveBeenCalled();
     });
   });
+
+  describe("Ping/Pong Integration", () => {
+    let mockPingCleanup: { stop: jest.Mock; sendPing: jest.Mock };
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      mockPingCleanup = {
+        stop: jest.fn(),
+        sendPing: jest.fn(),
+      };
+    });
+
+    afterEach(() => {
+      jest.runOnlyPendingTimers();
+      jest.useRealTimers();
+    });
+
+    it("should trigger reconnection when ping detects dead connection (via socket close)", async () => {
+      const consoleWarn = jest.spyOn(console, "warn").mockImplementation();
+      let onCloseCallback: ((event: CloseEvent) => void) | undefined;
+
+      (createWebSocketConnection as jest.Mock).mockImplementation(
+        (callbacks) => {
+          onCloseCallback = callbacks.onClose;
+          return Promise.resolve(mockSocket);
+        }
+      );
+
+      render(<TestWrapper store={store} />);
+
+      await waitFor(() => {
+        expect(createWebSocketConnection).toHaveBeenCalledTimes(1);
+      });
+
+      (createWebSocketConnection as jest.Mock).mockClear();
+
+      // In the real implementation, when ping detects dead connection,
+      // it calls socket.close() which triggers the onClose callback
+      // This simulates that flow
+      await act(async () => {
+        if (onCloseCallback) {
+          onCloseCallback(new CloseEvent("close", { code: 1006 }));
+        }
+      });
+
+      // Should schedule reconnection
+      expect(consoleWarn).toHaveBeenCalledWith(
+        expect.stringContaining("WebSocket closed unexpectedly")
+      );
+
+      // Advance to trigger reconnection
+      await act(async () => {
+        jest.advanceTimersByTime(1500);
+      });
+
+      // Should reconnect
+      await waitFor(() => {
+        expect(createWebSocketConnection).toHaveBeenCalledTimes(1);
+      });
+
+      consoleWarn.mockRestore();
+    });
+
+    it("should stop ping monitoring when socket closes normally", async () => {
+      let onCloseCallback: ((event: CloseEvent) => void) | undefined;
+
+      (createWebSocketConnection as jest.Mock).mockImplementation(
+        (callbacks) => {
+          onCloseCallback = callbacks.onClose;
+          return Promise.resolve(mockSocket);
+        }
+      );
+
+      render(<TestWrapper store={store} />);
+
+      await waitFor(() => {
+        expect(createWebSocketConnection).toHaveBeenCalled();
+      });
+
+      // Normal close (code 1000) - like logout or page navigation
+      await act(async () => {
+        if (onCloseCallback) {
+          onCloseCallback(new CloseEvent("close", { code: 1000 }));
+        }
+      });
+
+      // Should not attempt reconnection
+      await act(async () => {
+        jest.advanceTimersByTime(5000);
+      });
+
+      expect(createWebSocketConnection).toHaveBeenCalledTimes(1);
+    });
+
+    it("should cleanup ping monitoring on component unmount", async () => {
+      (createWebSocketConnection as jest.Mock).mockResolvedValue(mockSocket);
+
+      const { unmount } = render(<TestWrapper store={store} />);
+
+      await waitFor(() => {
+        expect(createWebSocketConnection).toHaveBeenCalled();
+      });
+
+      // Unmount should cleanup
+      unmount();
+
+      expect(mockSocket.close).toHaveBeenCalled();
+    });
+  });
 });

src/websocket/WebSocketGate.tsx

@@ -10,6 +10,10 @@ import { useWebSocketReconnect } from "./connection/lifecycle/useWebSocketReconn
 import { updateCalendars } from "./messaging/updateCalendars";
 import { syncCalendarRegistrations } from "./operations";
 import { WebSocketStatusSnackbar } from "./WebSocketStatusSnackbar";
+import {
+  setupWebSocketPing,
+  type PingCleanup,
+} from "./connection/lifecycle/pingWebSocket";
 
 export function WebSocketGate() {
   const socketRef = useRef<WebSocketWithCleanup | null>(null);
@@ -18,6 +22,7 @@ export function WebSocketGate() {
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const reconnectAttemptsRef = useRef(0);
   const isConnectingRef = useRef(false);
+  const pingCleanupRef = useRef<PingCleanup | null>(null);
 
   const connectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const CONNECT_TIMEOUT_MS = 10_000;
@@ -124,8 +129,6 @@ export function WebSocketGate() {
   // Reset reconnection state on successful connection and mark for calendar re-sync
   useEffect(() => {
     if (isSocketOpen) {
-      console.log("WebSocket connected successfully");
-
       if (connectTimeoutRef.current) {
         clearTimeout(connectTimeoutRef.current);
         connectTimeoutRef.current = null;
@@ -276,6 +279,44 @@ export function WebSocketGate() {
     };
   }, [isSocketOpen, isAuthenticated, clearReconnectTimeout]);
 
+  useEffect(() => {
+    // Only set up ping if socket is open
+    if (!isSocketOpen || !socketRef.current) {
+      // Clean up existing ping if socket closed
+      if (pingCleanupRef.current) {
+        pingCleanupRef.current.stop();
+        pingCleanupRef.current = null;
+      }
+      return;
+    }
+
+    // Set up ping monitoring
+    const pingCleanup = setupWebSocketPing(socketRef.current, {
+      onConnectionDead: () => {
+        console.warn("WebSocket connection appears dead (no pong received)");
+        setWebSocketStatus(t("websocket.browserOffline"));
+        setWebSocketStatusSerity("warning");
+
+        // Trigger reconnection
+        if (socketRef.current) {
+          socketRef.current.close();
+        }
+      },
+      onPingFail: () => {
+        console.warn("Failed to send ping");
+      },
+    });
+
+    pingCleanupRef.current = pingCleanup;
+
+    return () => {
+      if (pingCleanupRef.current) {
+        pingCleanupRef.current.stop();
+        pingCleanupRef.current = null;
+      }
+    };
+  }, [isSocketOpen]);
+
   return websocketStatus ? (
     <WebSocketStatusSnackbar
       message={websocketStatus}

src/websocket/WebSocketStatusSnackbar.tsx

@@ -14,8 +14,10 @@ export function WebSocketStatusSnackbar({
   return (
     <Snackbar
       open={!!message}
-      autoHideDuration={6000}
       onClose={onClose}
+      autoHideDuration={
+        severity === "warning" || severity === "error" ? null : 6000
+      }
       anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
     >
       <Alert