Real-time Connection with Custom WebSocket Transport

Build a real-time notification system that uses a custom WebSocket transport layer to connect to Supabase. This is useful when working in specialized environments (React Native, Cloudflare Workers, proxies) that need custom WebSocket implementations.

Requirements

Your implementation must:

1. Create a Supabase client configured with a custom WebSocket transport for real-time connections
2. Subscribe to INSERT events on a notifications table in the public schema
3. Handle and log received notifications showing the event type and new data
4. Properly unsubscribe and clean up when done

Custom Transport Details

The custom WebSocket transport should:

• Wrap the standard WebSocket with custom behavior (e.g., logging, custom headers)
• Log connection lifecycle events (connection opened, closed, errors)
• Be compatible with Supabase's real-time client transport interface

Expected Behavior

• It creates a Supabase client with custom WebSocket transport configured @test
• It subscribes to and receives INSERT events from the notifications table @test
• It logs custom transport connection lifecycle events @test

Implementation

@generates

API

/**
 * Configuration for the notification client
 */
export interface NotificationClientConfig {
  supabaseUrl: string;
  supabaseKey: string;
  onNotification?: (eventType: string, data: any) => void;
  onConnectionStatus?: (status: string) => void;
}

/**
 * Creates a real-time notification client with custom WebSocket transport
 * @param config - Configuration including Supabase URL, key, and callbacks
 * @returns Object with methods to control the subscription
 */
export function createNotificationClient(config: NotificationClientConfig): {
  subscribe: () => Promise<void>;
  unsubscribe: () => Promise<void>;
  isConnected: () => boolean;
};

Dependencies { .dependencies }

@supabase/supabase-js { .dependency }

Provides real-time subscription capabilities with configurable WebSocket transport.