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的好用之處。
有興趣的內容
- Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！
- 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！
有用的資料
