@wrtn/sse-web

@wrtn/sse-web

Server sent events handling for react web app

Peer Deps

@microsoft/fetch-event-source

Installation

yarn add @wrtn/sse-web @wrtn/sse-types @microsoft/fetch-event-source

Usage

import { WebEventSource } from '@wrtn/sse-web';
import { OpenEvent, MessageEvent, ErrorEvent } from '@wrtn/sse-types';

useEffect(() => {
  const eventSource = new WebEventSource('http://localhost:3000/stream');

  eventSource.addEventListener('open', (e: OpenEvent) => {
    console.log(e);
  });

  eventSource.addEventListener('message', (e: MessageEvent) => {
    const data = JSON.parse(e.data);

    if ('chunk' in data && data.chunk) {
      setResult((p) => p + data.chunk);
    }
  });

  eventSource.addEventListener('error', (e: ErrorEvent) => {
    console.log(e);
    eventSource.close();
  });

  return () => {
    eventSource.close();
  };
}, []);

Checklist ✅

• dispatch HTTP error
• error data stream
• background streaming
• abort control
• retry from server
• timeout error