Supabase的實時更新 | Subscribe to channel

在網頁裡直接監聽資料庫的變化吧！

這個聽起來需要複雜工程的事情，在supabase的幫助之下就可以解決，串接好後只要資料庫中的資料發生變化，supabase會自動把最新資料發送到前端頁面，可以讓使用者即時收到最新資訊，省去重複刷新頁面，提供使用者體驗。

嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。

介紹實時更新

設定實時更新

開啟功能

想要設定實時更新的這個功能必須要先去後台開啟才能使用，預設選項是關閉的，首先需要先在專案後台前往database頁籤的Replication頁面。

在頁面右邊可以看到目前資料實時更新的狀態，重點是右邊的0tables這裡，目前沒有任何表格有開啟這個功能所以是0個，點進去開啟。

點進去以後就把剛剛的表格點擊開啟。

到這裡就完成開啟實時訂閱的設定，接下來就可以在網頁中訂閱表格更新的變化。

串接實時更新

在先前的文章中已經把一些新增修改刪除都串接完成，現在就來訂閱資料的內容更新事件，模仿真實情境中多人協作的時候，某項待辦事項內容更新的狀況。

那首先就是在網頁中新增以下內容，註冊表格更新事件。

supabase.channel('todos').on(
  'postgres_changes',
  {
    event: 'UPDATE',
    schema: 'public',
    table: 'todos'
  },
  (event) => {
    console.log(event)
  }
).subscribe()

在channel裡面填入自己命名的名稱，on接受三個參數，第一個是指定訂閱的事件名稱，前面有說有3大項，這裡就填入postgres_changes，第二個選項是filter的概念，透過指定事件類型、表格名稱的方式，在源頭過濾掉其他不相干的事件以提升程式效能，第三個變數則是callback，在訂閱的事件被觸發的時候要執行的事情在這裡執行。

註冊完成事件以後只要更新資料欄位is_complete的值時，就可以收到更新事件並顯示在console裡面，收到的資料格式如下。

{
  "schema": "public",
  "table": "todos",
  "commit_timestamp": "2023-08-22T08:37:53.091Z",
  "eventType": "UPDATE",
  "new": {
    "id": 6,
    "inserted_at": "2023-08-16T09:46:05.017571+00:00",
    "is_complete": true,
    "task": "task 2",
    "user_id": "9fe1408a-b5d8-4fd8-92aa-0c631e514c29"
  },
  "old": {
      "id": 6
  },
  "errors": null
}

後續只要在事件中先過濾掉使用者自己觸發的資料更新事件就可以完整接收到其他人更新資料的事件。

總結

supabase的實時更新功能打破了過往前後端合作的印象，讓前端能更快而且容易的上手。透過supabase實時更新的功能訂閱資料的變化，可以讓前端很輕鬆地打造出多人聊天室，或是多人協作平台。

有興趣的內容

• Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！
• 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！

有用的資料

• supabase實時更新文件