Add Real-Time Features to Your App

The three main approaches are Supabase Realtime, Pusher, and raw WebSockets via a Node.js server. Supabase Realtime is the easiest if you already use Supabase - it listens for Postgres row changes and pushes them to connected clients. Pusher offers a managed WebSocket service with a generous free tier and excellent client libraries. Raw WebSockets give the most control but require managing your own server and connection state.

Enable Realtime for your table in the Supabase dashboard under Database > Replication. In your client code, create a channel with `supabase.channel('room')` and subscribe to `postgres_changes` events for INSERT, UPDATE, and DELETE operations. Filter subscriptions by table and optionally by a column value to only receive relevant changes. Call `channel.subscribe()` to start listening and store the channel reference so you can unsubscribe on component unmount.

Maintain a state array of items and append new records when INSERT events arrive from your subscription. Handle UPDATE events by replacing the matching item in the array by ID. Remove items from state when DELETE events fire. Use `useEffect` to set up the subscription on mount and return a cleanup function that calls `supabase.removeChannel(channel)` to prevent memory leaks and duplicate connections.

Supabase Realtime Presence lets you track which users are currently viewing a page or document. Call `channel.track({ userId, name, cursor })` after subscribing to broadcast your presence. Listen to `presence` sync events to maintain a map of all connected users. Display live avatars or cursors using the presence data, updating positions as `track` calls arrive from other users.

Show a connection status indicator so users know if they are receiving live updates. Listen to the `SUBSCRIBED`, `CHANNEL_ERROR`, and `TIMED_OUT` status events from your channel. On error or timeout, implement exponential backoff reconnection logic to avoid hammering the server. Refetch the latest data from the REST API after reconnecting to fill any gaps that occurred while disconnected.

Secure your Realtime subscriptions using Supabase Row Level Security policies - users should only receive changes they are authorized to see. Avoid broadcasting sensitive fields by selecting only the columns you need in your subscription filter. For high-frequency updates like cursor positions, use the `broadcast` channel type instead of database subscriptions to avoid unnecessary database load. Limit the number of concurrent channels per client to avoid exhausting connection limits.