Supabase的Webhooks｜Webhooks in Supabase

Supabase的Webhooks｜Webhooks in Supabase封面圖

前面文章有說明過訂閱資料庫的更新事件，讓前端畫面能夠收到更新資訊即時反應在用戶面前，那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。

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

Webhooks是什麼？

這裡簡單說明一下Webhooks，一般來說是由前端主動呼叫後端API，取回資料，Webhooks則是由後端伺服器觸發某件事情後主動去呼叫另一個後端伺服器或是客戶端伺服器。

如果是對於Webhooks還想要深入研究的話可以自行先google一下概念，接下來就直接進入正題。

Webhooks in Supabase

事前準備工作

在新增Webhook之前，需要準備一個用來接收Webhook資料的URL位置，我這裡就用ngrok直接在本機開啟一個對外的URL，用來接收由Webhook發出的資料。

開啟Webhooks功能

每個Supabase的專案預設都有Webhooks這個功能，預設是關閉的，所以直接先去把這項功能開啟。

從Database目錄進去以後選Webhooks頁籤，即可開啟Webhooks的頁面。

首先會先看到尚未啟用的狀態，直接把webhooks啟用起來。

新增Webhook

啟用成功後會出現這個面板，直接點擊新增一個Webhook。

這個面板是新增Webhooks的頁面，主要的內容依序說明。

• Name：這個Webhooks的名字，名字自己看所以就取一個可以辨識的名字。
• Table：這個地方和實時更新的時候有點相似，需要選擇觸發這個Webhook的表格和事件，這裡以展示方便就選擇Update更新事件。

supabase的實時更新 | Subscribe to channel

• Type of webhook：選擇這個Webhook的類型，這裡就直接選HTTP Request。
• URL：填寫要觸發的伺服器URL位置，這裡就填入準備好的對外URL。

到這裡基本的設定就完成了，可以點擊右下角Create webhook的按鈕新增Webhook。

另外在安全上的考量可以在最下面HTTP Patameters的地方新增自己用來辨識的內容，以確保伺服器端收到的Webhook通知是受信任的來源。

新增完成以後就在目錄的地方看到剛剛新增的內容，如果要修改的話可以點擊右邊三個點的按鈕進去修改。

接收webhook通知

目標設定

這次和前幾次有些不同，需要寫伺服器端的程式來處理接收Supabase的Webhook資料。

當伺服器端收到webhook通知後，我設定了一個Telegram機器人，將資料庫變動即時通知給我，讓我能馬上知道資料庫的變化情況。

撰寫Controller

撰寫伺服器的部分不在這次的主軸所以就用簡單說明的方式。

我在本地端開啟一個express的伺服器，寫一個POST的API端口接收webhook的通知。

以下是我的Controller基本內容。

const webhooksHandler = async (req, res) => {
    console.log(req.body)
  
    res.status(204).send('')
}

export {
    webhooksHandler
}

先撰寫基本內容以後去Supabase的資料庫測試一下是否能夠正確接收到Webhook的資料。

回去後台介面直接對表格todos手動變更裡面的資料，等待幾秒後就看到本地接收到一個webhook通知，裡面的資料如下。

{
    type: 'UPDATE',
    table: 'todos',
    record: {
        id: 9,
        task: '更新時間asd',
        likes: 0,
        user_id: '9fe1408a-b5d8-4fd8-92aa-0c631e514c29',
        updated_at: '2023-10-03T09:41:54.718275+00:00',
        inserted_at: '2023-09-08T03:36:11.697173+00:00',
        is_complete: false
    },
    schema: 'public',
    old_record: {
        id: 9,
        task: '更新時間asd',
        likes: 0,
        user_id: '9fe1408a-b5d8-4fd8-92aa-0c631e514c29',
        updated_at: '2023-10-03T09:41:19.463512+00:00',
        inserted_at: '2023-09-08T03:36:11.697173+00:00',
        is_complete: true
    }
}

可以看到Webhook通知的資料是滿完整的，把變更前後的資料格式都有附上可供比對。

能成功接收到webhook後就沒啥大問題了，把剩下機器人的部分撰寫完成吧！

import bot from '../bot.js'

const webhooksHandler = async (req, res) => {
    const {
        type,
        record: {
            id,
            is_complete
        }
    } = req.body
    
        const USER_ID = process.env.USER_ID

        await bot.sendMessage(USER_ID, `事件名稱: ${type}, ID: ${id}, 是否完成: ${is_complete}`)
  
        res.status(204).send('')
}

export {
      webhooksHandler
}

回去後台再手動更改表格內的資料以觸發webhook，就可以在telegram機器人上收到通知。

總結

Supabase本身內建了Webhook功能，這使得專案可以應用在更多不同的場景中。

官方也提供了一支影片，介紹如何使用Webhook功能以及如何與Stripe整合，非常實用。

在未來，專案的規模逐漸擴大的情況下，Webhook可以成為提升專案功能的一個關鍵工具。

有興趣的內容

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