sveltekit-eventsource Svelte Themes

Sveltekit Eventsource

Typed Server-Sent Events (SSE) integration for SvelteKit featuring strongly typed client-server communication, custom event channels, and first-class TypeScript support.

@sourceregistry/sveltekit-eventsource

Typed Server-Sent Events (SSE) integration for SvelteKit, providing strongly-typed client–server communication, custom event channels, and a robust protocol-level control layer.

This library is designed for TypeScript-first, production-grade SSE usage in SvelteKit applications.


✨ Features

  • πŸ”’ Strong typing end-to-end
    • Events are typed using App.Events
    • Compile-time guarantees for event names and payloads
  • πŸ”„ Bidirectional lifecycle control
    • Server-initiated close via a versioned protocol message
    • Client-initiated close with proper cleanup
  • 🧠 Protocol-level control channel
    • Control messages are independent of user serializers
    • Versioned, validated, and future-proof
  • 🧩 Custom event channels
    • Native SSE event: support
    • Multiple application events per stream
  • πŸ›  Debug hooks
    • Optional structured logging on client and server
  • πŸ“š First-class documentation
    • Full TSDoc coverage
    • TypeDoc generation supported out of the box

πŸ“¦ Installation

npm install @sourceregistry/sveltekit-eventsource

Peer dependency:

  • svelte@^5

🧠 Core Concept

Events are defined centrally using SvelteKit’s App.Events interface:

// src/app.d.ts
declare global {
  namespace App {
    interface Events {
      status: {
        heartbeat: number;
      };
    }
  }
}

export {};

This single definition drives:

  • server-side emit() typing
  • client-side on() typing
  • compile-time safety across the entire SSE pipeline

πŸ–₯ Server Usage (SvelteKit endpoint)

//File: src/routes/sse/+server.ts
import type { RequestHandler } from "./$types";
import { EventSource } from "@sourceregistry/sveltekit-eventsource/server";

export const GET: RequestHandler = () => {
  const sse = new EventSource("status", { debug: true });

  const timer = setInterval(() => {
    sse.emit("heartbeat", Date.now());
  }, 2000);

  sse.once("close", () => {
    clearInterval(timer);
  });

  // Ask client to close after 5s
  setTimeout(() => {
    sse.stop();
  }, 5000);

  return sse.response();
};

Server API Highlights

  • emit(event, payload)
  • stop() – protocol-level server-initiated close
  • response() – returns Response with text/event-stream
  • unsafe.events – lifecycle hooks (open, close, ping)

🌐 Client Usage (Svelte +page.svelte)

<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { EventSource } from "@sourceregistry/sveltekit-eventsource/client";

  const events = $state<number[]>([]);
  let state = $state<"open" | "closed">("closed");

  let es: EventSource<"status">;

  onMount(() => {
    es = new EventSource("status", { debug: true });

    es.onOpen(() => (state = "open"));
    es.onClose(() => (state = "closed"));

    es.on("heartbeat", (n) => {
      events.push(n);
    });
  });

  onDestroy(() => {
    es?.close();
  });
</script>

<h2>Connection: {state === "open" ? "🟒" : "πŸ”΄"}</h2>

<ul>
  {#each events as e}
    <li>{e}</li>
  {/each}
</ul>

Client API Highlights

  • on(event, handler)
  • once(event, handler)
  • off(event, handler)
  • onOpen, onClose, onError, onMessage
  • close() – client-initiated close

All handlers are fully typed.


πŸ” Magic Control Protocol (SMCP)

This library implements a protocol-level control channel for SSE, independent of user serialization.

Why?

User serializers (JSON, base64, msgpack, etc.) must never break control messages like server-requested close.

Wire Format

event: __MAGIC_EVENT__
data: {"v":1,"op":"close"}

Guarantees

  • Always JSON
  • Versioned (v)
  • Validated at runtime
  • Future-proof

Full specification: πŸ“„ docs/sse-magic-protocol.md


πŸ§ͺ Testing

Protocol compatibility tests are included using Vitest.

npm test

Tests cover:

  • protocol encoding
  • version mismatch handling
  • schema validation
  • forward-compatibility safeguards

πŸ“š Documentation

This project is fully documented using TSDoc.

Generate API documentation:

npm run docs:build

Output:

/docs

πŸ“€ Package Exports

import { EventSource } from "@sourceregistry/sveltekit-eventsource/client";
import { EventSource } from "@sourceregistry/sveltekit-eventsource/server";
Path Purpose
./client Browser client SSE
./server SvelteKit server SSE

⚠️ Requirements & Notes

  • Node.js β‰₯ 16
  • Designed for SvelteKit
  • Uses standard SSE (HTTP/1.1 compatible)
  • No polyfills required

🧭 Roadmap

  • Reconnect strategies & resume tokens
  • Backpressure diagnostics
  • Stream multiplexing
  • Protocol v2 extensions

πŸ“„ License

Apache-2.0 Β© A.P.A. Slaa


πŸ§‘β€πŸ’» Author

A.P.A. Slaa πŸ“§ [email protected] 🌐 https://github.com/SourceRegistry


⭐ Contributing

Issues and pull requests are welcome. Please follow conventional commits for releases.

Top categories

Loading Svelte Themes