Vue3 - Supabase的集成与使用详解3（监听数据变化进行实时数据更新）

drop table if exists book;

create table book (
  "id" bigint generated by default as identity primary key,
  "name" character varying,
  "price" numeric
);

INSERT INTO book ("name", "price") VALUES
  ('我与地坛', 29.00),
  ('失败者的春秋', 38.00),
  ('南北战争三百年', 35.00);

 

2，样例代码

我们在前文样例的基础上增加增加了对 book 表数据新增数据事件的订阅，使其在监听到数据增加时会自动加载数据并刷新页面内容。

<script setup>
// 引入Vue 3的响应式引用（ref）和生命周期钩子（onMounted）
import { ref, onMounted } from 'vue'
 
// 引入Supabase客户端实例
import { supabase } from './lib/supabaseClient'
 
// 创建一个响应式的引用（ref）用于存储书籍数据
const books = ref([])
 
// 查询书籍
async function getBooks() {
  // 使用Supabase实例的select方法从'book'表中获取所有数据
  const { data } = await supabase.from('book').select()
 
  // 将查询结果更新到books引用中
  books.value = data
}

// 新增一本书籍
async function addOneBook() {
  await supabase.from('book').insert({ name: `新书籍${getRandNum()}`, price: getRandNum()})
  await getBooks()
}

// 新增三本书籍
async function addThreeBooks() {
  await supabase.from('book').insert([
   { name: `新书籍${getRandNum()}`, price: getRandNum()},
   { name: `新书籍${getRandNum()}`, price: getRandNum()},
   { name: `新书籍${getRandNum()}`, price: getRandNum()}
  ])
  await getBooks()
}

// 更新书籍
async function updateBook() {
  // 更新最后一条数据
  if (books.value.length > 0) {
    const lastBook = books.value[books.value.length - 1];
    await supabase.from('book')
      .update({ name: `新书籍${getRandNum()}`, price: getRandNum()}).eq('id', lastBook.id)
    await getBooks()
  }
}

// 删除书籍
async function deleteBook() {
  // 删除最后一条数据
  if (books.value.length > 0) {
    const lastBook = books.value[books.value.length - 1];
    await supabase.from('book').delete().eq('id', lastBook.id)
    await getBooks()
  }
}

// 插入或更新书籍
async function upsertBook() {
  await supabase.from('book')
    .upsert({ id: 100, name: `新书籍${getRandNum()}`, price: getRandNum()})
  await getBooks()
}

// 生成一个介于10（包含）和 100（不包含）之间的随机整数
function getRandNum() {
  return Math.floor(Math.random() * 90) + 10;
}
 
// 在组件被挂载后（mounted）执行getBooks函数，获取并更新书籍数据
onMounted(() => {
  getBooks()

  // 订阅book数据插入事件消息
  supabase.channel('book-channel')
  .on(
    'postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'book' },
    (payload) => {
      console.log('数据发送变化!', payload)
      // 重新加载数据
      getBooks()
    }
  )
  .subscribe()
})
</script>
 
<template>
  <div>
    <button class="action-button" @click="addOneBook">新增一本书籍</button>
    <button class="action-button" @click="addThreeBooks">新增三本书籍</button>
    <button class="action-button" @click="updateBook">更新最后一本书</button>
    <button class="action-button" @click="deleteBook">删除最后一本书</button>
    <button class="action-button" @click="upsertBook">插入或更新书籍</button>
  </div>
  <!-- 展示书籍数据的无序列表 -->
  <ul class="book-list">
    <li v-for="book in books" :key="book.id">
      {{ book.name }} （编号:{{ book.id }}，价格:{{ book.price }}）
    </li>
  </ul>
</template>

<style scoped>
  .action-button {
    margin-right: 5px; /* 设置按钮之间的外边距 */
  }

  .book-list {
    margin-top: 20px; /* 设置书籍列表上方的外边距 */
    padding: 0; /* 移除列表的内边距 */
  }

  .book-list li {
    margin-bottom: 8px; /* 设置每本书之间的外边距 */
  }
</style>

3，运行测试

（2）接着我们在 Supabase 控制页面上手动插入一条数据。

（3）由于 Vue 客户端这边已经订阅了 postgres_changes 实时事件，会感知到数据插入的变化。

 
（4）然后自动执行相应的动作，如重新获取并显示数据。

附：实时监听功能详细说明

1，所有监听事件

supabase.channel('book-channel')
.on(
  'postgres_changes',
  { event: '*', schema: 'public', table: 'book' },
  (payload) => {
    console.log('数据发送变化!', payload)
    // 执行自定义的方法
    // ......
  }
)
.subscribe()

supabase.channel('book-channel')
.on(
  'postgres_changes',
  { event: 'INSERT', schema: 'public', table: 'book' },
  (payload) => {
    console.log('数据发送变化!', payload)
    // 执行自定义的方法
    // ......
  }
)
.subscribe()

supabase.channel('book-channel')
.on(
  'postgres_changes',
  { event: 'UPDATE', schema: 'public', table: 'book' },
  (payload) => {
    console.log('数据发送变化!', payload)
    // 执行自定义的方法
    // ......
  }
)
.subscribe()

supabase.channel('book-channel')
.on(
  'postgres_changes',
  { event: 'DELETE', schema: 'public', table: 'book' },
  (payload) => {
    console.log('数据发送变化!', payload)
    // 执行自定义的方法
    // ......
  }
)
.subscribe()

2，监听时添加额外条件

supabase.channel('book-channel')
.on(
  'postgres_changes',
  { 
    event: 'INSERT', schema: 'public', table: 'book',
    filter: 'price=gt.50'
  },
  (payload) => {
    console.log('数据发送变化!', payload)
    // 执行自定义的方法
    // ......
  }
)
.subscribe()