Supabase的實時更新 | Subscribe to channel

更新於 發佈於 閱讀時間約 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實時更新的功能訂閱資料的變化,可以讓前端很輕鬆地打造出多人聊天室,或是多人協作平台。

有興趣的內容

有用的資料

為什麼會看到廣告
avatar-img
6會員
23內容數
沙龍新手
留言
avatar-img
留言分享你的想法!
鼻爾蓋茲-avatar-img
發文者
2023/10/05
Supabase的Webhooks|Webhooks in Supabase提及了這篇文章,趕快過去看看吧!
鼻爾蓋茲-avatar-img
發文者
2023/09/28
Supabase客戶端間實時更新|Presence in Supabase提及了這篇文章,趕快過去看看吧!
鼻爾蓋茲-avatar-img
發文者
2023/09/08
Supabase的關聯表格、外來鍵 | Foreign Key提及了這篇文章,趕快過去看看吧!
技術叢林 的其他內容
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
你可能也想看
Google News 追蹤
Thumbnail
靈感用盡、鍵盤不再響,盯著喜歡、分享、留言的數字,心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品,要為創作者打氣! 🚨「創作者打氣包」 最懂創作者的vocus,為創作者打造 ✨ 打氣包,包什麼?!四件道具挺創作者 一、【打氣復活卷】 專屬你的打氣小語,成功登記免費
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
白話一點的意思是:「從公開的資料(API),抓下來放在自己的資料庫(PostgresDB),然後再用網頁(Web.app)的方式呈現出來」
Thumbnail
※ 為什麼我們需要 Transaction? 當我們談到 Transaction(交易)時,指的是一組不可分割的 SQL 操作。這些操作結果只能成功或失敗,以確保資料庫的一致性和完整性。Transaction 是資料庫操作中的一個「邏輯單位」,包含多個操作步驟。如果其中任何一個步驟失敗,整個 Tr
Thumbnail
已經存在在table裡面的那些record做更新。 ※ 語法 UPDATE [LOW_PRIORITY] [IGNORE] table_name SET column_name1 = expr1, column_name2 = expr2, … [WHERE
Thumbnail
※ 為什麼需要 Subquery? 當⼀個任務需要多個 Query 完成任務,可以使⽤ Subquery 把多個 Query 合併成⼀個 Query。 當我們在進行SQL查詢時,每次查詢都需要在Web Server和資料庫之間來回傳遞資料。這個過程會產生網路延遲,特別是當兩者之間的物理距離較遠時
Thumbnail
KSQL引擎, 串流形式的SQL? 聽了應該霧煞煞吧! 想像一下傳統的SQL, 是不是一個指令一個動作, 每發送一個指令之後就必須等到查詢/寫入…動作皆完成之後才回應, 然而在Streaming的應用上這顯然不太可行, 每分每秒都有資料流入的情境下, 資料的狀態都在變化, 假設我們一個指令一個動作,
儲存庫 (Repository) 是檔案(File)的儲存區域。 在版本控制中,儲存庫是包含所有檔案的資料夾[1]。 每次改動檔案,你都可以選擇要不要儲存。 而那些有被處存的改動,就被稱為「提交 Commit」[2]。 而當一個儲存庫有多個開發者(Developer)在貢獻,
Thumbnail
在進行Electron 專案時,後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中,前端的操作經常會更動到 db的資料,此時 Git 就會追蹤到 db 的變化,因此前端在推送檔案到遠端 repo 前,會需要將其移出 Git 追蹤範圍,該怎麼做?
※ 什麼是資料庫反正規化?優缺點是什麼? ※ 什麼是資料庫反正規化? 資料庫反正規化(Database Denormalization)是一種將資料庫中的資料再次加工,將資料從正規化狀態轉換為非正規化狀態的過程。在反正規化中,我們通常會將數據合併到一個或少量表中,以提高查詢性能或簡化數據模型。
Thumbnail
本篇說明如何利用Kubernetes特色,將PostgreSQL DB以HA的架構來提供服務,並說明相關的實作流程與說明。
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
靈感用盡、鍵盤不再響,盯著喜歡、分享、留言的數字,心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品,要為創作者打氣! 🚨「創作者打氣包」 最懂創作者的vocus,為創作者打造 ✨ 打氣包,包什麼?!四件道具挺創作者 一、【打氣復活卷】 專屬你的打氣小語,成功登記免費
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
白話一點的意思是:「從公開的資料(API),抓下來放在自己的資料庫(PostgresDB),然後再用網頁(Web.app)的方式呈現出來」
Thumbnail
※ 為什麼我們需要 Transaction? 當我們談到 Transaction(交易)時,指的是一組不可分割的 SQL 操作。這些操作結果只能成功或失敗,以確保資料庫的一致性和完整性。Transaction 是資料庫操作中的一個「邏輯單位」,包含多個操作步驟。如果其中任何一個步驟失敗,整個 Tr
Thumbnail
已經存在在table裡面的那些record做更新。 ※ 語法 UPDATE [LOW_PRIORITY] [IGNORE] table_name SET column_name1 = expr1, column_name2 = expr2, … [WHERE
Thumbnail
※ 為什麼需要 Subquery? 當⼀個任務需要多個 Query 完成任務,可以使⽤ Subquery 把多個 Query 合併成⼀個 Query。 當我們在進行SQL查詢時,每次查詢都需要在Web Server和資料庫之間來回傳遞資料。這個過程會產生網路延遲,特別是當兩者之間的物理距離較遠時
Thumbnail
KSQL引擎, 串流形式的SQL? 聽了應該霧煞煞吧! 想像一下傳統的SQL, 是不是一個指令一個動作, 每發送一個指令之後就必須等到查詢/寫入…動作皆完成之後才回應, 然而在Streaming的應用上這顯然不太可行, 每分每秒都有資料流入的情境下, 資料的狀態都在變化, 假設我們一個指令一個動作,
儲存庫 (Repository) 是檔案(File)的儲存區域。 在版本控制中,儲存庫是包含所有檔案的資料夾[1]。 每次改動檔案,你都可以選擇要不要儲存。 而那些有被處存的改動,就被稱為「提交 Commit」[2]。 而當一個儲存庫有多個開發者(Developer)在貢獻,
Thumbnail
在進行Electron 專案時,後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中,前端的操作經常會更動到 db的資料,此時 Git 就會追蹤到 db 的變化,因此前端在推送檔案到遠端 repo 前,會需要將其移出 Git 追蹤範圍,該怎麼做?
※ 什麼是資料庫反正規化?優缺點是什麼? ※ 什麼是資料庫反正規化? 資料庫反正規化(Database Denormalization)是一種將資料庫中的資料再次加工,將資料從正規化狀態轉換為非正規化狀態的過程。在反正規化中,我們通常會將數據合併到一個或少量表中,以提高查詢性能或簡化數據模型。
Thumbnail
本篇說明如何利用Kubernetes特色,將PostgreSQL DB以HA的架構來提供服務,並說明相關的實作流程與說明。
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為