<script lang="ts">
  let { islandId } = $props();

  let wsTime = $state('--:--:--');
  let sseTime = $state('--:--:--');
  let wsStatus = $state('connecting');
  let sseStatus = $state('connecting');

  $effect(() => {
    const host = window.location.host;
    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';

    const timeWs = new WebSocket(`${wsProtocol}//${host}/ws/time`);
    timeWs.addEventListener('open', () => {
      wsStatus = 'connected';
    });
    timeWs.addEventListener('message', (e) => {
      wsTime = new Date(e.data).toLocaleTimeString('en-GB');
    });
    timeWs.addEventListener('close', () => {
      wsStatus = 'disconnected';
    });

    const timeSse = new EventSource(`/sse/time`);
    timeSse.addEventListener('open', () => {
      sseStatus = 'connected';
    });
    timeSse.addEventListener('message', (e) => {
      sseTime = new Date(e.data).toLocaleTimeString('en-GB');
    });
    timeSse.addEventListener('error', () => {
      sseStatus = 'disconnected';
    });

    const closeAll = () => {
      timeWs.close();
      timeSse.close();
    };
    window.addEventListener('pagehide', closeAll);

    return () => {
      window.removeEventListener('pagehide', closeAll);
      closeAll();
    };
  });
</script>

<div class="clocks">
  <div class="clock">
    <div class="clock-header">
      <span class="protocol">WebSocket</span>
      <span class="status" class:connected={wsStatus === 'connected'}>{wsStatus}</span>
    </div>
    <span class="time">{wsTime}</span>
    <span class="endpoint">/ws/time</span>
  </div>
  <div class="clock">
    <div class="clock-header">
      <span class="protocol">SSE</span>
      <span class="status" class:connected={sseStatus === 'connected'}>{sseStatus}</span>
    </div>
    <span class="time">{sseTime}</span>
    <span class="endpoint">/sse/time</span>
  </div>
  {#if islandId}
    <div class="island-id">island-id: {islandId}</div>
  {/if}
</div>
Real-time Streams
