llms.txt

Real-time Streams

You can build a WebSocket clock and a Server-Sent Events clock side by side, ticking every second. The component hydrates only when scrolled into view via mochi:hydrate:visible with a 100px rootMargin.

WebSocket connecting

--:--:-- /ws/time

SSE connecting

--:--:-- /sse/time

$props.id(): s1

View source on GitHub

<script>
  import RealtimeClocks from './RealtimeClocks.svelte';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</script>

<RealtimeClocks mochi:hydrate />