Using server-sent events with Fresh

[canadaduane]

I had a bit of an adventure trying to use server-sent events in Fresh 2.0 and want to document my journey for others.

Initially, I thought to create a ReadableStream response in a GET or POST handler.

export const handler = define.handlers({
    POST(ctx) {
        return streamResponse(async (controller) => {
            controller.enqueue(
                new TextEncoder().encode("data: hello\r\n\r\n"),
            );

            await delay(1000);

            controller.enqueue(
                new TextEncoder().encode("data: goodbye\r\n\r\n"),
            );
        });
    },
});

function streamResponse<K>(
    start: (controller: ReadableStreamDefaultController<K>) => void,
) {
    return new Response(new ReadableStream({ start }), {
        headers: {
            "Content-Type": "text/event-stream",
        },
    });
}

function delay(ms: number) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

However, when I tried this in Fresh, I received the following server-terminating error:

Terminating Deno.serve loop due to unexpected error TypeError: expected typed ArrayBufferView
    at readableStreamWriteChunkFn (ext:deno_web/06_streams.js:786:15)
    at readableStreamReadFn (ext:deno_web/06_streams.js:849:5)
    at readableStreamWriteChunkFn (ext:deno_web/06_streams.js:793:5)
    at readableStreamReadFn (ext:deno_web/06_streams.js:849:5)
    at resourceForReadableStream (ext:deno_web/06_streams.js:884:3)
    at fastSyncResponseOrStream (ext:deno_http/00_serve.ts:345:11)
    at ext:deno_http/00_serve.ts:419:5                                                                           ^C   at eventLoopTick (ext:core/01_core.js:175:7)

I believe I was making a mistake on both the client AND the server side. On the client side, because I hadn't quite grokked that an EventSource with onmessage listener was required (I was using fetch), and on the server because the handler was set up to expect the usual request/response within an HTTP method handler (e.g. GET, POST, DELETE, etc.)

The solution is to use EventSource on the client, and just a plain handler on the server, with ReadableStream:

Client, i.e. inside a component:

    useEffect(() => {
        const evtSource = new EventSource("/api/sse", {
            withCredentials: true,
        });

        evtSource.onmessage = (event) => {
            console.log("sse", event);
        };
    }, []);

Server, i.e. /api/sse.tsx:

export async function handler(ctx: FreshContext) {
    return streamResponse(async (controller) => {
        controller.enqueue(
            new TextEncoder().encode("data: hello\r\n\r\n"),
        );

        await delay(1000);

        controller.enqueue(
            new TextEncoder().encode("data: goodbye\r\n\r\n"),
        );
    });
}

With this basic structure, you can encode and send data to the client whenever you need to push data. Deno implements HTTP/2, so there is no max stream of 6 connections from server to client, as in HTTP/1.1.

[predaytor]

Quite interesting! Thx for sharing ❤️