websocket 介绍

1，前端如何实现即时通讯

在 websocket 协议出现之前，前端想实现即时通讯，只能通过下面2种方式：

• 短轮询 short polling
• 长轮询 long polling

短轮询

客户端每隔一小段时间，就向服务器请求一次，询问有没有新消息。

实现起来很简单，只需要开启一个计时器不断发送请求即可。但缺点比较明显：

• 会产生大量无意义的请求。
• 会频繁打开关闭 TCP 连接。
• 实时性并不高。

长轮询

为了解决短轮询的问题，出现了长轮询。原理如下图：

虽然长轮询让每次请求和响应都变的有意义，但依然存在一些问题：

• 客户端长时间收不到响应会导致超时，从而主动断开和服务器的连接。

  可以在 ajax 请求因为超时而结束时，立即重新发送请求到服务器。虽然会让之前的请求无意义，但比短轮询好多了。

• 因为客户端可能【过早的】请求了服务器，所以服务器不得不挂起这个请求，直到新消息出现。
  这会让服务器长时间占用资源却没有做任何事情。

2，websocket

websocket 协议 HTML5 带来的新协议，相对于 http，它是一个持久连接的协议，它利用 http 协议完成握手，然后通过 TCP 连接通道发送消息，使用 websocket 协议可以实现服务器主动推送消息的能力。

从上图可以看出：

• websocket 也是建立在 TCP 协议上的，利用的是 TCP 的全双工通信能力。
• 使用时会经过2个阶段，握手阶段和通信阶段。
• 维持 TCP 连接也是需要耗费资源的，所以看实际需求。

2.1，握手

websocket 协议内容比较复杂，这里只介绍下握手协议。（下面会有例子说明）

当客户端需要和服务器使用 websocket 进行通信时，首先会使用HTTP协议完成一次特殊的请求-响应，这一次的请求-响应就是websocket握手。

在握手阶段，首先由客户端向服务器发送一个请求，请求地址格式如下：

# 使用 HTTP
ws://mysite.com/path
# 使用 HTTPS
wss://mysite.com/path

请求头：

Connection: Upgrade /* 协议需要升级，不使用 HTTP了 */
Upgrade: websocket /* 协议升级为 websocket */
Sec-WebSocket-Version: 13 /* websocket协议版本为 13 */
Sec-WebSocket-Key: YWJzZmFkZmFzZmRhYw== /* 连接的 key */

服务器如果同意，响应如下消息：

HTTP/1.1 101 Switching Protocols /* 切换协议，101表示切换协议 */
Connection: Upgrade /* 协议升级 */
Upgrade: websocket /* 升级到 websocket */
Sec-WebSocket-Accept: ZzIzMzQ1Z2V3NDUyMzIzNGVy /* 重新编码后的 key */

Sec-WebSocket-Accept 是将 Sec-WebSocket-Key 使用特殊的算法重新编码生成的。浏览器使用它来确保响应与请求相对应。

握手完成后，后续的消息收发不再使用 HTTP，任何一方都可以主动发消息给对方。

2.2，握手过程举例

客户端：

<button>发送数据到服务器</button>
<script>// 创建一个websocket，同时，发送连接到服务器const ws = new WebSocket("ws://localhost:3002"); ws.onopen = function () {// http 握手完成console.log("连接已建立");};ws.onclose = function () {console.log("通道关闭");};document.querySelector("button").onclick = function () {ws.send("客户端数据123");};// ws.close(); //客户端主动断开连接
</script>

服务器：

const net = require("net");const server = net.createServer((socket) => {console.log("收到客户端的连接");socket.once("data", (chunk) => {// 解析请求报文，const httpContent = chunk.toString("utf-8");let parts = httpContent.split("\r\n");parts.shift();parts = parts.filter((s) => s).map((m) => {const i = m.indexOf(":");return [m.slice(0, i), m.slice(i + 1).trim()];});// 变成对象的形式，为了取出请求头 Sec-WebSocket-Keyconst headers = Object.fromEntries(parts);const crypto = require("crypto"); // 加密模块const hash = crypto.createHash("sha1");// 创建 Sec-WebSocket-Accept，后面是一个随机的 guid。const key = hash.update(headers["Sec-WebSocket-Key"] + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").digest("base64");// 响应，注意格式。socket.write(`HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: ${key}`);// 接收客户端的消息socket.on("data", (chunk) => {console.log(chunk.toString("utf-8"));});});
});server.listen(3002);

注意数据格式为 Buffer 需要转码，因为 websocket 的消息需要特定的格式，数据量较大时会切片传输。但每个切片到达的顺序可能不一样，所以为了保证将接收到的数据，能按照顺序拼接，所以数据格式为 Buffer 二进制的形式。

2.3，socket.io

一般使用 websocket 大多都会使用它 socket.io

测试使用版本 v4.7.2，消息格式都是字符串而不是 Buffer，所以不用转码了。

浏览器：访问地址 http://localhost:5500/index.html

<button>发送数据到服务器</button>
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
<script>const socket = io("http://localhost:3002");document.querySelector("button").onclick = function () {socket.emit("to-server", "来自浏览器的消息");};// 监听服务器的消息，约定事件名 to-clientsocket.on("to-client", (chunk) => {console.log(chunk);});// 服务器断开连接时触发socket.on("disconnect", () => {console.log("closed");});
</script>

服务器：写法参考

启动后的服务器地址：http://localhost:3002，所以会发生跨域。解决

const Koa = require("koa");
const { createServer } = require("http");
const { Server } = require("socket.io");const app = new Koa();
const httpServer = createServer(app.callback());
const io = new Server(httpServer, {cors: {origin: "http://localhost:5500",},
});io.on("connection", (socket) => {// 当有一个新的客户端连接到服务器成功之后，触发的事件console.log("新的客户端连接进来了");// 监听客户端发送的消息，约定事件为 to-serversocket.on("to-server", (chunk) => {// 监听客户端的msg消息console.log(chunk);});let count = 0;const timer = setInterval(function () {// 每隔两秒钟，发送一个消息给客户端，约定事件为 to-clientsocket.emit("to-client", `来自服务器的第${count++}次消息`);}, 2000);socket.on("disconnect", () => {clearInterval(timer);console.log("closed");});
});// 监听端口
httpServer.listen(3002, () => {console.log("server listening on 3002");
});

效果展示：

3，websocket 对比 http 的优势

当页面中需要观察实时数据的变化（比如聊天、k 线图）时，过去我们往往使用两种方式完成（短轮询，长轮询）

无论是哪一种方式，都暴露了 http 协议的弱点，即响应必须在请求之后发生，服务器是被动的，无法主动推送消息。而让客户端不断的发起请求又会占用了资源。

websocket 的出现就是为了解决短轮询，长轮询的缺点，它利用 http 协议完成握手之后，就可以与服务器建立持久的连接，服务器可以在需要的时候主动推送消息给客户端，这样占用的资源最少，同时实时性也最高。

---

以上。