本文从 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 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;
}

三、其他

sockiet.io

sockiet.io是基于 Node 的实时应用程序框架，对比原生 WebSocket，封装了更多通用能力，且在不支持WebSocket的浏览器上，可以降级为轮询方式通信。

**优点：**成熟，开箱即用，兼容性好。

**缺点：**体积较大，前后端必须统一，即后端使用 socket.io 则前端必须使用socket.io-client 对应。

作者：vivo 商业化大前端团队