如何在公司项目中使用 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 商业化大前端团队