2023-08-22|閱讀時間 ‧ 約 5 分鐘

Supabase的實時更新 | Subscribe to channel

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

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

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

介紹實時更新

在supabase中的實時更新總共有3種事件可以監聽，分別是廣播、聊天室和資料庫變化，這三種事件是主要的大項目，內部也細分成多種更精確的事件，可以按照應用程式的類型監聽變化，本文會介紹最常使用的資料庫變化。

設定實時更新

開啟功能
想要設定實時更新的這個功能必須要先去後台開啟才能使用，預設選項是關閉的，首先需要先在專案後台前往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實時更新的功能訂閱資料的變化，可以讓前端很輕鬆地打造出多人聊天室，或是多人協作平台。

有興趣的內容

有用的資料

分享至

成為作者繼續創作的動力吧！

即時、安全、強大：探索 Supabase 的無限可能

追蹤

Supabase的實時更新 | Subscribe to channel

介紹實時更新

設定實時更新

串接實時更新

總結

有興趣的內容

有用的資料

作者的相關文章

技術叢林的其他內容

你可能也想看

發表回應

Supabase的實時更新 | Subscribe to channel

介紹實時更新

設定實時更新

串接實時更新

總結

有興趣的內容

有用的資料

作者的相關文章

技術叢林 的其他內容

你可能也想看

發表回應

技術叢林的其他內容