Broadcast
Send and receive messages using Realtime Broadcast
Let's explore how to implement Realtime Broadcast to send messages between clients.
Usage
You can use the Supabase client libraries to send and receive Broadcast messages.
Initialize the client
Go to your Supabase project's API Settings and grab the URL and anon public API key.
_10import { createClient } from '@supabase/supabase-js'_10_10const SUPABASE_URL = 'https://<project>.supabase.co'_10const SUPABASE_KEY = '<your-anon-key>'_10_10const client = createClient(SUPABASE_URL, SUPABASE_KEY)
Listening to broadcast messages
You can provide a callback for the broadcast channel to receive message. In this example we will receive any broadcast messages in room-1:
_16// Join a room/topic. Can be anything except for 'realtime'._16const channelA = clientA.channel('room-1')_16_16// Simple function to log any messages we receive_16function messageReceived(payload) {_16 console.log(payload)_16}_16_16// Subscribe to the Channel_16channelA_16 .on(_16 'broadcast',_16 { event: 'test' },_16 (payload) => messageReceived(payload)_16 )_16 .subscribe()
Sending broadcast messages
We can send Broadcast messages using channelB.send(). Let's set up another client to send messages.
_16// Join a room/topic. Can be anything except for 'realtime'._16const channelB = clientA.channel('room-1')_16_16channelB.subscribe((status) => {_16 // Wait for successful connection_16 if (status !== 'SUBSCRIBED') {_16 return null_16 }_16_16 // Send a message once the client is subscribed_16 channelB.send({_16 type: 'broadcast',_16 event: 'test',_16 payload: { message: 'hello, world' },_16 })_16})
Before sending messages we need to ensure the client is connected, which we have done within the subscribe() callback.
Broadcast options
You can pass configuration options while initializing the Supabase Client.
Self-send messages
By default, broadcast messages are only sent to other clients. You can broadcast messages back to the sender by setting Broadcast's self parameter to true.
_20const myChannel = supabase.channel('room-2', {_20 config: {_20 broadcast: { self: true },_20 },_20})_20_20myChannel.on(_20 'broadcast',_20 { event: 'test-my-messages' },_20 (payload) => console.log(payload)_20)_20_20myChannel.subscribe((status) => {_20 if (status !== 'SUBSCRIBED') { return }_20 channelC.send({_20 type: 'broadcast',_20 event: 'test-my-messages',_20 payload: { message: 'talking to myself' },_20 })_20})
Acknowledge messages
You can confirm that Realtime received your message by setting Broadcast's ack config to true.
_17const myChannel = clientD.channel('room-3', {_17 config: {_17 broadcast: { ack: true },_17 },_17})_17_17myChannel.subscribe(async (status) => {_17 if (status !== 'SUBSCRIBED') { return }_17_17 const serverResponse = await myChannel.send({_17 type: 'broadcast',_17 event: 'acknowledge',_17 payload: {},_17 })_17_17 console.log('serverResponse', serverResponse)_17})
Use this to guarantee that the server has received the message before resolving channelD.send's promise. If the ack config is not set to true when creating the channel, the promise returned by channelD.send will resolve immediately.
Send messages using REST calls
You can also send a Broadcast message by making an HTTP request to Realtime servers. This is useful when you want to send messages from your server or client without having to first establish a WebSocket connection.
This is currently available only in the Supabase JavaScript client version 2.37.0 and later.
_15const channel = client.channel('test-channel')_15_15// No need to subscribe to channel_15_15channel_15.send({_15type: 'broadcast',_15event: 'test',_15payload: { message: 'Hi' },_15})_15.then((resp) => console.log(resp))_15_15// Remember to clean up the channel_15_15client.removeChannel(channel)