Fetch-sse NPM | npm.io

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

npm install fetch-sse

Usage

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',
  // or JSON.stringify({ foo: 'bar' })
  data: { foo: 'bar' },
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  signal: ctrl.signal,
  onMessage: (event) => {
    console.log(event.data);
  }
})

Interface

// fetch options
export interface IFetchOptions {
  method?: string;
  headers?: HeadersInit | Record<string, any>;
  data?: BodyInit | Record<string, any> | null;
  signal?: AbortSignal;
  onMessage?: (event: ServerSentEvent | null, done?: boolean) => void;
  onOpen?: (res?: Response) => void;
  onClose?: () => void;
  onError?: (error: any) => void;
}

// decoded event
export interface ServerSentEvent {
  event: string | null;
  data: string;
  raw: string[];
}

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:

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"}'
  ]
}