​细说websocket -Node篇​

news/2025/2/2 1:53:54/

一、WebSocket 协议

1. 概述

websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机。该协议包含一个握手和一个基本消息分帧、分层通过TCP。简单点说，通过握手应答之后，建立安全的信息管道，这种方式明显优于前文所说的基于 XMLHttpRequest 的 iframe 数据流和长轮询。该协议包括两个方面，握手链接（handshake）和数据传输（data transfer）。

2. 握手连接

这部分比较简单，就像路上遇到熟人问好。

Client：嘿，大哥，有火没？（烟递了过去）
Server：哈，有啊，来~ （点上）
Client：火柴啊，也行！（烟点上，验证完毕）

握手连接中，client 先主动伸手：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

客户端发了一串 Base64 加密的密钥过去，也就是上面你看到的 Sec-WebSocket-Key。 Server 看到 Client 打招呼之后，悄悄地告诉 Client 他已经知道了，顺便也打个招呼。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

Server 返回了 Sec-WebSocket-Accept 这个应答，这个应答内容是通过一定的方式生成的。生成算法是：

mask  = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";  // 这是算法中要用到的固定字符串
accept = base64( sha1( key + mask ) );

key 和 mask 串接之后经过 SHA-1 处理，处理后的数据再经过一次 Base64 加密。分解动作：

1. t = "GhlIHNhbXBsZSBub25jZQ==" + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"-> "GhlIHNhbXBsZSBub25jZQ==258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
2. s = sha1(t) -> 0xb3 0x7a 0x4f 0x2c 0xc0 0x62 0x4f 0x16 0x90 0xf6 0x46 0x06 0xcf 0x38 0x59 0x45 0xb2 0xbe 0xc4 0xea
3. base64(s) -> "s3pPLMBiTxaQ9kYGzzhZRbK+xOo="

上面 Server 端返回的 HTTP 状态码是 101，如果不是 101 ，那就说明握手一开始就失败了~

下面就来个 demo，跟服务器握个手：

