Presence

让我们探讨如何实现实时状态来跟踪多个用户之间的状态。

用法

您可以使用 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 supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

同步和跟踪状态

侦听每当任何客户端加入或离开频道或更改其状态切片时触发的sync、join和leave事件：

1const roomOne = supabase.channel('room_01')
2
3roomOne
4  .on('presence', { event: 'sync' }, () => {
5    const newState = roomOne.presenceState()
6    console.log('sync', newState)
7  })
8  .on('presence', { event: 'join' }, ({ key, newPresences }) => {
9    console.log('join', key, newPresences)
10  })
11  .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
12    console.log('leave', key, leftPresences)
13  })
14  .subscribe()

发送状态

您可以使用 track（）将状态发送给所有订阅者：

1const roomOne = supabase.channel('room_01')
2
3const userStatus = {
4  user: 'user-1',
5  online_at: new Date().toISOString(),
6}
7
8roomOne.subscribe(async (status) => {
9  if (status !== 'SUBSCRIBED') { return }
10
11  const presenceTrackStatus = await roomOne.track(userStatus)
12  console.log(presenceTrackStatus)
13})

客户端将从订阅同一主题的任何其他客户端接收状态（在本例中为 room_01）。它还将自动触发自己的同步和联接事件处理程序。

停止跟踪

您可以使用 untrack（）方法停止跟踪状态。这将触发sync和leave事件处理程序。

1const untrackPresence = async () => {
2  const presenceUntrackStatus = await roomOne.untrack()
3  console.log(presenceUntrackStatus)
4}
5
6untrackPresence()

状态选项

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

状态键

默认情况下，Presence 将在服务器上生成唯一的 UUIDv1 密钥，以跟踪客户端通道的状态。如果您愿意，可以在创建通道时提供自定义密钥。此密钥在客户端中应该是唯一的。

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