時間過好快，竟然也已經來到30天了，代表暑假也告一個段落，我要進入另一個新的階段。這30天每天都會至少超前寫一篇，到中間一度很想放棄，但還是堅持下來了，學到很多技術名詞和知識，現在看到一些技術文都發現我有看過這些東西了，或者說變得更能看懂了！

今天想要來搞懂我一直都沒有很懂的WebSocket~

WebSocket 是什麼？

WebSocket 是一種網路通訊協定，它能在客戶端（瀏覽器）和伺服器之間建立一個持久性的雙向連線

只要建立連線，客戶端與伺服器就能即時地互相傳送訊息，不需要像 HTTP 那樣每次都重新發送請求

簡單來說：

• HTTP：單次請求 - 回應（Request / Response）
• WebSocket：持久連線，雙向即時通訊

WebSocket 怎麼運作？

1. Handshake (握手階段)
   • 一開始還是透過 HTTP/HTTPS 請求，向伺服器發送一個 Upgrade 請求
   • 如果伺服器支援 WebSocket，就會回應並升級協議
   • 從這一刻開始，連線就不再是 HTTP，而是 WebSocket
2. 持久連線 (Persistent Connection)
   • 建立後，伺服器和客戶端可以在任何時間互相傳送資料
   • 不需要重新建立 TCP 連線

圖片來源： https://websocket.org/_astro/websocket-vs-http.be03ced1_sWP4f.webp

為什麼需要 WebSocket？

• HTTP 適合處理「請求 - 回應」的模式，但不適合 即時更新 的場景
  • 如果要用 HTTP 模擬即時功能，通常會用以下方法：
    • Polling（輪詢）：每隔 X 秒發一次請求問伺服器「有新資料嗎？」 → 浪費資源
    • Long Polling：發送請求後，伺服器會等到有資料才回傳 → 但還是有延遲，且效率不高
• WebSocket 則能解決：
  • 伺服器可以主動推送資料給客戶端
  • 保證低延遲，適合需要「秒級或毫秒級」更新的場景

WebSocket 的應用

• 即時聊天室（LINE、Slack、Discord）
• 線上遊戲（多人對戰同步位置）
• 即時股價 / 匯率更新
• 協同編輯工具（Google Docs 即時同步）
• IoT 裝置數據即時回傳

找資料的時候也看到這個 WebRTC 技術，稍微筆記一下

WebRTC 是什麼？

WebRTC (Web Real-Time Communication，網頁即時通訊)

WebRTC 和 WebSocket 主要不同在於 WebRTC 支援 P2P （點對點傳輸）

簡單來說：

• WebSocket 偏向「Client ↔ Server」通訊
• WebRTC 偏向「Client ↔ Client」的即時影音 / 資料通訊

WebRTC 怎麼運作？

1. 訊號交換 (Signaling)
   • A 和 B 兩個瀏覽器要通訊，先要知道彼此存在
   • 這裡常用 WebSocket / HTTP 來交換連線描述 (SDP)與網路資訊 (ICE Candidates)
2. 建立 P2P 連線
   • 透過 STUN Server 找出彼此的真實 IP/Port
   • 如果在防火牆或 NAT 後面，就需要 TURN Server 中繼傳輸
3. 媒體 / 資料傳輸
   • 一旦建立成功，就可以直接透過 P2P 交換資料
   • 可傳輸：
     • 音訊（語音通話）
     • 視訊（視訊會議）
     • 任意資料（檔案、聊天訊息）

圖片來源：https://ithelp.ithome.com.tw/upload/images/20200916/201295215GMkWCk7vE.png

WebRTC的詳細技術有點複雜，有興趣可以看這篇👇

https://hackmd.io/@LiangC/HkOyNszZa#Signaling

參考資料

https://medium.com/enjoy-life-enjoy-coding/javascript-websocket-讓前後端沒有距離-34536c333e1b

https://vocus.cc/article/627280c5fd89780001c71e35

https://ithelp.ithome.com.tw/m/articles/10237030