Real-Time Infrastructure

realtime/
  WebSocketProvider.tsx    # WebSocket connection with auto-reconnect
  EventSource.tsx          # SSE streaming provider
  Presence.tsx             # User presence tracking
  NotificationCenter.tsx   # Real-time notification delivery
  LiveUpdates.tsx          # Live data subscription
  queryStatus.ts           # Query execution status tracking
  types.ts                 # Shared type definitions

interface WebSocketConfig {
  url: string;
  protocols?: string[];
  headers?: Record<string, string>;
  authToken?: string;
  autoReconnect?: boolean;          // Default: true
  maxReconnectAttempts?: number;    // Default: 10
  reconnectDelay?: number;          // Default: 1000ms
  reconnectDelayMultiplier?: number; // Default: 1.5
  maxReconnectDelay?: number;       // Default: 30000ms
  pingInterval?: number;            // Default: 30000ms
  queueSize?: number;               // Default: 100
}

type WebSocketStatus = 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'error';

interface WebSocketContextType {
  status: WebSocketStatus;
  send: <T>(message: WebSocketMessage<T>) => void;
  subscribe: <T>(channel: string, handler: (data: T) => void) => () => void;
  unsubscribe: (channel: string) => void;
  connect: () => void;
  disconnect: () => void;
  reconnect: () => void;
}

<WebSocketProvider config={{
  url: 'wss://api.matih.ai/ws',
  authToken: 'session-token',
  pingInterval: 30000,
}}>
  <App />
</WebSocketProvider>

// Access full WebSocket context
const { status, send, subscribe } = useWebSocket();
 
// Subscribe to a channel with automatic cleanup
useWebSocketChannel<DashboardUpdate>('dashboard:updates', (data) => {
  updateDashboard(data);
});
 
// Get connection status
const status = useWebSocketStatus();

wsRef.current.send(JSON.stringify({ type: 'ping', timestamp: Date.now() }));