用戶 ──→ Server A ──✕──→ Server B
         有新資料         還是舊資料

你的應用程式
  │
  ├─ 結構化資料 ──→ 資料庫（PostgreSQL）
  │   用戶名稱、訂單...     ↑ 存 URL 指向 Blob
  │                          │
  └─ 大檔案 ──────→ Blob Storage（S3）
      圖片、影片...    回傳一個公開 URL

import boto3

s3 = boto3.client('s3')

# 上傳檔案到 S3
s3.upload_file('photo.jpg', 'my-bucket', 'images/photo.jpg')
#               ↑ 本地檔案     ↑ 儲存桶名稱    ↑ 存在哪個路徑

# 產生一個臨時下載連結（1 小時後過期）
url = s3.generate_presigned_url('get_object',
    Params={'Bucket': 'my-bucket', 'Key': 'images/photo.jpg'},
    ExpiresIn=3600)
# ↑ 這個 URL 可以直接給用戶下載，不需要經過你的 server
Code language: PHP (php)

沒有 CDN：
台灣用戶 ──→ 跨太平洋 ──→ 美國 Server ──→ 跨太平洋回來
                                           延遲：200ms+

有 CDN：
台灣用戶 ──→ 台灣 CDN 節點（已快取）
                延遲：20ms

第一次請求：
用戶 ──→ CDN 節點（沒有快取）──→ 向原始 Server 拿 ──→ 快取起來 ──→ 回給用戶

第二次請求（同一地區的用戶）：
用戶 ──→ CDN 節點（有快取了）──→ 直接回給用戶 ✓

上傳流程：
用戶上傳圖片 ──→ 你的 Server ──→ 存到 S3（Blob Storage）

讀取流程：
用戶瀏覽圖片 ──→ CDN 節點 ──→（如果沒快取）──→ 從 S3 拿
                   ↓
              直接回給用戶（超快）

一般 HTTP（像寄信）：
Client: 「有新消息嗎？」 ──→ Server: 「沒有」
Client: 「有新消息嗎？」 ──→ Server: 「沒有」
Client: 「有新消息嗎？」 ──→ Server: 「有！給你」
↑ 要一直問（polling），很浪費

WebSocket（像打電話）：
Client ←──建立連線──→ Server
         （保持通話中）
Server: 「有新消息了！」 ──→ Client    ← server 主動推
Client: 「收到，我要回覆」 ──→ Server  ← client 也能隨時說

// 建立 WebSocket 連線（ws:// 是 WebSocket 協定）
const socket = new WebSocket('ws://example.com/chat');

// 連線成功時
socket.onopen = () => {
    socket.send('你好！');  // 發訊息給 server
};

// 收到 server 的訊息時
socket.onmessage = (event) => {
    console.log('收到：', event.data);
};

// 連線斷開時
socket.onclose = () => {
    console.log('斷線了');
};
Code language: JavaScript (javascript)

from fastapi import WebSocket

@app.websocket("/chat")       # 這不是一般的 HTTP 路由，是 WebSocket 路由
async def chat(ws: WebSocket):
    await ws.accept()          # 接受連線
    while True:                # 持續監聽（不會結束）
        msg = await ws.receive_text()   # 等用戶說話
        await ws.send_text(f"你說了：{msg}")  # 回覆
Code language: PHP (php)

沒有 Webhook（你一直問）：
你的 Server: 「付款成功了嗎？」 ──→ Stripe: 「還沒」
你的 Server: 「付款成功了嗎？」 ──→ Stripe: 「還沒」
你的 Server: 「付款成功了嗎？」 ──→ Stripe: 「成功了！」
↑ 每秒問一次，浪費資源（polling）

有 Webhook（Stripe 通知你）：
你的 Server: （做自己的事...）
Stripe: 「付款成功了！」 ──→ POST https://你的server.com/webhook/stripe
↑ 事情發生時才通知，高效
Code language: JavaScript (javascript)

from fastapi import Request

@app.post("/webhook/stripe")         # Stripe 會打這個網址
async def stripe_webhook(request: Request):
    payload = await request.json()    # 拿到 Stripe 送來的資料

    event_type = payload['type']      # 看是什麼事件

    if event_type == 'payment_intent.succeeded':
        order_id = payload['data']['object']['metadata']['order_id']
        await update_order_status(order_id, 'paid')   # 更新訂單狀態

    return {"status": "ok"}           # 回覆 Stripe：我收到了
Code language: PHP (php)

import hmac
import hashlib

def verify_stripe_signature(payload, signature, secret):
    expected = hmac.new(
        secret.encode(),
        payload.encode(),
        hashlib.sha256
    ).hexdigest()
    return hmac.compare_digest(expected, signature)
    # ↑ 用 Stripe 給你的 secret 驗證這個請求真的來自 Stripe
Code language: PHP (php)

用戶上傳圖片
  │
  ├─ 圖片存到 Blob Storage（S3）        ← #22
  │
  ├─ 透過 CDN 分發給全球用戶              ← #23
  │
  ├─ 多台 Server 之間的資料同步           ← #21 CAP 定理
  │   要選 CP 還是 AP？
  │
  ├─ 即時通知好友「上傳了新照片」          ← #24 WebSocket
  │   透過持續連線推送
  │
  └─ 觸發第三方圖片辨識服務               ← #25 Webhook
      辨識完成後回調通知你的 server
Code language: CSS (css)

必看懂（面試和實務都常見）：
- CAP 定理的三選二邏輯 — 會被問
- CDN 的運作原理 — 每個 Web 應用都在用
- WebSocket 和 Webhook 的差異 — 很容易搞混

知道就好（遇到再查）：
- S3 的 ACL 權限細節
- CDN 的 cache invalidation 策略
- WebSocket 的心跳機制和自動重連實作