<aside> 🔍

這 step 不寫新 code、不開 PR，純粹搞懂一件事：「為什麼別人在另一支手機發問題，你的網頁不用 F5 也會跳出來？」

做完之後你能講出 Realtime 是什麼、跟一般網站差在哪、Supabase 怎麼讓它運作。

</aside>

目標

  1. 講得出 Realtime vs 單次 fetch 的差別
  2. 講得出 Supabase Realtime 的三層架構分別在做什麼
  3. 完成驗證練習，用實驗證明 Realtime 是 DB 層的事

1. Realtime vs 單次 fetch — 差在哪？

image.png

一般網站（單次 fetch）

你打開一個論壇 → 前端跟 server 要一次資料 → 顯示。

別人發新文章你不知道，要按 F5 / 下拉重整才看到。

[打開頁面] → [前端 fetch /api/posts] → [拿到資料] → [顯示]
                                                      ↓
                                         [別人發新文章 → 你看不到]
                                                      ↓
                                                 [手動 F5]

Realtime（這堂課的 ClassWall）

你打開 ClassWall → 前端跟 server 要一次資料**+ 開一條長連線**。

別人發新問題那一刻，你的網頁立刻收到、自動跳出來。

[打開頁面] → [前端 fetch + 開 WebSocket] → [顯示]
                                                ↓
                              [別人發新問題 → server 主動推給你 → 自動更新]

ClassWall 親身實測

  1. 電腦打開你的 xxx.vercel.app
  2. 手機打開同一個網址
  3. 在手機發新問題 → 電腦畫面自動跳出新問題（不用 F5）