Timer-based reconnection for Realtime Whiteboards (#5595)

* Actual timer-based reconnection for RT Whiteboards

* useTick() uses RAF

---------

Co-authored-by: Valentin Yanakiev <[email protected]>
Co-authored-by: Carlos Cano <[email protected]>

Author: 3 people

src/core/utils/onlineStatus.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+const useOnlineStatus = () => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const handleOnlineChange = () => setIsOnline(navigator.onLine);
+    window.addEventListener('online', handleOnlineChange);
+    window.addEventListener('offline', handleOnlineChange);
+    setIsOnline(navigator.onLine);
+    return () => {
+      window.removeEventListener('online', handleOnlineChange);
+      window.removeEventListener('offline', handleOnlineChange);
+    };
+  }, []);
+
+  return isOnline;
+};
+
+export default useOnlineStatus;

src/core/utils/reconnectable.ts

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface ReconnectableProps {
+  isOnline: boolean;
+  skip: boolean;
+  reconnect: () => void;
+}
+
+const AUTO_RECONNECT_DEFAULT_INTERVAL = 5000;
+
+const FIBONACCI_SEQUENCE = [1, 2, 3, 5, 8, 13, 21] as const;
+
+const computeReconnectionTimeout = (baseInterval: number, tryNumber: number) => {
+  const fibonacciIndex = Math.max(0, Math.min(tryNumber - 1, FIBONACCI_SEQUENCE.length - 1));
+
+  return baseInterval * FIBONACCI_SEQUENCE[fibonacciIndex];
+};
+
+interface ReconnectableStrategy {
+  baseInterval: number;
+  computeReconnectionTimeout: (baseInterval: number, tryNumber: number) => number;
+}
+
+interface ReconnectableProvided {
+  autoReconnectTime: number | null;
+  setupReconnectTimeout: () => void;
+}
+
+const DEFAULT_RECONNECTABLE_STRATEGY: ReconnectableStrategy = {
+  baseInterval: AUTO_RECONNECT_DEFAULT_INTERVAL,
+  computeReconnectionTimeout,
+} as const;
+
+const Reconnectable = ({ baseInterval, computeReconnectionTimeout } = DEFAULT_RECONNECTABLE_STRATEGY) => {
+  const useReconnectable = ({ isOnline, skip, reconnect }: ReconnectableProps): ReconnectableProvided => {
+    const autoReconnectIntervalMultiplierRef = useRef<number>(1);
+
+    const [autoReconnectTime, setAutoReconnectTime] = useState<number | null>(null);
+
+    const reconnectTimeoutId = useRef<number | null>(null);
+
+    useEffect(() => {
+      if (autoReconnectTime !== null) {
+        const timeRemaining = autoReconnectTime - Date.now();
+
+        reconnectTimeoutId.current = window.setTimeout(() => {
+          setAutoReconnectTime(null);
+          handleReconnect();
+        }, Math.max(timeRemaining, 0));
+      }
+      return () => {
+        if (reconnectTimeoutId.current !== null) {
+          window.clearTimeout(reconnectTimeoutId.current);
+        }
+        reconnectTimeoutId.current = null;
+      };
+    }, [autoReconnectTime]);
+
+    const setupReconnectTimeout = () => {
+      setAutoReconnectTime(
+        Date.now() + computeReconnectionTimeout(baseInterval, autoReconnectIntervalMultiplierRef.current)
+      );
+    };
+
+    useEffect(() => {
+      if (isOnline && !autoReconnectTime && !skip) {
+        setupReconnectTimeout();
+      }
+    }, [isOnline]);
+
+    useEffect(() => {
+      if (!isOnline) {
+        setAutoReconnectTime(null);
+      }
+    }, [isOnline]);
+
+    useEffect(() => {
+      if (skip) {
+        autoReconnectIntervalMultiplierRef.current = 1;
+      }
+    }, [skip]);
+
+    const handleReconnect = () => {
+      autoReconnectIntervalMultiplierRef.current++;
+      reconnect();
+    };
+
+    useEffect(() => {
+      if (skip) {
+        setAutoReconnectTime(null);
+      }
+    }, [skip]);
+
+    return {
+      autoReconnectTime,
+      setupReconnectTimeout,
+    };
+  };
+
+  return useReconnectable;
+};
+
+export default Reconnectable;

src/core/utils/time/tick.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from 'react';
+
+const Tick = (precision = 1000) => {
+  const getTimeWithPrecision = () => Math.round(Date.now() / precision) * precision;
+
+  const useTick = ({ skip = false }: { skip?: boolean } = {}) => {
+    const tickTimeoutRef = useRef<number | null>(null);
+
+    const [, setTime] = useState(getTimeWithPrecision());
+
+    useEffect(() => {
+      if (!skip) {
+        const tick = () => {
+          setTime(getTimeWithPrecision());
+          tickTimeoutRef.current = requestAnimationFrame(tick);
+        };
+
+        tick();
+
+        return () => {
+          if (tickTimeoutRef.current !== null) {
+            cancelAnimationFrame(tickTimeoutRef.current);
+          }
+          tickTimeoutRef.current = null;
+        };
+      }
+    }, [skip]);
+
+    return Date.now();
+  };
+
+  return useTick;
+};
+
+export const useTick = Tick();
+
+export default Tick;

