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

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

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

supabase的實時更新 | Subscribe to channel

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

Malte Helmhold on Unsplash

聊天室聊天

Presence的功能解說

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

換成白話說明，當用戶連線時，用戶會立即接收到相同連線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的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！

有用的資料

• Realtime: Multiplayer Edition
• Supabase官方實作即時聊天室
• Presence | Supabase Docs