Skip to main content

​
useNotificationStream

The useNotificationStream hook connects to the real-time notification stream via WebSocket for live notification updates.

​
Return Value

​
isConnected
boolean
Whether the WebSocket connection is active
​
connectionError
string | null
Any connection error that occurred
​
disconnect
​
reconnect
import { useNotificationStream } from "@wacht/tanstack-router";

function App() {
  const { isConnected, connectionError } = useNotificationStream({
    enabled: true,
    onNotification: (notification) => {
      console.log("New notification:", notification);
    },
    onError: (error) => {
      console.error("Stream error:", error);
    },
  });

  return (
    <div>
      <p>Stream: {isConnected ? "Connected" : "Disconnected"}</p>
      {connectionError && <p>Error: {connectionError}</p>}
    </div>
  );
}

​
Options

​
enabled
boolean
Whether to enable the stream
​
channels
string[]
Channels to subscribe to
​
organizationIds
number[]
Organization IDs to filter notifications
​
workspaceIds
number[]
Workspace IDs to filter notifications
​
onNotification
​
onError
​
reconnectDelay
number
Delay in milliseconds before reconnecting
​
maxReconnectAttempts
number
Maximum number of reconnection attempts

​
Notification Message

interface NotificationMessage {
  id: number;
  user_id: number;
  deployment_id: number;
  title: string;
  body: string;
  severity: string;
  ctas?: { label: string; payload: any }[];
  created_at: string;
}

​
Examples

​
Basic Stream Connection

import { useNotificationStream } from "@wacht/tanstack-router";

function NotificationIndicator() {
  const { isConnected } = useNotificationStream({
    enabled: true,
  });

  return (
    <div>
      <span
        style={{
          width: 10,
          height: 10,
          borderRadius: "50%",
          background: isConnected ? "green" : "red",
        }}
      />
    </div>
  );
}

​
With Channel Subscription

import { useNotificationStream } from "@wacht/tanstack-router";

function ChannelSubscriber() {
  useNotificationStream({
    enabled: true,
    channels: ["updates", "alerts"],
  });

  return <div>Subscribed to updates and alerts</div>;
}

​
With Organization Filtering

import { useNotificationStream } from "@wacht/tanstack-router";

function OrgNotifications({ orgId }: { orgId: number }) {
  useNotificationStream({
    enabled: true,
    organizationIds: [orgId],
  });

  return <div>Listening for organization notifications</div>;
}

​
With Error Handling

import { useNotificationStream } from "@wacht/tanstack-router";

function NotificationsWithRetry() {
  const { isConnected, connectionError, reconnect } = useNotificationStream({
    enabled: true,
    reconnectDelay: 2000,
    maxReconnectAttempts: 10,
    onError: (error) => {
      toast.error(`Connection error: ${error}`);
    },
  });

  return (
    <div>
      <p>Status: {isConnected ? "Connected" : "Disconnected"}</p>
      {!isConnected && (
        <button onClick={() => reconnect()}>Reconnect</button>
      )}
      {connectionError && <p>Error: {connectionError}</p>}
    </div>
  );
}

​
Disconnect on Unmount

import { useNotificationStream } from "@wacht/tanstack-router";

function ConditionalStream({ enabled }: { enabled: boolean }) {
  const { isConnected, disconnect } = useNotificationStream({
    enabled,
  });

  useEffect(() => {
    return () => {
      disconnect();
    };
  }, [disconnect]);

  return <div>{/* Content */}</div>;
}

​
WebSocket Connection

The hook establishes a WebSocket connection to: 
wss://{backend_host}/realtime/notifications
The connection includes:
  • Automatic reconnection with exponential backoff
  • Ping/pong for keep-alive
  • Session-based authentication
  • Channel and organization filtering