@ghostebony/sse

Installation

With npm:

npm i @ghostebony/sse@next

With yarn:

yarn add @ghostebony/sse@next

With pnpm:

pnpm add @ghostebony/sse@next

Examples

SvelteKit

server

src/lib/server/sse.ts

import { Server } from '@ghostebony/sse/server';

export type ChannelData = {
    'custom-channel-1': {
        id: number;
        date: Date;
        //...
    };
    'custom-channel-2': {
        name: string;
        pattern: RegExp;
        //...
    };
    // ...
};

export const sse = new Server<ChannelData>();

src/routes/sse/+server.ts

import { sse } from '$lib/server/sse';
import type { RequestHandler } from './$types';

const room = sse.room('custom-room-name');

export const GET: RequestHandler = (event) =>
    room.server(event.getClientAddress() /* or user unique identifier */, {
        onConnect({ user, close, send }) {
            // ...
        },
        onMessage({ user, close, send, message, options }) {
            // ...
        },
        onDisconnect({ user, send }) {
            // ...
        },
    });

somewhere on the server

send arguments change its behavior

import { sse } from '$lib/server/sse';

sse.send({
    room: 'custom-room-name',
    user: userId, // user unique identifier
    id: 1, // message id (optional)
    channel: 'custom-channel-1', // channel that you're listening
    data, // message data (types from ChannelData passed to Server)
});

client

src/routes/+(page|layout).svelte

<script lang="ts">
    import { onMount } from "svelte";
    import type { ChannelData } from "$lib/server/sse";
    import { Client } from "@ghostebony/sse/client";

    let eventSource: Client<ChannelData>;

    onMount(() => {
        eventSource = new Client(
            { url: "/sse" },
            {
                "custom-channel-1": {
                    listener({ data }) {
                        // ...
                    },
                },
                // ...
            },
        );

        return () => eventSource?.close();
    });
</script>