var crypto = require('crypto');require('net').createServer(function(o){var key;o.on('data',function(e){if(!key){// 握手// 应答部分，代码先省略console.log(e.toString());}else{};});
}).listen(8000);

客户端代码：

var ws=new WebSocket("ws://127.0.0.1:8000");
ws.οnerrοr=function(e){console.log(e);
};

运行代码

上面当然是一串不完整的代码，目的是演示握手过程中，客户端给服务端打招呼。在控制台我们可以看到：

看起来很熟悉吧，其实就是发送了一个 HTTP 请求，这个我们在浏览器的 Network 中也可以看到：

但是 WebSocket协议 并不是 HTTP 协议，刚开始验证的时候借用了 HTTP 的头，连接成功之后的通信就不是 HTTP 了，不信你用 fiddler2 抓包试试，肯定是拿不到的，后面的通信部分是基于 TCP 的连接。

服务器要成功的进行通信，必须有应答，往下看：

//服务器程序
var crypto = require('crypto');
var WS = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
require('net').createServer(function(o){var key;o.on('data',function(e){if(!key){//握手key = e.toString().match(/Sec-WebSocket-Key: (.+)/)[1];key = crypto.createHash('sha1').update(key + WS).digest('base64');o.write('HTTP/1.1 101 Switching Protocols\r\n');o.write('Upgrade: websocket\r\n');o.write('Connection: Upgrade\r\n');o.write('Sec-WebSocket-Accept: ' + key + '\r\n');o.write('\r\n');}else{console.log(e);};});
}).listen(8000);

关于crypto模块，可以看看官方文档，上面的代码应该是很好理解的，服务器应答之后，Client 拿到 Sec-WebSocket-Accept ，然后本地做一次验证，如果验证通过了，就会触发 onopen 函数。

//客户端程序
var ws=new WebSocket("ws://127.0.0.1:8000/");
ws.onopen=function(e){console.log("握手成功");
};

运行代码

可以看到

3. 数据帧格式

官方文档提供了一个结构图

  0                   1                   2                   30 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1+-+-+-+-+-------+-+-------------+-------------------------------+|F|R|R|R| opcode|M| Payload len |    Extended payload length    ||I|S|S|S|  (4)  |A|     (7)     |             (16/64)           ||N|V|V|V|       |S|             |   (if payload len==126/127)   || |1|2|3|       |K|             |                               |+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +|     Extended payload length continued, if payload len == 127  |+ - - - - - - - - - - - - - - - +-------------------------------+|                               |Masking-key, if MASK set to 1  |+-------------------------------+-------------------------------+| Masking-key (continued)       |          Payload Data         |+-------------------------------- - - - - - - - - - - - - - - - +:                     Payload Data continued ...                :+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +|                     Payload Data continued ...                |+---------------------------------------------------------------+

第一眼瞟到这张图恐怕是要吐血，如果大学修改计算机网络这门课应该不会对这东西陌生，数据传输协议嘛，是需要定义字节长度及相关含义的。

FIN      1bit 表示信息的最后一帧，flag，也就是标记符
RSV 1-3  1bit each 以后备用的 默认都为 0
Opcode   4bit 帧类型，稍后细说
Mask     1bit 掩码，是否加密数据，默认必须置为1 （这里很蛋疼）
Payload  7bit 数据的长度
Masking-key      1 or 4 bit 掩码
Payload data     (x + y) bytes 数据
Extension data   x bytes  扩展数据
Application data y bytes  程序数据

每一帧的传输都是遵从这个协议规则的，知道了这个协议，那么解析就不会太难了，下面我就直接拿了次碳酸钴同学的代码。

4. 数据帧的解析和编码

数据帧的解析代码：

 decodeDataFrame Function

数据帧的编码：

 encodeDataFrame Function

有些童鞋可能没有明白，应该解析哪些数据。这的解析任务主要是服务端处理，客户端送过去的数据是二进制流形式的，比如： 

var ws = new WebSocket("ws://127.0.0.1:8000/"); 
ws.onopen = function(){ ws.send("握手成功"); 
};

运行代码

Server 收到的信息是这样的：

一个放在Buffer格式的二进制流。而当我们输出的时候解析这个二进制流：

//服务器程序
var crypto = require('crypto');
var WS = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
require('net').createServer(function(o){var key;o.on('data',function(e){if(!key){//握手key = e.toString().match(/Sec-WebSocket-Key: (.+)/)[1];key = crypto.createHash('sha1').update(key + WS).digest('base64');o.write('HTTP/1.1 101 Switching Protocols\r\n');o.write('Upgrade: websocket\r\n');o.write('Connection: Upgrade\r\n');o.write('Sec-WebSocket-Accept: ' + key + '\r\n');o.write('\r\n');}else{// 输出之前解析帧console.log(decodeDataFrame(e));};});
}).listen(8000);

那输出的就是一个帧信息十分清晰的对象了：

5. 连接的控制

上面我买了个关子，提到的Opcode，没有详细说明，官方文档也给了一张表：

 |Opcode  | Meaning                             | Reference |
-+--------+-------------------------------------+-----------|| 0      | Continuation Frame                  | RFC 6455  |
-+--------+-------------------------------------+-----------|| 1      | Text Frame                          | RFC 6455  |
-+--------+-------------------------------------+-----------|| 2      | Binary Frame                        | RFC 6455  |
-+--------+-------------------------------------+-----------|| 8      | Connection Close Frame              | RFC 6455  |
-+--------+-------------------------------------+-----------|| 9      | Ping Frame                          | RFC 6455  |
-+--------+-------------------------------------+-----------|| 10     | Pong Frame                          | RFC 6455  |
-+--------+-------------------------------------+-----------|

decodeDataFrame 解析数据，得到的数据格式是：

{FIN: 1,Opcode: 1,Mask: 1,PayloadLength: 4,MaskingKey: [ 159, 18, 207, 93 ],PayLoadData: '握手成功'
}

那么可以对应上面查看，此帧的作用就是发送文本，为文本帧。因为连接是基于 TCP 的，直接关闭 TCP 连接，这个通道就关闭了，不过 WebSocket 设计的还比较人性化，关闭之前还跟你打一声招呼，在服务器端，可以判断frame的Opcode：

var frame=decodeDataFrame(e);
console.log(frame);
if(frame.Opcode==8){o.end(); //断开连接
}

客户端和服务端交互的数据（帧）格式都是一样的，只要客户端发送 ws.close()， 服务器就会执行上面的操作。相反，如果服务器给客户端也发送同样的关闭帧(close frame)：

o.write(encodeDataFrame({FIN:1,Opcode:8,PayloadData:buf
}));

客户端就会相应 onclose 函数，这样的交互还算是有规有矩，不容易出错。

二、注意事项

1. WebSocket URIs

很多人可能只知道 ws://text.com:8888，但事实上 websocket 协议地址是可以加 path 和 query 的。

ws-URI = "ws:" "//" host [ ":" port ] path [ "?" query ]
wss-URI = "wss:" "//" host [ ":" port ] path [ "?" query ]

如果使用的是 wss 协议，那么 URI 将会以安全方式连接。 这里的 wss 大小写不敏感。

2. 协议中"多余"的部分（吐槽）

握手请求中包含Sec-WebSocket-Key字段，明眼人一下就能看出来是websocket连接，而且这个字段的加密方式在服务器也是固定的，如果别人想黑你，不会太难。

再就是那个 MaskingKey 掩码，既然强制加密了（Mask为1表示加密，加密方式就是 MaskingKey 与 PayLoadData 进行异或处理），还有必要让开发者处理这个东西么？直接封装到内部不就行了？

3. 与 TCP 和 HTTP 之间的关系

WebSocket协议是一个基于TCP的协议，就是握手链接的时候跟HTTP相关（发了一个HTTP请求），这个请求被Server切换到（Upgrade）websocket协议了。websocket把 80 端口作为默认websocket连接端口，而websocket的运行使用的是443端口。

搜集整理学习路线&笔记icon-default.png?t=N4P3https://mp.weixin.qq.com/s/KQx_eIwdjCj3QdErxKb7ZQ


http://www.ppmy.cn/news/160331.html

相关文章

系统架构设计师笔记第2期：架构风格

系统架构设计师笔记第2期：架构风格

架构风格是在软件系统设计和开发中使用的一种指导原则或模式集合。它描述了系统的整体结构和组织方式，以及各个组件之间的交互方式。架构风格可以帮助开发人员在设计和实现软件系统时做出一些重要的决策，包括如何划分系统的不同模块、如何组织和管理数据…
阅读更多...
thinkpad e320 不能直接装 XP问题

thinkpad e320 不能直接装 XP问题

新本本 thinkpad e320 不能直接装 XP ,而且用 compatibillity 硬盘模式装完也是性能很慢的。解决办法有两个，分别都验证试过。 方法一: 使用 nlite 工具将相应的sata硬盘驱动合并到安装盘里，刻出来后再装. 方法二: (转)ThinkPad E40 0578A59。…
阅读更多...
联想Thinkpad E40电脑经常性重启问题的解决办法

联想Thinkpad E40电脑经常性重启问题的解决办法

E系列电脑普遍存在散热性能差的问题，即便对散热扇等进行了清理，问题依然存在。 上个月，E40电脑出现无法开机的问题，拿到维修店修理后，电脑可正常运行；可是老问题依然存在，即CPU运行压力只要提高…
阅读更多...
Jenkins概念及安装配置教程(二)

Jenkins概念及安装配置教程(二)

如何安装Jenkins？ Jenkins 安装程序也可以作为通用 Java 包 (.war) 使用。如果您将 Jenkins 与 Selenium 一起用于执行跨浏览器测试，我们建议使用 .war 文件，因为您可以通过在非无头模式下在浏览器上执行的自动化测试来见证测试场景的执行。…
阅读更多...
@SentinelResource和openFeign+sentinel 对远程调用熔断降级加规则持久化的具体实 现

@SentinelResource和openFeign+sentinel 对远程调用熔断降级加规则持久化的具体实 现

SentinelResource 自定义全局限流处理类 需求分析/图解 先看前面的一段代码 这个就是上面的Sentinel 热点规则 注意看我们的限制处理方法在本类中代码的耦合度高 阅读性差 不利于程序的扩展 SentinelResource的作用就是解决这个需求将处理方法放到一个类中 GetMapping("…
阅读更多...
【Linux】序列化和反序列化

【Linux】序列化和反序列化

目录 🌈前言🌸1、应用层🌺2、重谈协议🍁3、网络计算器🍡3.1、定制协议🍢3.2、样例代码 🌈前言 这篇文章给大家带来序列化和反序列化的学习！！！ 🌸…
阅读更多...
MacPro无法正常识别电池解决方案

MacPro无法正常识别电池解决方案

MacPro无法正常识别电池解决方案 症状： 1、MacPro突然无法识别电池，开机后，像空调风扇一样呼呼响，且右上角电源图标上有黑色的X，提示无法识别电池 2、将充电器连接MacPro后，充电器灯不亮 解决方案&#x…
阅读更多...
2021容量最大的充电宝是多少？大容量充电宝排行榜

2021容量最大的充电宝是多少？大容量充电宝排行榜

近几年来，随着智能手机越来越普遍了，人们使用的手机广泛性也非常大了，当手机没有电的时候，这时好多人都想到充电宝的重要性。但是现在有人问2021年容量最大的充电宝是多少呢？那么，下面就让我为大家介绍大容…
阅读更多...
最新文章

Copyright @ 2022~2023