在线状态

通过实时在线状态在用户间共享状态。

让我们探索如何实现实时状态追踪(Realtime Presence)来跟踪多个用户之间的状态。

使用方法

您可以使用 Supabase 客户端库来跟踪用户之间的 Presence 状态。

初始化客户端

前往您的 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)

同步与追踪状态

监听 sync、join 和 leave 事件，这些事件会在任何客户端加入/离开频道或更改其状态片段时触发：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { createClient } from '@supabase/supabase-js'const supabase = createClient('your_project_url', 'your_supabase_api_key')// ---cut---const roomOne = supabase.channel('room_01')roomOne  .on('presence', { event: 'sync' }, () => {    const newState = roomOne.presenceState()    console.log('sync', newState)  })  .on('presence', { event: 'join' }, ({ key, newPresences }) => {    console.log('join', key, newPresences)  })  .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {    console.log('leave', key, leftPresences)  })  .subscribe()

发送状态

您可以使用 track() 方法向所有订阅者发送状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createClient } from '@supabase/supabase-js'const supabase = createClient('your_project_url', 'your_supabase_api_key')// ---cut---const roomOne = supabase.channel('room_01')const userStatus = {  user: 'user-1',  online_at: new Date().toISOString(),}roomOne.subscribe(async (status) => {  if (status !== 'SUBSCRIBED') { return }  const presenceTrackStatus = await roomOne.track(userStatus)  console.log(presenceTrackStatus)})

客户端将接收来自订阅同一主题（本例中为 room_01）的其他任何客户端的状态。这也会自动触发自身的 sync 和 join 事件处理器。

停止追踪

您可以使用 untrack() 方法来停止追踪 presence 状态。这将触发 sync 和 leave 事件处理器。

1
2
3
4
5
6
7
8
9
10
11
import { createClient } from '@supabase/supabase-js'const supabase = createClient('your_project_url', 'your_supabase_api_key')const roomOne = supabase.channel('room_01')// ---cut---const untrackPresence = async () => {  const presenceUntrackStatus = await roomOne.untrack()  console.log(presenceUntrackStatus)}untrackPresence()

Presence 配置选项

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

Presence 键

默认情况下，Presence 会在服务器端生成一个唯一的 UUIDv1 键来追踪客户端通道状态。如果需要，您可以在创建通道时提供自定义键。该键应在各客户端间保持唯一。

1
2
3
4
5
6
7
8
9
10
import { createClient } from '@supabase/supabase-js'const supabase = createClient('SUPABASE_URL', 'SUPABASE_ANON_KEY')const channelC = supabase.channel('test', {  config: {    presence: {      key: 'userId-123',    },  },})