Skip to main content

Supabase Realtime

Supabase Realtime lets your app receive instant updates when data changes — perfect for chat apps, live feeds, and collaborative features.

What is Realtime?

Instead of constantly polling for new data, Realtime pushes changes to your app instantly:
Without Realtime:
App → "Any new messages?" → Server (every 5 seconds)

With Realtime:
Server → "New message!" → App (instantly when it happens)

Prerequisites


Enabling Realtime

In Supabase Dashboard

  1. Go to Database → Tables
  2. Select your table
  3. Click “Realtime” toggle to enable
Or via SQL:
ALTER TABLE messages REPLICA IDENTITY FULL;

Basic Subscription

Ask Nativeline:
Subscribe to the messages table in Supabase.
When a new message is added, automatically add it to the list.
Don't require a refresh to see new messages.

Subscription Code Pattern

// Subscribe to changes
let channel = supabase.channel("messages")

channel.on("postgres_changes", filter: .init(
  schema: "public",
  table: "messages",
  event: .all
)) { payload in
  // Handle the change
  switch payload.eventType {
  case .insert:
    // New message added
  case .update:
    // Message updated
  case .delete:
    // Message deleted
  }
}

await channel.subscribe()

Event Types

EventWhen It Fires
insertNew row added
updateExisting row modified
deleteRow removed
* (all)Any change

Use Cases

Live Chat

Create a chat interface:
- Load existing messages on open
- Subscribe to new messages
- New messages appear instantly at bottom
- Show typing indicators

Activity Feed

Build a live activity feed:
- Show recent activities
- Subscribe to activity table
- New activities slide in from top
- Animate new items

Collaborative Lists

Make the todo list collaborative:
- Multiple users can add tasks
- Changes appear instantly for everyone
- Show who made each change
- Handle conflicts gracefully

Live Notifications

Add live notifications:
- Subscribe to notifications table
- Show badge count
- Toast notification for new items
- Mark as read when viewed

Filtering Subscriptions

By Column Value

Only listen for messages in a specific chat:
channel.on("postgres_changes", filter: .init(
  schema: "public",
  table: "messages",
  event: .insert,
  filter: "chat_id=eq.123"
)) { payload in
  // Only messages for chat 123
}

By User

Only listen for the current user’s notifications:
filter: "user_id=eq.\(currentUserId)"

Handling Changes

Insert (New Data)

When a new message is inserted:
1. Parse the new message from payload
2. Add to local messages array
3. Scroll to bottom
4. Play notification sound (optional)

Update (Modified Data)

When a message is updated:
1. Find the message in local array by ID
2. Replace with updated version
3. UI updates automatically

Delete (Removed Data)

When a message is deleted:
1. Find the message in local array by ID
2. Remove from array
3. Animate removal

Unsubscribing

Always clean up subscriptions when leaving a screen:
// When view disappears
channel.unsubscribe()

// Or remove all subscriptions
supabase.removeAllChannels()

Realtime + RLS

Realtime respects Row Level Security:
  • Users only receive events for rows they can SELECT
  • Your existing RLS policies apply automatically
  • No additional security configuration needed

Performance Considerations

Don’t subscribe to tables you don’t need. Each subscription uses resources.
Use column filters to reduce events received. Don’t subscribe to all messages if you only need one chat room.
Always unsubscribe when leaving screens. Orphaned subscriptions waste resources.
Supabase handles reconnection automatically, but you may want to refresh data after a reconnection.

Troubleshooting

  • Is Realtime enabled on the table?
  • Are RLS policies allowing SELECT?
  • Is the subscription active?
  • Check Supabase dashboard logs
  • Check filter syntax
  • Verify column name is correct
  • Ensure filter value matches data type
  • May have multiple subscriptions
  • Unsubscribe when view disappears
  • Use unique channel names
Supabase auto-reconnects, but after prolonged disconnection:
  • Refresh data when connection restores
  • Show connection status to user

Example: Building Live Chat

1

Create messages table

  • id (uuid)
  • chat_id (uuid)
  • user_id (uuid)
  • content (text)
  • created_at (timestamp)
2

Add RLS policies

Users can read messages in chats they’re part of.
3

Enable Realtime

Toggle Realtime on the messages table.
4

Subscribe in app

Subscribe to inserts filtered by chat_id.
5

Handle new messages

Append to local array, scroll to bottom.
6

Clean up

Unsubscribe when leaving chat screen.

Next Steps

You now have a complete picture of Supabase: