浅析WebSocket（1）

发布时间：2022-08-11 文章分类：编程知识 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

简介

WebSocket 是双工的，他支持在客户端和服务器之间互相发送文本或二进制消息流，除此功能以外，它还提供了更为复杂的附加扩展：

值得注意的一点是：WebSocket 不是 HTTP、XHR 或 SSE 的替代品，为了获得最佳性能，利用每种传输的优势至关重要。

WS 和 WSS URL 方案

这两种方案都是WebSocket的自定义方案，WS用于纯文本（即：明文）通讯，WSS用于加密管道通讯。

文本消息和二进制消息

WebSocket比较好的一点就是：无需担心缓冲、解析和重构接收到的数据。

例：如果服务器发送 1 MB 的有效负载，客户端每次只能接收250 kb的有效荷载，那么他会接收四次，当接收完毕后onmessage才会在客户端调用应用程序的回调。

有效负载：我有个长度为5 MB的字节容器（即：一个int类型的数组），我要发送的消息转为字节数组后，长度只有1 MB，那么这1 MB称为有效负载，剩下的将是无效负载

有效载荷：客户端每次只能接收250 kb（即：一个长度为250*1024的字节数组），如果接收到了200 kb的数据，那么200有效载荷 50无效载荷

性能

浏览器接收到一条新消息时，它会自动转换为基于文本数据的 DOMString 对象或二进制数据的 Blob 对象，作为客户端性能提升和优化的唯一方法就是，告诉浏览器将收到的二进制数据转换为ArrayBuffer 而不是Blob

var ws = new WebSocket('wss://example.com/socket');
ws.binaryType = "arraybuffer";

Blob：脱机存在磁盘中或单独存在内存中

Blob 对象表示不可变的原始数据的类文件对象，如果您不需要改动二进制数据（例如我只需要这么一个Blob文件对象），那么这是最好的选择。

ArrayBuffer：可能更有效将数据保存在内存中

如果您需要对二进制数据进行额外的处理，那么ArrayBuffer可能更合适。

ArrayBuffer 是一个结构化的，二进制数据的固定长度容器

关于发送文本和二进制数据

WebSocket 连接成功后，客户端将是一个双向通讯管道，它允许通过同一个 TCP 连接在两个方向上传递消息，发送或接收 UTF-8 和二进制消息。

默认Send方法，接受一个 DOMString 对象，该对象在线路上被编码为 UTF-8，当然也可以用于二进制传输的 ArrayBuffer、ArrayBufferView 或 Blob 对象之一。

但是请注意，后一种二进制的方式只是为了方便API，在网络层面中，WebSocket的数据帧（即：发送的数据包），会通过单个字节位标记为二进制或文本，因此，如果应用程序想要使用其他类型的信息，那么双方必须约定一种新的机制来通讯该数据。

关于Send方法

Send方法是异步的，将提供的数据由客户端排队发出，立即返回结果，这里的立即返回结果不代表你的信息已经发送完了，真正的发送完成是要监控当前浏览器的排队数据量

var ws = new WebSocket('wss://example.com/socket');
ws.onopen = function () {
  // 当应用更新时触发
  subscribeToApplicationUpdates(function(evt) {
    // 如果待发送的字节数为0
    if (ws.bufferedAmount == 0)
      // 发送下一次请求
      ws.send(evt.data);
  });
};

所有 WebSocket 消息都按照它们在客户端排队的确切顺序进行传递！！！

大量的排队消息，或者单个大消息都将延迟其后面排队的消息的传递——队列头阻塞！

解决方案：

应用程序应该密切关注每种类型的消息如何以及何时在套接字上排队！

子协议协商

WebSocket 协议的默认消息格式只有两种，文本数据和二进制数据，以便客户端和服务端可以有效的对其进行编码，如果不属于这两种，消息内容将是不透明的，服务端和客户端将会不认识，导致无法解释其内容。

WebSocket 与 HTTP 或 XHR请求不同，它们通过Header传递额外的信息，而WebSocket没有这样的协议，因此如果想要获取额外的数据信息，那么可以通过下面的方式：

原始的WebSocket提供了子协议协商API来解决这个问题，最开始连接时，客户端可以告诉服务器他支持的协议，例：

var ws = new WebSocket('wss://example.com/socket',
                       ['appProtocol', 'appProtocol-v2'])

如果子协议协商成功，则在 onopen处触发回调，应用程序可以查询WebSocket实例上的protocol属性来确定服务器选择的协议，如果协商不成功，即服务器不支持，则代表WebSocket协商是不完整的，将调用onerror回调。

WebSocket的协议

WebSocket协议由两个高级组件组成：

WebSocket 协议是一个功能齐全的独立协议，可以在浏览器之外使用。话虽如此，它的主要应用程序是作为基于浏览器的应用程序的双向传输。

二进制框架层

WebSocket 使用了一种自定义的二进制帧格式，它将每个应用程序消息拆分为一个或多个帧，将它们传输到目的地，重新组装它们，最后在收到整个消息后通知接收者。

我们了解一下WebSocket的帧是怎么运行的？

我们先来看一下帧的内容：

帧是一个32位数据包（即：32-bit，一次处理4字节，1字节8位），我们来由浅入深一下：

比如a在ASCII编码中代表着97，那么97也就是所谓的字节，然后再通过toString(2)得到01100001，这是一个8 bit(即：8位)的位数据，所谓的帧就是这样的一堆二进制（也就是前面提到的8 bit）组成的。

现在我们来看一下服务器发送给客户端的原始数据，服务器发送给客户端的信息是两个简单的字符：aa

10000001 00000010 01100001 01100001

这是四字节，你可以尝试用后两个字节 01100001 01100001 去二进制转换字符串（但是在转换时您需要将它拼接起来，0110000101100001），你将得到信息aa

那么前面两个字节中包含着什么呢？

只是在目前的例子中他是占用了两个字节，其他情况下请参考数据内容

我们来看第一个字节（10000001）

我们接下来拆分第二个字节（00000010）

向后可能会出现的所属于框架的字节

掩码、中介执行缓存中毒攻击

掩码是为了防止中介执行缓存中毒攻击，该攻击方式重点在于中介，此处的中介也就是一个代理服务器，假设他是一个负载均衡代理，那么他将负责转发流量，我们知道WebSocket和HTTP并不相同，WebSocket发送到是原始字节，这可以使其发送任何内容，比如模仿一个http请求：

soc.send(`
GET /script.js HTTP/1.1
HOST:恶意站点
`)

当这样的一个消息，发送至中介服务器时，中介服务器并不知道这是一个WebSocket的数据封包，它将会被认为是HTTP请求，这将转发到恶意站点，此时如果有相应的缓存设置，那么接下来，访问该安全站点 script.js 文件的无辜用户，将会获取到恶意站点的 script.js 文件。

而掩码将会将 WebSocket 发送出去的数据进行屏蔽（加密），屏蔽完的数据他将不是明文的，而是看上去像是乱码的数据。

至此，WebSocket的基本原理就是这样，以上全文均为本人个人理解，如果有误还请各位dai佬们指出。

接下来我会抽空将C#编写的简易WebSocketClient做成博客发出来。

第一次发博客，轻点喷，在此求求各位大佬了~

标签 , ,