🍡 mochi
← All demos

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
<script>
  import RealtimeClocks from './RealtimeClocks.svelte';
  import { files } from './files.ts';

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

<RealtimeClocks mochi:hydrate />