WebSocket：現代 Web 應用程式中即時通訊的支柱

在不斷發展的 Web 應用程式世界中，即時通訊已成為必備功能。從即時通知、線上遊戲、即時訊息到協作編輯，用戶期望無縫、即時的互動。 WebSocket 是一個功能強大的協議，它透過在客戶端和伺服器之間提供全雙工、低延遲的通訊通道來滿足這一需求。

在本部落格中，我們將深入研究 WebSocket，涵蓋其工作原理、優點、實際用例以及基本實施指南。

---

目錄

1. WebSocket 簡介
2. WebSocket 與 HTTP：主要差異
3. WebSocket 的工作原理
4. WebSocket 協定與握手
5. 使用 WebSocket 的優點
6. WebSocket 的實際應用
7. 在 JavaScript 實作 WebSocket
8. WebSocket 的安全問題
9. 結論

---

1. WebSocket簡介

WebSocket 是一種通訊協議，它在客戶端（通常是瀏覽器）和伺服器之間提供持久連接，允許雙向即時資料傳輸。它由 IETF 標準化為 RFC 6455，並受到現代瀏覽器的廣泛支援。

傳統的基於 HTTP 的連線主要是請求-回應，這意味著客戶端發起每次互動。相較之下，WebSocket 實現了開放的通訊線路，允許客戶端和伺服器隨時向對方發送數據，而無需重複重新建立連接的開銷。

---

2. WebSocket 與 HTTP：主要區別

功能 HTTP WebSocket 標題>

Feature	HTTP	WebSocket
Connection Type	Half-duplex	Full-duplex
Communication	Request-response	Bi-directional
Connection Persistence	New connection per request	Persistent connection
Latency	Higher	Lower
Usage Suitability	Static content delivery	Real-time applications

連接類型 半雙工 全雙工 通訊 請求-回應 雙向 連接持久性 每個請求新連線 持久連接 延遲 更高 降低 使用適合性 靜態內容交付 即時應用 表>

HTTP 非常適合靜態網頁和 RESTful 服務，而 WebSocket 在需要持續資料流的應用程式中表現出色，例如直播、通知和線上遊戲。

---

3. WebSocket 的工作原理

WebSocket 協定將現有的 HTTP 連線升級為 WebSocket。初始握手透過 HTTP 進行，之後連接切換協議，允許全雙工資料傳輸。

1. 客戶端請求：客戶端發送 HTTP 請求，其標頭表明希望升級到 WebSocket。
2. 伺服器回應：如果伺服器支援 WebSocket，它會使用接受升級的標頭進行回應。
3. 持久連接：握手後，建立持久的 WebSocket 連接，只要雙方需要，該連接就可以保持打開狀態。

此連接可以以最小的開銷實現高效、持續的通信，這與 HTTP 不同，HTTP 需要為每次交互建立一個新連接。

---

4. WebSocket 協定與握手

WebSocket 協定透過 TCP 運行，並利用連接埠 80 進行常規連接，使用連接埠 443 進行安全連接 (WSS)。

握手過程

這是一個典型的 WebSocket 握手範例：

客戶要求：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13

伺服器回應：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

伺服器回應 101 Switching Protocols 後，WebSocket 連線打開，客戶端和伺服器都可以傳送資料幀。

---

5.使用 WebSocket 的優點

1. 低延遲： WebSocket 透過維護單一開啟的連線來最大限度地減少延遲，減少建立和關閉連線所花費的時間。
2. 效率：與 HTTP 輪詢不同，WebSocket 僅傳輸必要的數據，無需額外的 HTTP 標頭，使其輕量級且頻寬高效。
3. 全雙工通訊： WebSocket 允許客戶端和伺服器之間同時傳輸數據，非常適合即時應用程式。
4. 可擴充性：由於 WebSocket 連接是持久的，它們允許應用程式同時處理許多活動連接，從而更容易擴展。

---

6. WebSocket 的實際應用

WebSocket 是需要即時、雙向通訊的應用程式的首選協定。一些常見的用例包括：

• 即時聊天應用程式： WhatsApp 或 Slack 等應用程式中的即時訊息傳遞。
• 線上遊戲：適用於需要多個玩家之間即時互動的遊戲。
• 金融股票代碼：即時股票或加密貨幣更新。
• 即時運動比分：比分或比賽賽事的持續更新。
• 協作工具： Google Docs 等應用程序，多個使用者可以在同一文件上工作。

---

7.在 JavaScript 實作 WebSocket

這是在 JavaScript 中設定 WebSocket 連線的基本範例：

客戶端 JavaScript

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13

伺服器端（Node.js 範例）

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

---

8. WebSocket 的安全問題

儘管 WebSocket 有其優點，但它也帶來了一些安全挑戰：

• 沒有本機 CSRF 保護： WebSocket 沒有針對跨站點請求偽造 (CSRF) 的內建保護。
• 容易受到 DOS 攻擊：持久連線可以透過淹沒伺服器來進行拒絕服務攻擊。
• 降低風險：實作安全性 WebSocket (WSS) 來加密流量、驗證用戶端要求，並使用具有內建安全功能的 WebSocket 程式庫。

透過使用安全性 WebSocket (WSS)，您可以以與 HTTPS 類似的方式保護 WebSocket 上的資料傳輸。

---

9.結論

WebSocket 改變了我們建立 Web 應用程式以及與 Web 應用程式互動的方式。透過實現全雙工、低延遲通信，WebSocket 已成為創建動態即時應用程式的關鍵。從即時聊天和遊戲到金融行情，WebSocket 保持持續連線的能力開啟了無限的可能性。

以上是WebSocket：現代 Web 應用程式中即時通訊的支柱的詳細內容。更多資訊請關注PHP中文網其他相關文章！