如何在公司項目中使用 WebSocket— 入門實戰指南

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

1、WebSocket 基礎

一、什麼是 WebSocket

WebSocket 是一種 網絡傳輸協議，可在單個 TCP鏈接上進行 全雙工通訊

二、對比 http

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

三、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（協議切換成功

2、如何在項目中使用 WebSocke

下面以一個實際項目爲例，展現如何實現一個WebSocket接口，包含開發->聯調->部署→上線整個流程。

一、開發環境

將上面的 Demo簡單封裝一下，在項目中調用以下：

配置 webpack 代理

說明：

• WebSocket接口要和http接口分開
• 域名使用location.host而且經過反向代理轉發，目的是保留cookie和頭信息。

二、心跳檢測&斷線重連

爲了保證鏈接穩定，須要考慮一些異常狀況，如網絡波動致使鏈接中斷，服務器超時等。

心跳檢測即客戶端定時向服務端發送心跳消息，保持鏈接穩定；

斷線重連即發送消息前，檢測鏈接狀態，若鏈接中斷，嘗試n次鏈接；

封裝以下：

也可選擇第三方庫處理。

三、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 ports 80 and 443, 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;
}

3、其餘

sockiet.io

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

優勢：成熟，開箱即用，兼容性好。

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

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