on().subscribe()

on().subscribe()创建一个事件处理程序，用于监听变更。

  • 默认情况下，广播（Broadcast）和在线状态（Presence）对所有项目都是启用的。
  • 对于新项目，默认情况下禁用了监听数据库变更，原因是出于数据库性能和安全方面的考虑。你可以通过管理实时数据的复制功能来启用它。
  • 你可以通过将表的 REPLICA IDENTITY 设置为 FULL（例如，执行 ALTER TABLE your_table REPLICA IDENTITY FULL;），来接收更新和删除操作的"之前"的数据。
  • 删除语句(delete statements)不适用行级安全（Row level security）。当启用行级安全并将复制标识（replica identity）设置为 full 时，只有主键会被发送到客户端。

案例教程

案例1 （监听广播消息）#

1supabase
2.channel('any')
3.on('broadcast', { event: 'cursor-pos' }, payload => {
4  console.log('Cursor position received!', payload)
5})
6.subscribe((status) => {
7  if (status === 'SUBSCRIBED') {
8    channel.send({
9      type: 'broadcast',
10      event: 'cursor-pos',
11      payload: { x: Math.random(), y: Math.random() },
12    })
13  }
14})

案例2 （监听在线状态同步）#

1const channel = supabase.channel('any')
2channel
3.on('presence', { event: 'sync' }, () => {
4  console.log('Synced presence state: ', channel.presenceState())
5})
6.subscribe(async (status) => {
7  if (status === 'SUBSCRIBED') {
8    await channel.track({ online_at: new Date().toISOString() })
9  }
10})

案例3 （监听用户加入状态）#

1const channel = supabase.channel('any')
2channel
3.on('presence', { event: 'join' }, ({ newPresences }) => {
4  console.log('Newly joined presences: ', newPresences)
5})
6.subscribe(async (status) => {
7  if (status === 'SUBSCRIBED') {
8    await channel.track({ online_at: new Date().toISOString() })
9  }
10})

案例4 （监听用户离开状态）#

1const channel = supabase.channel('any')
2channel
3.on('presence', { event: 'leave' }, ({ leftPresences }) => {
4  console.log('Newly left presences: ', leftPresences)
5})
6.subscribe(async (status) => {
7  if (status === 'SUBSCRIBED') {
8    await channel.track({ online_at: new Date().toISOString() })
9    await channel.untrack()
10  }
11})

案例5 （监听所有数据库变更）#

1supabase
2.channel('any')
3.on('postgres_changes', { event: '*', schema: '*' }, payload => {
4  console.log('Change received!', payload)
5})
6.subscribe()

案例6 （监听特定表格）#

1supabase
2.channel('any')
3.on('postgres_changes', { event: '*', schema: 'public', table: 'countries' }, payload => {
4  console.log('Change received!', payload)
5})
6.subscribe()

案例7 （监听插入操作）#

1supabase
2.channel('any')
3.on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, payload => {
4  console.log('Change received!', payload)
5})
6.subscribe()

案例8 （监听更新操作）#

1supabase
2.channel('any')
3.on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries' }, payload => {
4  console.log('Change received!', payload)
5})
6.subscribe()

案例9 （监听删除操作）#

1supabase
2.channel('any')
3.on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, payload => {
4  console.log('Change received!', payload)
5})
6.subscribe()

案例10 （监听多个事件）#

1supabase
2.channel('any')
3.on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, handleRecordInserted)
4.on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, handleRecordDeleted)
5.subscribe()

案例11 （监听行级别变更）#

1supabase
2.channel('any')
3.on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries', filter: 'id=eq.200' }, handleRecordUpdated)
4.subscribe()

参数说明

  • 类型（type）[必要参数]
    类型为 "broadcast" 的字符串

    可选值为 "broadcast"、"presence" 或 "postgres_changes"。

  • filter[必要参数]
    object类型

    针对实时功能（realtime功能）的自定义对象，用于详细说明要接收哪些有效载荷（payloads）。

      特性

    • event[必要参数]
      string类型

  • callback[必要参数]
    函数类型

    当事件处理程序被触发时要调用的函数。