Supabase的實時更新 | Subscribe to channel

鼻爾蓋茲

更新於 2023/12/11發佈於 2023/08/22閱讀時間約 4 分鐘

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

這個聽起來需要複雜工程的事情，在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 的無限可能

技術叢林

6會員

23內容數

沙龍新手

留言0

查看全部

發表第一個留言支持創作者！

技術叢林的其他內容

Supabase裡查詢、新增、修改、刪除資料

在supabase裡可以直接從客戶端讀取資料庫中的資料，在設定好RLS的前提之下，更可以對資料庫直接進行新增、修改、刪除等操作。先進到後台選擇SQL Editor，可以來到SQL編輯器的頁面，如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕，可以開啟一個空白頁面開始編輯

#supabase #database #專案

Supabase的用戶管理系統by API

在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫，並且已經測試成功。本篇文章就來導覽一下supabase-js的文件，還有在頁面裡面示範會員管理系統的登入和登出，以及在客戶端的操作。嗨

#supabase #database #開發

Supabase的JavaScript Client Library串接實作

Supabase的串接方式很多元，其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件，該套件已經把所有REST和REALTIME的API功能包好，可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什

#supabase #database #開發

Supabase的身份認證和會員管理

Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統，只需要使用Supabase提供的SDK，不管是身份認證、登入、登出、會員管理，處理TOKEN等功能都包在裡面處理到好，相當實用。嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功

#supabase #database #開發

Supabase的Row Level Security(資料列安全原則)

是時候討論資料庫安全性的時候！還記得上一篇Supabase的資料庫和表格文章中，建立一個新的表格時有把一個RLS的按鈕打開，這篇文章就是簡單的說明一下RLS是什麼，以及RLS如何設定等等範例。嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，

#supabase #database #專案

Supabase的資料庫和表格

嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL，在PostgreSQL中又是有著各種表格，以及各種欄位所構成，接下來搭配介面介紹。如果想要對Post

#supabase #database #專案