feat: implement naive client ping

apps/client/src/common/hooks/useSocket.ts

@@ -230,3 +230,11 @@ export const useTimelineStatus = () => {
 
   return useRuntimeStore(featureSelector);
 };
+
+export const usePing = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    ping: state.ping,
+  });
+
+  return useRuntimeStore(featureSelector);
+};

apps/client/src/common/utils/socket.ts

@@ -1,9 +1,17 @@
 import { Log, RundownCached, RuntimeStore } from 'ontime-types';
 
 import { isProduction, websocketUrl } from '../../externals';
+import { CLIENT_LIST, CUSTOM_FIELDS, RUNDOWN, RUNTIME } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
-import { getClientId, getClientName, setClientId, setClientName, setClients } from '../stores/clientStore';
+import {
+  getClientId,
+  getClientName,
+  setClientId,
+  setClientName,
+  setClientRedirect,
+  setClients,
+} from '../stores/clientStore';
 import { addLog } from '../stores/logger';
 import { patchRuntime, runtimeStore } from '../stores/runtime';
 
@@ -62,6 +70,12 @@ export const connectSocket = () => {
       }
 
       switch (type) {
+        case 'pong': {
+          const offset = (new Date().getTime() - new Date(payload).getTime()) * 0.5;
+          patchRuntime('ping', offset);
+          updateDevTools({ ping: offset }, ['PING']);
+          break;
+        }
         case 'client-id': {
           if (typeof payload === 'string') {
             setClientId(payload);
@@ -210,9 +224,9 @@ export const socketSendJson = (type: string, payload?: unknown) => {
   );
 };
 
-function updateDevTools(newData: Partial<RuntimeStore>) {
+function updateDevTools(newData: Partial<RuntimeStore>, store = RUNTIME) {
   if (!isProduction) {
-    ontimeQueryClient.setQueryData(RUNTIME, (oldData: RuntimeStore) => ({
+    ontimeQueryClient.setQueryData(store, (oldData: RuntimeStore) => ({
       ...oldData,
       ...newData,
     }));

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx

@@ -3,7 +3,7 @@ import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import { openLink } from '../../../../common/utils/linkUtils';
-import { serverPort } from '../../../../externals';
+import { isLocalhost, serverPort } from '../../../../externals';
 
 import style from './NetworkInterfaces.module.scss';
 
@@ -14,9 +14,11 @@ export default function InfoNif() {
 
   return (
     <div className={style.interfaces}>
-      {data?.networkInterfaces?.map((nif) => {
-        const address = `http://${nif.address}:${serverPort}`;
+      {data.networkInterfaces?.map((nif) => {
+        // interfaces outside localhost wont have access
+        if (nif.name === 'localhost' && !isLocalhost) return null;
 
+        const address = `http://${nif.address}:${serverPort}`;
         return (
           <CopyTag
             key={nif.name}

apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx

@@ -1,4 +1,8 @@
+import { useEffect } from 'react';
+
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { usePing } from '../../../../common/hooks/useSocket';
+import { socketSendJson } from '../../../../common/utils/socket';
 import { isOntimeCloud } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -15,7 +19,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
     <>
       <Panel.Header>Network</Panel.Header>
       <Panel.Section>
-        {isOntimeCloud && <Panel.SubHeader>Ontime cloud</Panel.SubHeader>}
+        {isOntimeCloud && <OntimeCloudStats />}
         <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
       </Panel.Section>
       <InfoNif />
@@ -28,3 +32,29 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
     </>
   );
 }
+
+function OntimeCloudStats() {
+  const { ping } = usePing();
+
+  /**
+   * Send immediate ping request, and keep sending on an interval
+   */
+  useEffect(() => {
+    socketSendJson('ping', new Date());
+
+    const doPing = setInterval(() => {
+      socketSendJson('ping', new Date());
+    }, 5000);
+
+    return () => {
+      clearInterval(doPing);
+    };
+  }, []);
+
+  return (
+    <Panel.SubHeader>
+      Ontime cloud
+      <Panel.Description>Current ping: {ping}ms</Panel.Description>
+    </Panel.SubHeader>
+  );
+}

apps/server/src/adapters/WebsocketAdapter.ts

@@ -100,6 +100,16 @@ export class SocketServer implements IAdapter {
           const message = JSON.parse(data);
           const { type, payload } = message;
 
+          if (type === 'ping') {
+            ws.send(
+              JSON.stringify({
+                type: 'pong',
+                payload,
+              }),
+            );
+            return;
+          }
+
           if (type === 'get-client-name') {
             ws.send(
               JSON.stringify({

apps/server/src/app.ts

@@ -188,6 +188,7 @@ export const startServer = async (
       direction: SimpleDirection.CountDown,
     },
     frozen: false,
+    ping: -1,
   });
 
   // initialise logging service, escalateErrorFn is only exists in electron

packages/types/src/definitions/runtime/RuntimeStore.ts

@@ -52,4 +52,5 @@ export const runtimeStorePlaceholder: RuntimeStore = {
     playback: SimplePlayback.Stop,
   },
   frozen: false,
+  ping: -1,
 };

packages/types/src/definitions/runtime/RuntimeStore.type.ts

@@ -27,4 +27,5 @@ export type RuntimeStore = {
 
   // flags
   frozen: boolean;
+  ping: number;
 };