websocket 进行通讯时,可以选择采用字符串或者字节流的传输模式。但在发送与接收时,需要考虑数据的分包,即分成一个个请求与响应消息。无论是采用哪种传输模式,都不免要遇到这个问题。
采用字符串传输时,接收端可以将每次接收到的字符串拼接到一起,再检测是否出现了某一特定子串,比如连续两个换行,即可将一个长的字符串分隔成一个个的请求或响应消息。这种处理方式比较简单且有效。但这里,介绍另一种模式,即传输字节流。
首先考虑下分包的问题,一般分为消息头与消息体。出于简单目的,消息头里只存放一个消息体的长度,消息体为字节数组。
确定了数据包格式接下来可以写实现代码了,首先是连接:
- var socket;
- var uri = "ws://" + window.location.host + "/push"; // 示例地址
- function Connect(uri) {
- socket = new WebSocket(uri);
- socket.binaryType = "arraybuffer";
- socket.onopen = function(e) {
- console.log("已连接至服务器");
- };
- socket.onclose = function(e) {
- console.log("链接已关闭");
- };
- socket.onmessage = function(e) {
- doReceive(e.data);
- };
- socket.onerror = function(e) {
- console.log("出现错误");
- };
- }
这里将 socket 变量定义为公共的,因为后续的发送方法会用到这个变量。默认 JavaScript 里的 WebSocket 传输是采用字符串模式的,采用 UTF-8 编码,通过将 binaryType 属性设置为 arraybuffer 来使用字节流传输。
当发生 onmessage 事件时代表接收到数据,保存在参数 e.data 里。每一次接收都可能接收到一个完整的消息或部分消息,我们通过一个 doReceive 方法来进行消息数据包的拆分。代码如下:
- var receive = [];
- var length = 0;
- function doReceive(buffer) {
- receive = receive.concat(Array.from(new Uint8Array(buffer)));
- if (receive.length < 4) {
- return;
- }
- length = new DataView(new Uint8Array(receive).buffer).getUint32(0);
- if (receive.length < length + 4) {
- return;
- }
- var bytes = receive.slice(4, length + 4);
- doSomething(bytes);
- receive = receive.slice(length + 4);
- };
其中 receive 作为接收缓冲区,每次接收到数据时先将其存到该缓冲区里。之后检查其长度是否大于等于 4 字节,即上文定义的消息头长度。若满足条件,则将其作为 Uint32 值读取,代表消息体长度。之后检查缓冲区是否大于消息头加消息体长度,若满足则读取消息体,之后得到的 bytes 字节数组即为完整的消息体。最后,用剩余字节重置缓冲区以备下一次读取。
其中 buffer 参数为 ArrayBuffer 类型,其代表原始的字节数组,本身是无意义的。JavaScript 通过一个个视图来解释这些字节。Uint8Array 即是其中一种视图,它将 ArrayBuffer 中的字节作为 8 位无符号整数来对待,正好一字节对应一个 uint8 整数。类似的还有 Uint16Array,它将 ArrayBuffer 中的字节作为 16 位无符号整数来对待,则每两位对应一个 uint16 整数。
而 DataView 是 JavaScript API 提供的一种视图,他将 ArrayBuffer 中的数据作为网络流对待,它采用大端编码,可以用它来读取或写入数据。这里我们用它读取了一个 Uint32 的值。
接下来是发送方法,代码如下:
- function doSend(bytes) {
- var buffer = new ArrayBuffer(bytes.length + 4);
- var view = new DataView(buffer);
- view.setUint32(0, bytes.length);
- for (var i = 0; i < bytes.length; i++) {
- view.setUint8(i + 4, bytes[i]);
- }
- socket.send(view);
- };
其中参数 bytes 是已经编码过的字节数组,这里通过 DataView 视图将其存储到 ArrayBuffer 对象里,以备发送。按照上文约定,需先设置 Uint32 型的消息体长度,再设置消息体。
最后,本文按约定的消息格式来进行请求与响应消息的传输,消息体为不定长度的字节序列。其本身是无意义的。我们可以通过 API 提供的 Uint16Array、Uint32Array 等视图将其作为整数值序列,也可以自我实现其内容的解释方式。
比如参考 这里 将其作为采用 UTF-8 编码的字符串。之后可再将字符串打印或反序列化为 JSON 对象等。
来源: http://www.bubuko.com/infodetail-2442487.html