simulate ping every 5 sec

src/appState.ts

@@ -74,6 +74,7 @@ export const getDefaultAppState = (): Omit<
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
     viewModeEnabled: false,
     networkSpeed: 0,
+    ping: "…",
   };
 };
 
@@ -155,6 +156,7 @@ const APP_STATE_STORAGE_CONF = (<
   zoom: { browser: true, export: false },
   viewModeEnabled: { browser: false, export: false },
   networkSpeed: { browser: false, export: false },
+  ping: { browser: false, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/components/App.tsx

@@ -184,7 +184,7 @@ import LayerUI from "./LayerUI";
 import { Stats } from "./Stats";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import { getNetworkSpeed } from "../networkStats";
+import { getNetworkSpeed, simulatePing } from "../networkStats";
 
 const { history } = createHistory();
 
@@ -291,7 +291,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     height: window.innerHeight,
   };
   private scene: Scene;
-  private netStatsIntervalId?: any;
+  private networkSpeedIntervalId?: any;
+  private pingIntervalId?: any;
   constructor(props: ExcalidrawProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
@@ -752,7 +753,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.removeEventListeners();
     this.scene.destroy();
     clearTimeout(touchTimeout);
-    clearTimeout(this.netStatsIntervalId);
+    clearTimeout(this.networkSpeedIntervalId);
     touchTimeout = 0;
   }
 
@@ -897,7 +898,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           "change",
           this.calculateNetStats,
         );
-        clearTimeout(this.netStatsIntervalId);
+        clearTimeout(this.networkSpeedIntervalId);
       }
     }
 
@@ -1026,23 +1027,39 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
   }
 
-  private calculateNetStats = async () => {
+  private calculateNetStats = () => {
+    this.checkPing();
+    this.checkNetworkSpeed();
+  };
+
+  private checkPing = async () => {
     if (!this.state.showStats || !this.props.isCollaborating) {
-      clearTimeout(this.netStatsIntervalId);
+      clearTimeout(this.pingIntervalId);
       return;
     }
-    const speed = await getNetworkSpeed();
+    const ping = await simulatePing();
-    const networkSpeed = speed;
+    this.setState({ ping });
-    this.setState({ networkSpeed });
+    if (this.pingIntervalId) {
-    if (this.netStatsIntervalId) {
+      clearTimeout(this.pingIntervalId);
-      clearTimeout(this.netStatsIntervalId);
     }
-    this.netStatsIntervalId = setTimeout(
+    this.pingIntervalId = setTimeout(this.checkPing, NETWORK_SPEED_TIMEOUT_MS);
-      this.calculateNetStats,
+  };
+
+  private checkNetworkSpeed = async () => {
+    if (!this.state.showStats || !this.props.isCollaborating) {
+      clearTimeout(this.networkSpeedIntervalId);
+      return;
+    }
+    const networkSpeed = await getNetworkSpeed();
+    this.setState({ networkSpeed });
+    if (this.networkSpeedIntervalId) {
+      clearTimeout(this.networkSpeedIntervalId);
+    }
+    this.networkSpeedIntervalId = setTimeout(
+      this.checkNetworkSpeed,
       NETWORK_SPEED_TIMEOUT_MS,
     );
   };
-
   // Copy/paste
 
   private onCut = withBatchedUpdates((event: ClipboardEvent) => {

src/components/Stats.tsx

@@ -180,6 +180,10 @@ export const Stats = (props: {
                   <td>{t("stats.collaborators")}</td>
                   <td>{props.appState.collaborators.size}</td>
                 </tr>
+                <tr>
+                  <td>{t("stats.ping")}</td>
+                  <td>{props.appState.ping}</td>
+                </tr>
                 <tr>
                   <td>{t("stats.speed")}</td>
                   <td>

src/locales/en.json

@@ -233,6 +233,7 @@
     "elements": "Elements",
     "error": "Error",
     "height": "Height",
+    "ping": "Ping",
     "scene": "Scene",
     "selected": "Selected",
     "speed": "Speed",

src/networkStats.ts

@@ -50,3 +50,18 @@ const processImage = (): Promise<number> => {
 export const getNetworkSpeed = async (): Promise<number> => {
   return await processImage();
 };
+
+export const simulatePing = async () => {
+  const startTime = new Date().getTime();
+  try {
+    await fetch(process.env.REACT_APP_SOCKET_SERVER_URL, {
+      mode: "no-cors",
+      method: "HEAD",
+    });
+    const endTime = new Date().getTime();
+    const delay = endTime - startTime;
+    return delay < 1000 ? `${delay} ms` : `${(delay / 1000).toFixed(1)} s`;
+  } catch (e) {
+    return "Error!";
+  }
+};

src/types.ts

@@ -89,6 +89,7 @@ export type AppState = {
   gridSize: number | null;
   viewModeEnabled: boolean;
   networkSpeed: number;
+  ping: string;
 
   /** top-most selected groups (i.e. does not include nested groups) */
   selectedGroupIds: { [groupId: string]: boolean };