Skip to main content

​
The shared hook

Every BBrandsLab frontend subscribes through one framework-agnostic hook, usePusherChannel, exported from @bbrandslab/ui.

One socket per (key, cluster)

Clients are memoised at module level so several subscriptions on the same page reuse a single WebSocket.

Lazy pusher-js

Loaded with a dynamic import. pusher-js is a peer dependency of the UI package; each consuming app declares it as a direct dependency.

Bounded buffer

Events are batched per animation frame and capped at maxEvents (default 250), so high-throughput channels never freeze the UI.

Graceful disable

An empty/undefined pusherKey yields status: "disabled" without opening a socket.
When events is omitted the hook binds every event on the channel and filters out Pusher system events.

​
Client environment variables

The key is public by design; only the server holds INTEGRATION_PUSHER_SECRET. Private channels are authorized through POST /api/v3/realtime/pusher/auth.

​
Consuming apps

portal-customer

Subscribes to the digital-contract channel and invalidates the contract query when a signature-stage event arrives.

horizon-enterprise

Subscribes to NOC and Maihue Street totem channels; combines Pusher invalidation with a 60 s notifications poll.

​
Polling fallback

Realtime is optional, so every consumer keeps a query-based fallback. When no Pusher key is configured, the UI relies on React Query refetching alone. Design every screen so it is fully usable without realtime.