Supabase Realtime Client

Send ephemeral messages with Broadcast, track and synchronize state with Presence, and listen to database changes with Postgres Change Data Capture (CDC).

Guides · Reference Docs · Multiplayer Demo

Overview

This client enables you to use the following Supabase Realtime's features:

• Broadcast: send ephemeral messages from client to clients with minimal latency. Use cases include sharing cursor positions between users.
• Presence: track and synchronize shared state across clients with the help of CRDTs. Use cases include tracking which users are currently viewing a specific webpage.
• Postgres Change Data Capture (CDC): listen for changes in your PostgreSQL database and send them to clients.

Usage

Installing the Package

1npm install @supabase/realtime-js

Creating a Channel

1import { RealtimeClient } from '@supabase/realtime-js'
2
3const client = new RealtimeClient(REALTIME_URL, {
4  params: {
5    apikey: API_KEY
6  },
7})
8
9const channel = client.channel('test-channel', {})
10
11channel.subscribe((status, err) => {
12  if (status === 'SUBSCRIBED') {
13    console.log('Connected!')
14  }
15
16  if (status === 'CHANNEL_ERROR') {
17    console.log(`There was an error subscribing to channel: ${err.message}`)
18  }
19
20  if (status === 'TIMED_OUT') {
21    console.log('Realtime server did not respond in time.')
22  }
23
24  if (status === 'CLOSED') {
25    console.log('Realtime channel was unexpectedly closed.')
26  }
27})

Notes:

• REALTIME_URL is 'ws://localhost:4000/socket' when developing locally and 'wss://<project_ref>.supabase.co/realtime/v1' when connecting to your Supabase project.
• API_KEY is a JWT whose claims must contain exp and role (existing database role).
• Channel name can be any string.

Broadcast

Your client can send and receive messages based on the event.

1// Setup...
2
3const channel = client.channel('broadcast-test', { broadcast: { ack: false, self: false } })
4
5channel.on('broadcast', { event: 'some-event' }, (payload) =>
6  console.log(payload)
7)
8
9channel.subscribe(async (status) => {
10  if (status === 'SUBSCRIBED') {
11    // Send message to other clients listening to 'broadcast-test' channel
12    await channel.send({
13      type: 'broadcast',
14      event: 'some-event',
15      payload: { hello: 'world' },
16    })
17  }
18})

Notes:

• Setting ack to true means that the channel.send promise will resolve once server replies with acknowledgement that it received the broadcast message request.
• Setting self to true means that the client will receive the broadcast message it sent out.
• Setting private to true means that the client will use RLS to determine if the user can connect or not to a given channel.

Presence

Your client can track and sync state that's stored in the channel.

1// Setup...
2
3const channel = client.channel(
4  'presence-test',
5  {
6    config: {
7      presence: {
8        key: ''
9      }
10    }
11  }
12)
13
14channel.on('presence', { event: 'sync' }, () => {
15  console.log('Online users: ', channel.presenceState())
16})
17
18channel.on('presence', { event: 'join' }, ({ newPresences }) => {
19  console.log('New users have joined: ', newPresences)
20})
21
22channel.on('presence', { event: 'leave' }, ({ leftPresences }) => {
23  console.log('Users have left: ', leftPresences)
24})
25
26channel.subscribe(async (status) => {
27  if (status === 'SUBSCRIBED') {
28    const status = await channel.track({ 'user_id': 1 })
29    console.log(status)
30  }
31})

Postgres CDC

Receive database changes on the client.

1// Setup...
2
3const channel = client.channel('db-changes')
4
5channel.on('postgres_changes', { event: '*', schema: 'public' }, (payload) => {
6  console.log('All changes in public schema: ', payload)
7})
8
9channel.on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, (payload) => {
10  console.log('All inserts in messages table: ', payload)
11})
12
13channel.on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'users', filter: 'username=eq.Realtime' }, (payload) => {
14  console.log('All updates on users table when username is Realtime: ', payload)
15})
16
17channel.subscribe(async (status) => {
18  if (status === 'SUBSCRIBED') {
19    console.log('Ready to receive database changes!')
20  }
21})

Get All Channels

You can see all the channels that your client has instantiatied.

1// Setup...
2
3client.getChannels()

Cleanup

It is highly recommended that you clean up your channels after you're done with them.

• Remove a single channel

1// Setup...
2
3const channel = client.channel('some-channel-to-remove')
4
5channel.subscribe()
6
7client.removeChannel(channel)

• Remove all channels

1// Setup...
2
3const channel1 = client.channel('a-channel-to-remove')
4const channel2 = client.channel('another-channel-to-remove')
5
6channel1.subscribe()
7channel2.subscribe()
8
9client.removeAllChannels()

Credits

This repo draws heavily from phoenix-js.

License

MIT.