src/domain/common/whiteboard/excalidraw/CollaborativeExcalidrawWrapper.tsx

@@ -14,11 +14,14 @@ import Dialog from '@mui/material/Dialog';
 import DialogHeader from '../../../../core/ui/dialog/DialogHeader';
 import { DialogContent } from '../../../../core/ui/dialog/deprecated';
 import WrapperMarkdown from '../../../../core/ui/markdown/WrapperMarkdown';
-import { Text } from '../../../../core/ui/typography';
+import { Caption, Text } from '../../../../core/ui/typography';
 import { formatTimeElapsed } from '../../../shared/utils/formatTimeElapsed';
 import { Button, DialogActions } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { LoadingButton } from '@mui/lab';
+import useOnlineStatus from '../../../../core/utils/onlineStatus';
+import Reconnectable from '../../../../core/utils/reconnectable';
+import { useTick } from '../../../../core/utils/time/tick';
 
 const useActorWhiteboardStyles = makeStyles(theme => ({
   container: {
@@ -61,6 +64,8 @@ export interface WhiteboardWhiteboardProps {
 
 const WINDOW_SCROLL_HANDLER_DEBOUNCE_INTERVAL = 100;
 
+const useReconnectable = Reconnectable();
+
 const CollaborativeExcalidrawWrapper = ({ entities, actions, options, collabApiRef }: WhiteboardWhiteboardProps) => {
   const { whiteboard, filesManager, lastSavedDate } = entities;
 
@@ -138,6 +143,9 @@ const CollaborativeExcalidrawWrapper = ({ entities, actions, options, collabApiR
     },
     onCloseConnection: () => {
       setCollaborationStoppedNoticeOpen(true);
+      if (isOnline) {
+        setupReconnectTimeout();
+      }
     },
     onInitialize: collabApi => {
       combinedCollabApiRef.current = collabApi;
@@ -153,10 +161,24 @@ const CollaborativeExcalidrawWrapper = ({ entities, actions, options, collabApiR
 
   const [collaborationStartTime, setCollaborationStartTime] = useState<number | null>(Date.now());
 
+  const [collaborationStoppedNoticeOpen, setCollaborationStoppedNoticeOpen] = useState(false);
+
+  const isOnline = useOnlineStatus();
+
   const restartCollaboration = () => {
     setCollaborationStartTime(Date.now());
   };
 
+  const { autoReconnectTime, setupReconnectTimeout } = useReconnectable({
+    isOnline,
+    reconnect: restartCollaboration,
+    skip: !collaborationStoppedNoticeOpen || collaborating,
+  });
+
+  const time = useTick({
+    skip: autoReconnectTime === null,
+  });
+
   useEffect(() => {
     if (!connecting && collaborating) {
       setCollaborationStoppedNoticeOpen(false);
@@ -180,23 +202,8 @@ const CollaborativeExcalidrawWrapper = ({ entities, actions, options, collabApiR
     [actions.onInitApi]
   );
 
-  const [collaborationStoppedNoticeOpen, setCollaborationStoppedNoticeOpen] = useState(false);
-
   const { t } = useTranslation();
 
-  const [isOnline, setIsOnline] = useState(navigator.onLine);
-
-  useEffect(() => {
-    const handleOnlineChange = () => setIsOnline(navigator.onLine);
-    window.addEventListener('online', handleOnlineChange);
-    window.addEventListener('offline', handleOnlineChange);
-    setIsOnline(navigator.onLine);
-    return () => {
-      window.removeEventListener('online', handleOnlineChange);
-      window.removeEventListener('offline', handleOnlineChange);
-    };
-  }, []);
-
   return (
     <>
       <div className={styles.container}>
@@ -237,6 +244,11 @@ const CollaborativeExcalidrawWrapper = ({ entities, actions, options, collabApiR
         <DialogActions>
           <LoadingButton onClick={restartCollaboration} disabled={!isOnline} loading={connecting}>
             Reconnect
+            <Caption textTransform="none">
+              {autoReconnectTime !== null &&
+                autoReconnectTime - time > 0 &&
+                ` (${Math.ceil((autoReconnectTime - time) / 1000)}s)`}
+            </Caption>
           </LoadingButton>
           <Button onClick={() => setCollaborationStoppedNoticeOpen(false)}>{t('buttons.ok')}</Button>
         </DialogActions>