use-shared-sse

🔄 React hook to share a single Server-Sent Events (SSE) connection across multiple browser tabs using BroadcastChannel and Web Locks.
✅ Helps avoid browser HTTP/1.1 connection limits by ensuring only one active SSE connection across all tabs.

📦 Installation

npm install use-shared-sse

🚀 Quick Start

import { useSse } from 'use-shared-sse';

function SseExample() {
  useSse({
    url: 'http://localhost:3005/sse',
    options: { withCredentials: true },
    events: [
      { name: 'ping', cb: onPingEvent },
      { name: 'hero', cb: onHeroReceiveEvent },
    ],
  });

  function onPingEvent(data: MessageEvent['data']) {
    console.log('Ping:', data);
  }

  function onHeroReceiveEvent(data: MessageEvent['data']) {
    console.log('Hero:', data);
  }

  return <></>;
}

📚 API Reference

useSse(options: UseSseOptions)

React hook that manages a shared SSE connection across browser tabs using BroadcastChannel and Web Locks.

UseSseOptions

| Field | Type | Required | Description | |---------------|------------------------------------------------|----------|-------------| | url | string \| URL | ✅ Yes | The URL to open the SSE connection to. | | options | EventSourceInit | No | SSE configuration object. Default is { withCredentials: true }. See MDN docs. | | events | { name: string; cb: (event: MessageEvent) => void }[] | ✅ Yes | A list of event listeners, each with an event name and handler. | | channelName | string | No | Custom name for the BroadcastChannel. Default: "sse-channel". | | lockName | string | No | Custom name for the Web Lock. Default: "sse-lock". |