websocket 实现原理和技术方案
websocket
WebSocket 是 HTML5 开始提供的一种浏览器与服务器进行全双工通讯的网络技术，用以取代轮询与长连接，使客户端浏览器具备像 C/S 框架下桌面系统的即使通讯能力
websocket协议是建立在tcp协议之上的，建立连接需要三次握手。
websocket协议的连接过程：
- 客户端连接服务器（TCP / IP），三次握手，建立了连接通道
- 客户端发送一个http格式的消息（特殊格式），服务器也响应一个http格式的消息（特殊格式），称之为http握手
- 客户端与服务器完成握手，开始双向通信
- 客户端或服务器断开，通道销毁
特点
- 建立在tcp协议之上的，建立连接需要三次握手
- 通信格式是二进制，可以传输任意数据
- 通信格式是http协议，可以传输任意数据
因为 websocket 是基于（TCP / IP）协议，所以我们的代码示例使用nodejs的net模块。我们的示例代码只演示了websocket的握手过程，并没有实现完整的通信。如果想要实现完整的通信，需要深入理解WebSocket协议的工作原理，包括消息帧的解析、心跳机制、分片消息的传输等等。可以参考以下内容
What is Sec-WebSocket-Key for?
10.3. Attacks On Infrastructure (Masking)
How does websocket frame masking protect against cache poisoning?
What is the mask in a WebSocket frame?
代码示例
客户端
// 创建websocket连接
const ws = new WebSocket('ws://127.0.0.1:8989')
// 监听连接成功事件
ws.onopen = function () {
console.log('连接成功');
}
// 监听接受消息事件
ws.onmessage = function (e) {
console.log('接受消息');
}
// 监听连接关闭事件
ws.onclose = function () {
console.log('连接关闭');
}
// 监听连接失败事件
ws.onerror = function () {
console.log('连接失败');
}
服务器
const net = require('net');
const server = net.createServer((socket) => {
console.log("收到客户端的连接");
socket.once('data', (chunk) => {
const hearder = parseRequestHeader(chunk.toString('utf-8'));
const crypto = require("crypto");
const hash = crypto.createHash("sha1");
hash.update(
hearder['Sec-WebSocket-Key'] + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
);
const key = hash.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);
})
});
});
server.listen(5008);
/**
* 解析请求头
* @param {string} hearderStr
*/
function parseRequestHeader(hearderStr = '') {
const hearders = hearderStr.split('rn');
hearders.shift();
return Object.fromEntries(hearders
.filter(hearder => hearder)
.map(hearder => {
const i = hearder.indexOf(":");
return [hearder.substring(0, i), hearder.substring(i + 1).trim()];
}));
};
websocket 扩展知识点
websocket 连接服务端，三次握手建立通道，客户端还需要发送一个特殊格式的http请求。
该格式包含 http1.1 协议升级 和 websocket 的请求头。
GET ws://127.0.0.1:5500/public/index.html/ws HTTP/1.1
Host: 127.0.0.1:5500
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Upgrade: websocket
Origin: http://127.0.0.1:5500
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Sec-WebSocket-Key: Re+vR4i5EJmWPU3H7horvg==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key 和 Sec-WebSocket-Extensions 为 websocket 请求头
Upgrade: websocket 告诉服务端 将 http1.1 协议升级为 websocket 协议
Connection: Upgrade 告诉服务端 连接升级
http1.1 协议升级
HTTP/1.1 协议提供了一种使用 Upgrade (en-US) 标头字段的特殊机制，这一机制允许将一个已建立的连接升级成新的、不相容的协议
这个机制是可选的；它并不能强制协议的更改（通常来说这一机制总是由客户端发起的）。如果它们支持新协议，实现甚至可以不利用 upgrade，在实践中，这种机制主要用于引导 WebSocket 连接。
因为 Upgrade 是一个逐跳（Hop-by-hop）标头，它还需要在 Connection 标头字段中列出
如果服务器决定升级这次连接，就会返回一个 101 Switching Protocols 响应状态码，和一个要切换到的协议的标头字段 Upgrade
HTTP/2 明确禁止使用此机制；这个机制只属于 HTTP/1.1
websocket 请求头
-
Sec-WebSocket-Extensions 用于指定一个或多个请求服务器使用的协议级 WebSocket 扩展。允许在一个请求中使用多个 Sec-WebSocket-Extension 标头；结果跟在一个标头文件中包含了所有列出的扩展一样。
-
Sec-WebSocket-Key 该标头向服务器提供确认客户端有权请求升级到 WebSocket 的所需信息。当不安全（HTTP）客户端希望升级时，可以使用该标头，以提供一定程度防止滥用的保护。密钥的值是使用 WebSocket 规范中定义的算法计算的，不提供安全性。
-
Sec-WebSocket-Version 指定客户端支持的 WebSocket 版本。
-
Sec-WebSocket-Protocol 指定你希望用的一个或者多个 WebSocket 协议。
响应标头
-
Sec-WebSocket-Version 如果服务器无法使用指定版本的 Websocket 协议进行通信，它将响应一个错误（例如 426 Upgrade Required），该错误在它的标头中包含一个 Sec-WebSocket-Version 标头，其中包含支持的逗号分隔列表的协议版本。如果服务器确实支持请求的协议版本，则响应中不包含 Sec-WebSocket-Version 标头
-
Sec-WebSocket-Accept 服务器端响应的标头，用于确认客户端请求。如果提供了 Sec-WebSocket-Key 标头，那么将通过以下流程计算此标头的值：首先取密钥的值，然后将该值与“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”进行拼接，再取拼接后的字符串的 SHA-1 哈希。最后对得出的 20 字节的值进行 base64 编码以获得该属性的值。