实时

广播功能

使用客户端库、REST或数据库发送低延迟消息

您可以使用 Realtime Broadcast 功能在用户之间发送低延迟消息。消息可以通过客户端库、REST API 或直接从数据库发送。

订阅消息

您可以使用 Supabase 客户端库来接收 Broadcast 消息。

初始化客户端

前往您的 Supabase 项目 API 设置 获取 URL 和 anon 公共 API 密钥。

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

接收广播消息

您可以为 broadcast 频道提供回调函数来接收消息。以下示例将接收发送到 test-channel 的所有广播消息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// @noImplicitAny: falseimport { createClient } from '@supabase/supabase-js'const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')// ---cut---// 加入一个房间/主题。可以是任何名称，除了'realtime'const myChannel = supabase.channel('test-channel')// 简单的日志记录函数，用于接收消息function messageReceived(payload) {  console.log(payload)}// 订阅频道myChannel  .on(    'broadcast',    { event: 'shout' }, // 监听"shout"事件。可以使用"*"监听所有事件    (payload) => messageReceived(payload)  )  .subscribe()

发送消息

使用客户端库进行广播

您可以使用 Supabase 客户端库发送广播消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { createClient } from '@supabase/supabase-js'const supabase = createClient('your_project_url', 'your_supabase_api_key')// ---cut---const myChannel = supabase.channel('test-channel')/** * 订阅前发送消息将使用 HTTP 协议 */myChannel  .send({    type: 'broadcast',    event: 'shout',    payload: { message: 'Hi' },  })  .then((resp) => console.log(resp))/** * 订阅后发送消息将使用 Websockets 协议 */myChannel.subscribe((status) => {  if (status !== 'SUBSCRIBED') {    return null  }  myChannel.send({    type: 'broadcast',    event: 'shout',    payload: { message: 'Hi' },  })})

从数据库广播

您可以直接使用数据库中的realtime.send()函数发送消息：

1
2
3
4
5
6
7
select  realtime.send(    jsonb_build_object('hello', 'world'), -- JSONB 负载    'event', -- 事件名称    'topic', -- 主题    false -- 公开/私有标志  );

在记录创建、更新或删除时广播消息是一个常见用例。我们为此专门提供了辅助函数realtime.broadcast_changes()。更多详情请参阅订阅数据库变更指南。

使用REST API广播

您可以通过向Realtime服务器发送HTTP请求来广播消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
curl -v \-H 'apikey: <SUPABASE_TOKEN>' \-H 'Content-Type: application/json' \--data-raw '{  "messages": [    {      "topic": "test",      "event": "event",      "payload": { "test": "test" }    }  ]}' \'https://<PROJECT_REF>.supabase.co/realtime/v1/api/broadcast'

广播选项

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

自发送消息

默认情况下，广播消息只会发送给其他客户端。您可以通过将 Broadcast 的 self 参数设置为 true 来将消息广播回发送者。

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

消息确认

通过将 Broadcast 的 ack 配置设为 true，您可以确认 Realtime 服务器已收到您的消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createClient } from '@supabase/supabase-js'const supabase = createClient('your_project_url', 'your_supabase_api_key')// ---cut---const myChannel = supabase.channel('room-3', {  config: {    broadcast: { ack: true },  },})myChannel.subscribe(async (status) => {  if (status !== 'SUBSCRIBED') { return }  const serverResponse = await myChannel.send({    type: 'broadcast',    event: 'acknowledge',    payload: {},  })  console.log('serverResponse', serverResponse)})

使用此功能可以确保在 channelD.send 的 Promise 解析之前，服务器已收到消息。如果在创建频道时未将 ack 配置设为 true，则 channelD.send 返回的 Promise 会立即解析。