广播

让我们探讨如何实现实时广播以在客户端之间发送消息。

用法

您可以使用 MemFire Cloud 客户端库来发送和接收广播消息。

初始化客户端

转到 MemFire Cloud 项目的 设置-> API，获取 URL 和匿名公共 API 密钥。

1import { createClient } from '@supabase/supabase-js'
2
3const SUPABASE_URL = 'https://<project>.supabase.co'
4const SUPABASE_KEY = '<your-anon-key>'
5
6const client = createClient(SUPABASE_URL, SUPABASE_KEY)

收听广播消息

您可以为广播频道提供回调以接收消息。在此示例中，我们将在room-1 中接收任何广播消息：

1// Join a room/topic. Can be anything except for 'realtime'.
2const channelA = clientA.channel('room-1')
3
4// Simple function to log any messages we receive
5function messageReceived(payload) {
6    console.log(payload)
7}
8
9// Subscribe to the Channel
10channelA
11    .on(
12    'broadcast',
13    { event: 'test' },
14    (payload) => messageReceived(payload)
15    )
16    .subscribe()

发送广播消息

我们可以使用 channelB.send（）发送 Broadcast 消息。让我们设置另一个客户端来发送消息。

1// Join a room/topic. Can be anything except for 'realtime'.
2const channelB = clientA.channel('room-1')
3
4channelB.subscribe((status) => {
5    // Wait for successful connection
6    if (status !== 'SUBSCRIBED') {
7    return null
8    }
9
10    // Send a message once the client is subscribed
11    channelB.send({
12    type: 'broadcast',
13    event: 'test',
14    payload: { message: 'hello, world' },
15    })
16})

在发送消息之前，我们需要确保客户端已连接，我们在 subscribe（）回调中已经完成了这一点。

广播选项

您可以在初始化 MemFire Cloud 客户端时传递配置选项。

自发消息

默认情况下，广播消息仅发送到其他客户端。您可以通过将 Broadcast 的 self 参数设置为 true 将消息广播回发件人。

1    const myChannel = supabase.channel('room-2', {
2      config: {
3        broadcast: { self: true },
4      },
5    })
6
7    myChannel.on(
8      'broadcast',
9      { event: 'test-my-messages' },
10      (payload) => console.log(payload)
11    )
12
13    myChannel.subscribe((status) => {
14      if (status !== 'SUBSCRIBED') { return }
15      channelC.send({
16        type: 'broadcast',
17        event: 'test-my-messages',
18        payload: { message: 'talking to myself' },
19      })
20    })

确认消息

您可以通过将 Broadcast 的 ack config 设置为 true 来确认 Realtime 是否收到了您的消息。

1    const myChannel = clientD.channel('room-3', {
2      config: {
3        broadcast: { ack: true },
4      },
5    })
6
7    myChannel.subscribe(async (status) => {
8      if (status !== 'SUBSCRIBED') { return }
9
10      const serverResponse = await myChannel.send({
11        type: 'broadcast',
12        event: 'acknowledge',
13        payload: {},
14      })
15
16      console.log('serverResponse', serverResponse)
17    })

使用它来保证服务器在解析 channelD.send 的 promise 之前已收到消息。如果在创建通道时没有将 ack config 设置为 true，则 channelD.send 返回的 promise 将立即解析。

使用 REST 调用发送消息#

您还可以通过向实时服务器发出 HTTP 请求来发送广播消息。当您想要从服务器或客户端发送消息而无需先建立 WebSocket 连接时，这很有用。

note

目前仅在 Supabase JavaScript 客户端版本 2.37.0 及更高版本中可用。

1    const channel = client.channel('test-channel')
2
3    // No need to subscribe to channel
4
5    channel
6    .send({
7    type: 'broadcast',
8    event: 'test',
9    payload: { message: 'Hi' },
10    })
11    .then((resp) => console.log(resp))
12
13    // Remember to clean up the channel
14
15    client.removeChannel(channel)