本篇文章又要介紹Supabase
好用的實時更新功能,叫做Presence。
會介紹其中的差異部分,還有實際應用情境的差別,還沒有看過上一篇實時更新文章的人可以也可以閱讀。
supabase的實時更新 | Subscribe to channel
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。
Presence 是 Supabase
提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實時狀態共享。
這是個系列功能,包括用戶上線、在線通知以及離線通知等等。藉由整合這些功能,開發者能夠實現讓用戶了解其他使用者的實時狀態變化,讓網頁互動更加分。
換成白話說明,當用戶連線時,用戶會立即接收到相同連線ID下所有上線用戶的資訊,同時其他用戶也會收到關於這位新用戶上線的通知。此外,當有用戶離線或發生意外斷線時,其他用戶也會即時收到通知。
這項功能是建立在Websocket
技術上,而在新建一個全新的supabase
專案時,預設已經包含一個完整的實時更新伺服器,無需額外配置,開箱即用。
這兩項都一樣是Supabase
提供的實時更新功能,其中較大的差異是Broadcast的訊息是由用戶主動發出,同時有在線上的用戶才能接收到訊息。
而Presence的訊息是Supabase
的由伺服器判斷後發送,所以就算其餘用戶沒有主動發送訊息,自己還是能收到其他用戶的資訊。
閱讀完前面的介紹以後,乍看之下相當複雜,但實際上串接的過程並不會太難,官方文件也有提供完整的示範程式碼,馬上就來把Presence功能接在前端。
實作一個顯示在線人員UUID的介面,在線上的人就會顯示在畫面中,用戶離線的時候就把該用戶的資訊移除。
實時更新的起手式就是初始化一個與伺服器的通道。
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
的好用之處。