Supabase的Webhooks|Webhooks in Supabase

閱讀時間約 7 分鐘
Supabase的Webhooks|Webhooks in Supabase封面圖

Supabase的Webhooks|Webhooks in Supabase封面圖

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

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

Webhooks是什麼?

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

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

Webhooks in Supabase

事前準備工作

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

開啟Webhooks功能

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

webhook的目錄位置

webhook的目錄位置

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

啟用webhook的面板

啟用webhook的面板

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

新增Webhook

新增webhook的面板

新增webhook的面板

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

新增webhook資訊的面板

新增webhook資訊的面板

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

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

supabase的實時更新 | Subscribe to channel

webhook資訊面板下半部分

webhook資訊面板下半部分

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

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

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

新增完成後在webhook就可以看到內容

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

接收webhook通知

目標設定

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

當伺服器端收到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機器人上收到通知。

成功收到的telegram機器人通知

成功收到的telegram機器人通知

總結

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

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


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

有興趣的內容

6會員
23內容數
沙龍新手
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
原紫短文025:您是否尋找列用AI提升寫作效率的有效策略?您是否尋找列用AI提升寫作效率的有效策略? 在當今AI時代,我們可能都對如何提升寫作效率感到困擾。你是否曾想過,AI工具或許可以提供絕佳的解決方案?在這篇文章中,我們將透過三個重要面向來探討:利用AI寫作工具、維持人類獨特性,以及實踐提升寫作效率的方法。 在寫作過程中,我們可以透過
Thumbnail
2023-06-21
【超過30歲後,如何以閱讀與寫作的平衡,鍛鍊心靈的3個關鍵】 身心平衡是每個超過30歲的人必須要維護的。 透過閱讀與寫作的平衡,你可以鍛鍊你的心靈,練習更好的消化與吸收知識。 在這裡,我將分享我如何利用閱讀與寫作這兩種方式鍛鍊心靈的三大關鍵。 關鍵1 - 讀寫的平衡:就如同飲食與運動的平衡,閱讀讓我們吸收知識,而寫作則如同運動,將所學知識消化與吸收。如果只有吸
Thumbnail
2023-06-21
十七年的轉變十七年,足夠這個世界及一個國際大都會作很多轉變⋯⋯
【想要辭職了嗎?掌握工作自由度,抵抗職業枯竭的3個實踐策略】工作中,你能決定哪些部分呢? 如果一個人在工作沒什麼自由度,沒有決策權,那麼很快就會職業枯竭,有能力做但沒興趣。 我從事的學術產業,就非常需要熱情,來避免職業枯竭。下面是我掌握工作自由度,抵抗職業枯竭的3個實踐策略: 策略1 - 善用自己的決策權,打破工作中的枯燥:你必須完成老闆交代的事情,但是「完
Thumbnail
2023-06-21
台股遇壓量縮,走勢仍是進攻態勢!陸股無法突破壓力,就是拉回的走勢!台股量縮震盪,守在5日線上,走勢仍是攻擊型態! 櫃買留下墓碑線,但上影線是多方進攻的痕跡,加上實質走勢是日出走勢,多方將持續進攻! 陸股持續拉回,近期的觀盤重點,下檔支撐不能跌破!
Thumbnail
時光任意門-騎機車的時候 一開始我是最反對騎機車載妳的,不過就像其他事情一樣,如果很多事情都堅持意見的話,生活大概不會過的太平順,但至少希望可以好好的使用安全帽和安全帶,好好的小心道路狀況。 以往也曾聽聞父母親從小到大都不讓孩子騎機車的事例,當時並不覺得有這個必要,甚至覺得這些父母也太誇張了。現在倒是可以體會這些父母的用心
Thumbnail
2019-11-29
台灣港人速寫日記#92 香港人的新生活 新里程飛機劃過長空,萬里無雲的晨光下,就是那個久別了的香港!飛機上幾排椅子都無人,作為全球最繁忙的航線,都因為警暴而嚇怕遊客,不敢再來香港玩了。冷冷清清的機場暢通無阻,輕鬆過關,提取行李,天爸終於回到香港了! 這幾個月改變了香港人,由以往只看實利、貪小便宜的香港人,變成舉世皆知的抗爭民族⋯⋯
Thumbnail
2019-11-28
不愛吃你的飯=種族歧視?我聽過更難聽的話語BBC中文網刊登了一篇報導關於一則對印度料理批評的推特所引起的種族歧視爭議(原文『美國移民:美食保衛戰引發種族歧視大辯論』),事件起於美國國際關係學教授湯姆·尼科爾斯在推特上了嫌棄印度料理後收到各方從尼科爾斯自身品味到種族歧視等批評與討論,事後尼科爾斯承認自己只吃過美國及英國當地印度餐廳裡的餐點、
Thumbnail
2019-11-28
大人的部落格寫作課[高級篇] - 數位行銷、廣告收入優化與進階經營策略不管做任何事,熱情很重要,興趣很重要,但有實質的回饋可以走更遠,像是錢。用寫文章來賺錢的方式有很多種,在網站上放廣告、接業配、加入聯盟行銷等。
Thumbnail
大人的部落格寫作課[初級篇] - 考試作文沒拿過高分,不代表你不會寫文章說到寫文章,多數人第一個反應不出以下幾種,「我作文很爛欸,國高中作文很少及格」、「我文筆不好,寫出來的東西一點都不吸引人」、「我有想過寫部落格,但不知道要寫什麼」。這三種反應有點像考試遺毒還沒解:不必再接受考試摧殘了,卻也忘了將考試分數的枷鎖卸下來;好像不考作文了,就不會再書寫。
Thumbnail