WebSocket入门及使用指南

Posted 2023-03-16

参考技术A 在浏览器与服务器通信间，传统的 HTTP 请求在某些场景下并不理想，比如实时聊天、实时性的小游戏等等，

其面临主要两个缺点：

其基于 HTTP 的主要解决方案有：

可以看到，基于 HTTP 协议的方案都包含一个本质缺陷 —— 「被动性」，服务端无法下推消息，仅能由客户端发起请求不断询问是否有新的消息，同时对于客户端与服务端都存在性能消耗。

WebSocket 是 html5 中提出的新的网络协议标准，其包含几个特点：

在浏览器中使用 Websocket 非常简单，在支持 Websocket 的浏览器中会提供了原生的 WebSocekt 对象，其中对于消息的接收与数据帧处理在浏览器中已经封装好了。
以下将用一个简单的例子解释如何使用 WebSocekt；
浏览器中提供了原生类 WebSocket ，使用 new 关键字实例化它：

接收两个参数：

WebSocket 类提供了一些常量表示连接状态：

实例化对象中可以监听到以下事件：

首先触发 open 事件，之后每次发送数据服务端都会回复数据，因此触发了 message 事件，如果触发 close 事件；这里最后一次发送之后未收到服务端回复也是因为客户端立即断开了连接；websocket.send()是发送信息方法

对 WebSocket 实例监听事件有两种方式，这里以 message 事件为例：

在 message 回调函数中得到 MessageEvent 类型参数 e ，我们需要的数据可以通过 e.data 获取；

需要注意的一点是：不论服务端与客户端，其接受到的数据都是序列化后的字符串（当然也有 ArrayBuffer|Blob 类型数据），很多时候我们需要解析处理数据，比如 JSON.parse(e.data) ；

由于网络环境复杂，某些情况会出现断开连接或者连接出错，需要我们在 close 或者 error 事件中监听非正常断开并重连；

由于一些原因在 error 时浏览器并不会响应回调事件，因此稳妥的做法还需要在 open 之后开启一个定时任务去判断当前的连接状态 readyState ，在出现异常情况下尝试重连；

websocket规范定义了心跳机制，一方可以通过发送ping（opcode 0x9）消息给另一方，另一方收到ping后应该尽可能快的返回pong（0xA）。

心跳机制是用于检测连接的对方在线状态，因此如果没有心跳，那么无法判断一方还在连接状态中，一些网络层比如 nginx 或者浏览器层会主动断开连接，

在 javascript 中，WebSocket 并没有开放 ping/pong 的 API ，虽然浏览器自带了心跳处理，然而不同厂商的实现也不尽相同，因此需要在我们开发时候与服务端约定好一个自实现的心跳机制；

比如浏览器中，检测到 open 事件后，启动一个定时任务，每次发送数据 0x9 给服务端，而服务端返回 0xA 作为响应；

实践下来，心跳的定时任务一般是相隔 15-20 秒发送一次。

前文说到，Websocket 是建立与 TCP 之上，那么其与 HTTP 协议有和关系呢？

Websocket 连接分为建连阶段与连接阶段，在建立连接阶段借助于 HTTP ，而在连接阶段则与 HTTP 无关。

从浏览器的 Network 中，找到 ws 连接，可以看到：

这是一个标准的 HTTP 请求，相比于我们常见的 HTTP 请求协议，请求头中多了几个字段：

重点请求首部意义如下：

响应头中：

可以看到其返回状态码为 101 ，表示切换协议；
Upgrade 与 Connection 用于回复客户端表示已经切换协议成功；
Sec-WebSocket-Accept 字段与 Sec-WebSocket-Key 相对应，用于验证服务的正确性；

当通过 HTTP 建立连接握手后，接下来则是真正的 Websocket 连接了，其基于 TCP 收发数据，Websocket 封装并开放接口。

在 HTTP 协议中，很多时候为了加密与安全需要使用 HTTPS 请求（HTTP + TCL）；
相应的，在 Websocket 协议中，也是可以使用加密传输的 —— wss ，比如 wss://localhost:8080 。

使用的也是与 HTTPS 一样的证书，在这里一般是交由 Nginx 等服务层去做证书处理。

本文参考文章: https://qiutc.me/post/websocket-guide.html