Fetch SSE (Server-Sent Events)

This package provides an easy API for making Event Source requests with all the features of Fetch API, and supports browsers and Node.js.

For Node.js, v18.0.0 or higher required.

Install

1npm install fetch-sse

Usage

1import { fetchEventData } from 'fetch-sse';
2
3await fetchEventData('/api/sse', {
4  method: 'POST',
5  data: { foo: 'bar' },
6  headers: {
7    'Content-Type': 'application/json',
8    'Authorization': 'Bearer token'
9  },
10  onMessage: (event) => {
11    console.log(event);
12  }
13})

You can pass in other parameters in a similar way to the Fetch API.

1import { fetchEventData } from 'fetch-sse';
2
3await fetchEventData('/api/sse', {
4  method: 'POST',
5  // or JSON.stringify({ foo: 'bar' })
6  data: { foo: 'bar' },
7  headers: {
8    'Content-Type': 'application/json',
9    'Authorization': 'Bearer token'
10  },
11  signal: ctrl.signal,
12  onMessage: (event) => {
13    console.log(event.data);
14  }
15})

Interface

1
2// fetch options
3export interface IFetchOptions {
4  method?: string;
5  headers?: HeadersInit | Record<string, any>;
6  data?: BodyInit | Record<string, any> | null;
7  signal?: AbortSignal;
8  onMessage?: (event: ServerSentEvent | null, done?: boolean) => void;
9  onOpen?: (res?: Response) => void;
10  onClose?: () => void;
11  onError?: (error: any) => void;
12}
13
14// decoded event
15export interface ServerSentEvent {
16  event: string | null;
17  data: string;
18  raw: string[];
19}

Event stream pattern

The event stream is a simple stream of text data that encoded using UTF-8. You can find more information here.

• Data-only messages

raw:

1
2data: {"username": "bobby", "time": "02:33:48"}\n\n

parsed:

1{
2  event: null,
3  data: '{"username": "bobby", "time": "02:33:48"}',
4  raw: [
5    'data: {"username": "bobby", "time": "02:33:48"}'
6  ]
7}

• Named events

raw:

1:HTTP\n
2id: 1\n
3event: result\n
4data: {"username": "bobby", "time": "02:33:48"}\n\n

parsed:

1{
2  event: 'result',
3  data: {"username": "bobby", "time": "02:33:48"},
4  raw: [
5    ':HTTP',
6    'id: 1',
7    'event: result',
8    'data: {"username": "bobby", "time": "02:33:48"}'
9  ]
10}

Compatibility

this package is written in typescript and compatible with browsers and nodejs, You might need to polyfill TextDecoder for old versions of browsers.