broadcastChannelTransport

broadcastChannelTransport creates a RealtimeTransport backed by the browser's BroadcastChannel API. Events are delivered to all tabs and frames in the same origin — no server required. This makes it useful for demos, intranet apps, and end-to-end tests that run in a single browser.

Usage

import {
  realtimeDataProvider,
  addEventsForMutations,
  broadcastChannelTransport,
} from "@/components/realtime";
import base from "./my-rest-data-provider";
 
const transport = broadcastChannelTransport({ channel: "my-app" });
const rt = realtimeDataProvider(base, transport);
// addEventsForMutations broadcasts local writes to other tabs
const dataProvider = addEventsForMutations(rt, rt);

Config

Notes

• In-browser only. BroadcastChannel is not available in Node.js or Service Workers in all environments. The transport will throw at construction time in environments that lack the API.
• Same origin, same browser. Events cross tabs and iframes within the same origin in the same browser instance. They do not travel to other devices, other browsers, or other origins.
• No server. The transport requires no backend. All coordination happens in the browser's messaging layer.
• No onStatusChange / onReconnect. The channel never truly disconnects unless disconnect() is called. useRealtimeStatus will return "idle" for this transport.
• No error hook. The first version of this transport silently swallows handler errors (no onError option). Add your own try/catch in subscription callbacks if you need error visibility.
• Pair with addEventsForMutations. Without it, changes made in one tab are saved to the server but not broadcast to other tabs. Wrapping with addEventsForMutations closes this gap.