This package provides an easy API for making Event Source requests with all the features of Fetch API, and supports browsers and nodejs.
npm install fetch-sse
import { fetchEventData } from 'fetch-sse';
await fetchEventData('/api/sse', {
method: 'POST',
data: { foo: 'bar' },
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer token'
},
onMessage: (event) => {
console.log(event);
}
})
You can pass in other parameters in a similar way to the Fetch API.
import { fetchEventData } from 'fetch-sse';
await fetchEventData('/api/sse', {
method: 'POST',
data: { foo: 'bar' },
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer token'
},
signal: ctrl.signal,
onMessage: (event) => {
console.log(event.data);
}
})
Interface
export interface IFetchOptions {
method?: string;
headers?: HeadersInit | Record<string, any>;
data?: Record<string, any>;
signal?: AbortSignal;
onMessage?: (event: ServerSentEvent | null, done?: boolean) => void;
onOpen?: () => void;
onClose?: () => void;
onError?: (error: any) => void;
}
// decoded event
export interface ServerSentEvent {
event: string | null;
data: string;
raw: string[];
}
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:
data: {"username": "bobby", "time": "02:33:48"}\n\n
parsed:
{
event: null,
data: '{"username": "bobby", "time": "02:33:48"}',
raw: [
'data: {"username": "bobby", "time": "02:33:48"}'
]
}
- Named events
raw:
:HTTP\n
id: 1\n
event: result\n
data: {"username": "bobby", "time": "02:33:48"}\n\n
parsed:
{
event: 'result',
data: {"username": "bobby", "time": "02:33:48"},
raw: [
':HTTP',
'id: 1',
'event: result',
'data: {"username": "bobby", "time": "02:33:48"}'
]
}
this package is written in typescript and compatible with browsers and nodejs, You might need to polyfill TextDecoder for old versions of browsers.