Supabase客戶端間實時更新|Presence in Supabase

閱讀時間約 7 分鐘
Supabase客戶端間實時更新|Presence in Supabase封面圖

Supabase客戶端間實時更新|Presence in Supabase封面圖

本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence
會介紹其中的差異部分,還有實際應用情境的差別,還沒有看過上一篇實時更新文章的人可以也可以閱讀。

supabase的實時更新 | Subscribe to channel

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

Presence的功能解說

Presence 是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實時狀態共享。

這是個系列功能,包括用戶上線、在線通知以及離線通知等等。藉由整合這些功能,開發者能夠實現讓用戶了解其他使用者的實時狀態變化,讓網頁互動更加分。

換成白話說明,當用戶連線時,用戶會立即接收到相同連線ID下所有上線用戶的資訊,同時其他用戶也會收到關於這位新用戶上線的通知。此外,當有用戶離線或發生意外斷線時,其他用戶也會即時收到通知。

這項功能是建立在Websocket技術上,而在新建一個全新的supabase專案時,預設已經包含一個完整的實時更新伺服器,無需額外配置,開箱即用。

Presence和Broadcast

這兩項都一樣是Supabase提供的實時更新功能,其中較大的差異是Broadcast的訊息是由用戶主動發出,同時有在線上的用戶才能接收到訊息。

而Presence的訊息是Supabase的由伺服器判斷後發送,所以就算其餘用戶沒有主動發送訊息,自己還是能收到其他用戶的資訊。




實作Presence

閱讀完前面的介紹以後,乍看之下相當複雜,但實際上串接的過程並不會太難,官方文件也有提供完整的示範程式碼,馬上就來把Presence功能接在前端。

情境解析

實作一個顯示在線人員UUID的介面,在線上的人就會顯示在畫面中,用戶離線的時候就把該用戶的資訊移除。

初始化channel

實時更新的起手式就是初始化一個與伺服器的通道。

import supabase from '../supabase'
import { ref } from 'vue'

const ROOM = 'chat'
const USER_ID = crypto.randomUUID()
const users = ref([])

const channel = supabase.channel(ROOM, {
config: {
presence: {
key: USER_ID
}
}
})

在初始化的同時需要確定連的房間ID,只要所有用戶所連線的房間ID一樣,用戶就會收到同一間房間內其他用戶的資訊。

另一項USER_ID則是用來識別用戶的ID,通常會直接使用supabase的使用者ID,不提供的話supabase則會預設提供一組UUID,這裡因為方便測試所以使用隨機的一組UUID當作識別。

users這個陣列則是用來記錄已上線用戶。

訂閱通知

接下來就要正式開啟連線,接續上方程式撰寫以下內容。

channel
.on('presence', { event: 'join' }, ({ key, newPresences }) => {
newPresences.forEach(user => {
users.value.push({
uuid: user.uuid,
online_at: user.online_at
})
})
})
.on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
leftPresences.forEach(user => {
const userIndex = users.value.findIndex(member => member.uuid === user.uuid)
users.value.splice(userIndex, 1)
})
})
.subscribe(async (state) => {
if (state !== 'SUBSCRIBED') return
await channel.track({
online_at: new Date(),
uuid: USER_ID
})
})

鏈式語法的關係撰寫的有點巢狀,就用條列式說明一下。

  • 最後.subscribe開啟連線,會傳送連線結果的參數,如果成功連線時則發送一則用戶上線的訊息給所有人。
  • 事件join用來接收用戶上線通知,把用戶的資訊塞進users陣列中。
  • 事件leave用來接收用戶離線通知,把該筆用戶移除陣列完成刪除的動作。
自己的資訊會在完成訂閱>發送訊息後收到(join),所以不用手動新增自己的資訊。

取消訂閱

有訂閱就有取消訂閱,完整的順序做好才不會有意外的BUG。

const unsubscribe = async () => {
await channel.untrack()
}

onBeforeUnmount(unsubscribe)

在生命週期onBeforeUnmount的時候取消訂閱狀態,其餘在線用戶就會收到leave事件執行離線處理。

用戶意外的關閉頁面的時候supabase也能夠正確發送leave事件給其餘用戶。

畫面呈現

自己這個用戶進入頁面時即開啟連線,收到自己上線的通知後呈現出使用者的資訊。

自己上線狀態

自己上線狀態

另外開啟一個無痕視窗,進入同一個頁面,即會收到用戶上線的通知並呈現在畫面上。

另一個用戶上線

另一個用戶上線

直接把無痕視窗關閉後,用戶資訊正確被移除,畫面就和上上圖一樣。

總結

本文介紹Presence的基本功能與應用方向,若是能夠把這項功能加在專案裡,會有種畫龍點睛的效果,也再次感受到Supabase的好用之處。

有興趣的內容

有用的資料

