sveltekit-sse-utils

Documentation

sveltekit-sse-utils provides utility functions to implement streaming rpc in sveltekit.

Installation

npm i zod devalue sveltekit-sse-utils

Usage in +server.ts

import { createSSEHandler, serveSSE } from "sveltekit-sse-utils";
import z from "zod";

/**
 * CreateSSEHandler takes an async generator function and a zod schema
 *
 * - The generator function is called with the input from the client as per the
 *   zod schema
 * - It also has accesss to an abort signal which gets aborted when the client
 *   disconnects
 * - The type of value that the generator function yields is inferred from the
 *   type of the return value of the generator function and this can used on the
 *   client side with typescript utilities like ExtractGeneratorValueType
 */
const handler = createSSEHandler(
  async function* ({ event, input, signal }) {
    for (let i = 0; i < 10; i++) {
      yield `sending updates for ${input.name} ${i}`;
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
  },
  z.object({
    name: z.string(),
  }),
);

/** You can save typeof handler to later use in +page.svelte */
export type UpdatesHandler = typeof handler;

/** ServeSSE needs event and the handler to serve server side events */
export const GET = (event) => serveSSE({ event, handler });

Usage in +page.svelte

<script lang="ts">
	import { sseStream, type ExtractGeneratorValueType } from 'sveltekit-sse-utils';

	import type { UpdatesHandler } from './api/updates/+server';

	// ExtractGeneratorValueType utility is used to infer the type of the values the generator function yields
	let messages: ExtractGeneratorValueType<UpdatesHandler>[] = [];

	async function getUpdates() {
		const ac = new AbortController();

		/**
		 * sseStream is a function that returns an async iterable
		 * - If we provide typeof handler returned from createSSEHandler we can get typesafety for the input
		 *   object passed to the handler
		 * - We can pass an AbortSignal to abort the stream
		 */
		const stream = sseStream<UpdatesHandler>('/api/updates', {
			input: {
				name: 'SvelteKit'
			},
			signal: ac.signal
		});

		try {
			for await (const data of stream) {
				messages.push(data);
				messages = messages;
			}
		} catch (err) {
			/**
			 * We reach here if,
			 * 1. the connection is closed without properly completing the generator function
			 * 2. an error is thrown inside the generator function
			 * 3. signal passed to sseStream is aborted
			 */
			console.error(err);
		}
	}
</script>

<button on:click={getUpdates}>Get updates</button>

{#each messages as message}
	<p>{message}</p>
{/each}