handle pong event and show round trip latency

src/app/app.html

@@ -2,7 +2,7 @@
   <div class="w-full">
     <mat-toolbar color="primary">
       @if (eventsService.status() === 'open') {
-        <div matTooltip="Connected" class="h-3 w-3 rounded-full bg-green-400 mr-2"></div>
+        <div [matTooltip]="'Connected' + (eventsService.socketRoundTripLatency() !== null ? ' (' + eventsService.socketRoundTripLatency() + ' ms)' : '')" class="h-3 w-3 rounded-full bg-green-400 mr-2"></div>
       } @else if (eventsService.status() === 'closed') {
         <div matTooltip="Disconnected" class="h-3 w-3 rounded-full bg-orange-400 mr-2"></div>
       } @else if (eventsService.status() === 'error') {

src/app/services/events.ts

@@ -13,9 +13,13 @@ export class EventsService {
   private outputEvents$ = new Subject<RouterEvent<'output', OutputEventData>>();
   private settingsService = inject(SettingsService);
 
+  private pingInterval?: number;
+  private lastPingTimestamp?: number;
+
+  public socketRoundTripLatency = signal<number | null>(null);
+
   constructor() {
     effect(() => {
-      console.log('Websocket URL changed:', this.settingsService.wsUrl());
       if (this.socket) {
         this.socket.close();
       }
@@ -28,6 +32,15 @@ export class EventsService {
       this.socket = new WebSocket(this.settingsService.wsUrl());
       this.socket.onopen = () => {
         this.status.set('open');
+        if (this.pingInterval) {
+          clearInterval(this.pingInterval);
+        }
+        this.pingInterval = setInterval(() => {
+          if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+            this.lastPingTimestamp = Date.now();
+            this.socket.send(JSON.stringify({ type: 'ping', data: {timestamp: this.lastPingTimestamp} }));
+          }
+        }, 5000);
       };
 
       this.socket.onclose = () => {
@@ -54,6 +67,11 @@ export class EventsService {
           case 'output':
             this.outputEvents$.next(messageObj);
             break;
+          case 'pong':
+            if (this.lastPingTimestamp) {
+              this.socketRoundTripLatency.set(Date.now() - this.lastPingTimestamp);
+            }
+            break;
           default:
             console.warn('Unknown event type:', messageObj.type);
         }