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");
});