本文從 WebSocket 基礎(chǔ)概念出發(fā)，介紹在實際開發(fā)中從本地聯(lián)調(diào)到部署上線的流程以及注意事項姻檀，讓 WebSocket 小白以最小成本應用到項目中命满。
一、WebSocket 基礎(chǔ)
1绣版、什么是 WebSocket
WebSocket 是一種網(wǎng)絡(luò)傳輸協(xié)議胶台，可在單個TCP連接上進行全雙工通信
2、對比 http
- 兩者都位于應用層杂抽，都依賴TCP協(xié)議
- WebSocket 協(xié)議一般以ws://或wss://開頭
- HTTP 不支持全雙工通信诈唬，一般使用輪詢方式
3、WebSocket 基礎(chǔ)用法
兼容性：
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
一個簡單的 Demo
(視頻詳見原文）
客戶端可以在控制臺 -network-ws下看到 WebSocket 消息
注意請求頭里的幾個關(guān)鍵字段
- 請求地址為 ws:// 或 wss:// 開頭
- Connection 必須設(shè)置 Upgrade缩麸，表示客戶端希望連接升級
- Upgrade字段必須設(shè)置 WebSocket铸磅，表示希望升級到 WebSocket 協(xié)議。
- 如果服務(wù)端支持 websocket杭朱，會在響應頭中返回相同的信息阅仔，并且連接狀態(tài)置為101（協(xié)議切換成功
二、如何在項目中使用 WebSocke
下面以一個實際項目為例弧械，展示如何實現(xiàn)一個WebSocket接口八酒，包含開發(fā)->聯(lián)調(diào)->部署→上線整個流程。
1刃唐、開發(fā)環(huán)境
將上面的 Demo簡單封裝一下羞迷，在項目中調(diào)用如下：
配置 webpack 代理
說明：
- WebSocket接口要和http接口分開
- 域名使用location.host并且通過反向代理轉(zhuǎn)發(fā)，目的是保留cookie和頭信息画饥。
2衔瓮、心跳檢測&斷線重連
為了保證連接穩(wěn)定，需要考慮一些異常情況抖甘，如網(wǎng)絡(luò)波動導致連接中斷报辱，服務(wù)器超時等。
心跳檢測即客戶端定時向服務(wù)端發(fā)送心跳消息单山，保持連接穩(wěn)定碍现；
斷線重連即發(fā)送消息前，檢測連接狀態(tài)米奸，若連接中斷昼接，嘗試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 ports 80 and 443, thus allowing the use of existing firewall rules.
location /websocket {
proxy_pass http://xx.xxx.xx.xx; # websocket服務(wù)器逐工。不用管 ws://
proxy_http_version 1.1; # http協(xié)議切換
proxy_set_header Host $host; # 保留源信息
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade; # 請求協(xié)議升級，如果生產(chǎn)環(huán)境有報400錯誤漂辐，可以嘗試將值設(shè)置為websocket
proxy_set_header Connection $connection_upgrade;
}
三泪喊、其他
sockiet.io
sockiet.io是基于 Node 的實時應用程序框架，對比原生 WebSocket髓涯，封裝了更多通用能力袒啼，且在不支持WebSocket的瀏覽器上，可以降級為輪詢方式通信纬纪。
優(yōu)點：成熟蚓再，開箱即用，兼容性好包各。
缺點：體積較大摘仅，前后端必須統(tǒng)一，即后端使用 socket.io 則前端必須使用socket.io-client 對應问畅。
作者：vivo 商業(yè)化大前端團隊
