GuidesNotifications
Realtime Stream Handling
Use realtime notification streaming safely with reconnect handling and API reconciliation.
Realtime Stream Handling
Realtime improves freshness; the REST list remains source of truth.
Stream behavior from current SDK hook
useNotificationStream currently:
- Builds websocket URL from
deployment.backend_host. - Chooses
wssforhttpsandwsforhttphosts. - Supports channel and org/workspace filters.
- Sends ping every 30 seconds.
- Reconnects with exponential backoff up to max attempts.
Integration pattern
import { useNotificationStream } from "@wacht/react-router";
export function StreamStatus() {
const { isConnected, connectionError, reconnect } = useNotificationStream({
enabled: true,
channels: ["user", "organization"],
organizationIds: [123],
});
return (
<div>
Stream: {isConnected ? "Connected" : "Disconnected"}
{connectionError ? <button onClick={() => reconnect()}>Reconnect</button> : null}
</div>
);
}Correct consistency model
- Use stream events to reduce perceived latency.
- Keep inbox API (
useNotifications) as canonical data store. - On reconnect, refetch list to reconcile missed messages.
- Deduplicate by notification ID when mixing stream + fetch updates.
Operational guidance
- Instrument disconnect and reconnect attempt metrics.
- Distinguish transient network errors from auth/session errors.
- Surface non-intrusive reconnect UI state to users.
- Avoid infinite reconnect loops without backoff caps.
Validation checklist
- New notifications appear without manual refresh during healthy stream.
- Stream disconnect does not break inbox actions.
- Reconnect reconciles missed events with no duplicates.
- Scope/channel filters constrain both stream and list surfaces.