avatar-img
6會員
23內容數
沙龍新手
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
技術叢林 的其他內容
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
在前面的文章中已經在supabase中完成了基本的操作,甚至已經完成訂閱即時更新的功能,接著本篇文章要介紹的是如何在supabase裡設定與使用外來鍵,包含如何在客戶端撰寫查詢外鍵的SQL,馬上開始。如果還沒有閱讀實時更新功能文章的話可以點擊這裡去閱讀。 嗨歡迎閱讀我的文章!這是關於Supabase
在網頁裡直接監聽資料庫的變化吧! 這個聽起來需要複雜工程的事情,在supabase的幫助之下就可以解決,串接好後只要資料庫中的資料發生變化,supabase會自動把最新資料發送到前端頁面,可以讓使用者即時收到最新資訊,省去重複刷新頁面,提供使用者體驗。 在supabase中的實時更新總共有3種事件
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
在前面的文章中已經在supabase中完成了基本的操作,甚至已經完成訂閱即時更新的功能,接著本篇文章要介紹的是如何在supabase裡設定與使用外來鍵,包含如何在客戶端撰寫查詢外鍵的SQL,馬上開始。如果還沒有閱讀實時更新功能文章的話可以點擊這裡去閱讀。 嗨歡迎閱讀我的文章!這是關於Supabase
在網頁裡直接監聽資料庫的變化吧! 這個聽起來需要複雜工程的事情,在supabase的幫助之下就可以解決,串接好後只要資料庫中的資料發生變化,supabase會自動把最新資料發送到前端頁面,可以讓使用者即時收到最新資訊,省去重複刷新頁面,提供使用者體驗。 在supabase中的實時更新總共有3種事件
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
使用太多專有名詞可能會導致高昂的溝通成本和客戶的誤解。真正的專業應該以最簡單的方法解釋複雜的概念,這不僅能提高溝通效果,也能展現出對客戶的尊重。透過更淺顯的語言和比喻,藉由物理學家費曼的理念,如何將複雜的概念以簡單易懂的方式表達,讓客戶能夠輕鬆掌握所需資訊,從而增強商業溝通的效率。
Thumbnail
近期,ATFX舉辦了兩場金融研討會,吸引了眾多金融從業人員、客戶和投資者的關註。此次會議是在菲律賓達沃市舉辦,旨在為參與者提供一個交流和學習的平臺,探討金融領域的最新趨勢和發展。
Thumbnail
vocus 簡單溫度計客戶成功專員:協助平台客戶服務相關工作內容,包含客服信件回覆、問題排解與處理 協助建立完整且可規模化、持續優化的客服與客戶成功 SOP;針對客戶常見需求,維運、更新並且撰寫相關使用手冊與說明文件;以數據分析顧客使用成效,找出產品使用上的疑問和痛點..
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
機會與風險 我之前有提過,將區域危機化為商機。 也就是當區域危機發生後,我們若能在做好準備與設立好停損點的情況下看準時機投入該市場,有可能等危機結束後,我們已經打下在正常情況下花費十年也做不到的大片的江山。 可參考這篇文章:「將市場的重大改變視為機會,快速行動」。 但從另外一個角度來看,若我們在該發
Thumbnail
使用者想操作市面上的路由器,能操作的功能都受限於裝置提供商的限制;但若將路由器刷成類似於Linux的OpenWRT文件系統,不但可解決此問題,還有多達1000以上的功能安裝包可供使用者選擇,非常便於使用者開發。 將路由器韌體刷成OpenWRT系統,其實就是在路由器上安裝OpenWRT的概念,常見的方
Thumbnail
大家不知道對於韓國的印象是甚麼?是韓劇裡面男的高大帥,女的白富美嗎? 大家受到韓劇的潛移默化,韓國很多歐爸...
Thumbnail
滿多校友會學弟和學長一直在詢問我的客戶經驗文章呢? 很幸運可以負責一系列【美日韓中歐印】1st tier 客戶, 而且獲得不少好評。 因為催生了客戶經實務驗談系列, 這一系列分成不同區不同客戶屬性, 搭配實際遇到的小故事。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
使用太多專有名詞可能會導致高昂的溝通成本和客戶的誤解。真正的專業應該以最簡單的方法解釋複雜的概念,這不僅能提高溝通效果,也能展現出對客戶的尊重。透過更淺顯的語言和比喻,藉由物理學家費曼的理念,如何將複雜的概念以簡單易懂的方式表達,讓客戶能夠輕鬆掌握所需資訊,從而增強商業溝通的效率。
Thumbnail
近期,ATFX舉辦了兩場金融研討會,吸引了眾多金融從業人員、客戶和投資者的關註。此次會議是在菲律賓達沃市舉辦,旨在為參與者提供一個交流和學習的平臺,探討金融領域的最新趨勢和發展。
Thumbnail
vocus 簡單溫度計客戶成功專員:協助平台客戶服務相關工作內容,包含客服信件回覆、問題排解與處理 協助建立完整且可規模化、持續優化的客服與客戶成功 SOP;針對客戶常見需求,維運、更新並且撰寫相關使用手冊與說明文件;以數據分析顧客使用成效,找出產品使用上的疑問和痛點..
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
機會與風險 我之前有提過,將區域危機化為商機。 也就是當區域危機發生後,我們若能在做好準備與設立好停損點的情況下看準時機投入該市場,有可能等危機結束後,我們已經打下在正常情況下花費十年也做不到的大片的江山。 可參考這篇文章:「將市場的重大改變視為機會,快速行動」。 但從另外一個角度來看,若我們在該發
Thumbnail
使用者想操作市面上的路由器,能操作的功能都受限於裝置提供商的限制;但若將路由器刷成類似於Linux的OpenWRT文件系統,不但可解決此問題,還有多達1000以上的功能安裝包可供使用者選擇,非常便於使用者開發。 將路由器韌體刷成OpenWRT系統,其實就是在路由器上安裝OpenWRT的概念,常見的方
Thumbnail
大家不知道對於韓國的印象是甚麼?是韓劇裡面男的高大帥,女的白富美嗎? 大家受到韓劇的潛移默化,韓國很多歐爸...
Thumbnail
滿多校友會學弟和學長一直在詢問我的客戶經驗文章呢? 很幸運可以負責一系列【美日韓中歐印】1st tier 客戶, 而且獲得不少好評。 因為催生了客戶經實務驗談系列, 這一系列分成不同區不同客戶屬性, 搭配實際遇到的小故事。