本文從 WebSocket 基礎概念出發，介紹在實際開發中從本地聯調到部署上線的流程以及注意事項，讓 WebSocket 小白以最小成本應用到專案中。

一、WebSocket 基礎

1、什麼是 WebSocket

WebSocket 是一種網路傳輸協議，可在單個TCP連線上進行全雙工通訊

2、對比 http

• 兩者都位於應用層，都依賴TCP協議
• WebSocket 協議一般以ws://或wss://開頭
• HTTP 不支援全雙工通訊，一般使用輪詢方式

3、WebSocket 基礎用法

相容性：

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

一個簡單的 Demo

(視訊詳見原文）

客戶端可以在控制檯 -network-ws下看到 WebSocket 訊息

注意請求頭裡的幾個關鍵欄位

1. 請求地址為 ws:// 或 wss:// 開頭
2. Connection 必須設定 Upgrade，表示客戶端希望連線升級
3. Upgrade欄位必須設定 WebSocket，表示希望升級到 WebSocket 協議。
4. 如果服務端支援 websocket，會在響應頭中返回相同的資訊，並且連線狀態置為101（協議切換成功

二、如何在專案中使用 WebSocke

下面以一個實際專案為例，展示如何實現一個WebSocket介面，包含開發->聯調->部署→上線

1、開發環境

將上面的 Demo簡單封裝一下，在專案中呼叫如下：

配置 webpack 代理

說明：

• WebSocket介面要和http介面分開
• 域名使用location.host並且通過反向代理轉發，目的是保留cookie和頭資訊。

2、心跳檢測&斷線重連

為了保證連線穩定，需要考慮一些異常情況，如網路波動導致連線中斷，伺服器超時等。

心跳檢測即客戶端定時向服務端傳送心跳訊息，保持連線穩定；

斷線重連即傳送訊息前，檢測連線狀態，若連線中斷，嘗試n次連線；

封裝如下：

也可選擇第三方庫處理。

3、Nginx配置

The WebSocket protocol is different from the HTTP protocol, but the WebSocket handshake is compatible with HTTP, using the HTTP Upgrade facility to upgrade the connection from HTTP to WebSocket.

This allows WebSocket applications to more easily fit into existing infrastructures.

For example, WebSocket applications can use the standard HTTP ports80 and443, thus allowing the use of existing firewall rules.

location /websocket {
    proxy_pass http://xx.xxx.xx.xx; # websocket伺服器。不用管 ws://
    proxy_http_version 1.1; # http協議切換
        
    proxy_set_header Host $host; # 保留源資訊
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade; # 請求協議升級，如果生產環境有報400錯誤，可以嘗試將值設定為websocket
    proxy_set_header Connection $connection_upgrade;
}

三、其他

sockiet.io

sockiet.io是基於 Node 的實時應用程式框架，對比原生 WebSocket，封裝了更多通用能力，且在不支援WebSocket的瀏覽器上，可以降級為輪詢方式通訊。

優點：成熟，開箱即用，相容性好。

缺點：體積較大，前後端必須統一，即後端使用socket.io則前端必須使用socket.io-client 對應。

作者：vivo 商業化大前端團隊