记一次websocket开发实践（ArrayBuffer）

时间：2024-12-08 19:44:15

这里只是简单记录一下，不足之处请多指正。

在这次开发中,我们把要发送的消息分为文字类型消息和文件类型消息,文件类型消息包括图片,文件,音频,视频等,所有的消息都会通过new FileReader()方法转换成arraybuffer类型，然后发送给服务器，为了方便服务器区分消息类型同时做对应处理，我们需要在这个arraybuffer数组里添加一些说明信息，比如消息类型标识，接收人等，具体规则如下：

####文字类型消息

消息类型标识：13，占两个字节；
接收人code长度：，占两个字节；
接收人code: toCode，占个字节；
定义好规则后就是组装数据，首先定义一个新的arraybuffer对象，其长度是：消息类型标识13(2字节)+(2字节)+toCode(个字节)+msgArrayBuffer（个字节），代码如下：

  let msgArrayBuffer = str2ab(textMsg);
  let toCodeArrayBuffer = str2ab(toCode);
  let sendArrayBuffer = new ArrayBuffer(4 +  + ); 
  let sendUint8 = new Uint8Array(sendArrayBuffer);
  let headUint16 = new Uint16Array(sendArrayBuffer , 0, 2);//使用双字节引用，取两位（相当于四个字节）
  headUint16[0] = 13;//消息类型
  headUint16[1] = ;//   
  let msgUint8 = new Uint8Array(msgArrayBuffer);//使用单字节引用
  for (let i = 0; i < ; i++) {//循环将文本消息写要发送的arraybuffer中
       sendUint8[i + 4 + ] = msgUint8[i];
  }
  (sendUint8)//发送
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

服务器接收到数据后会按照定好的规则解析，首先取1、2两个字节，用来区分消息类型，再取3、4两个字节用来获取toCode的长度，然后从第5个字节开始到toCode长度的位置，取toCode字符串，最后从toCode长度往后一个字节的位置开始到末尾就是文本消息。

####文件类型消息

消息类型标识：31（图片，其它类型可自定义），占两个字节；
接收人code长度：，占两个字节；
接收人code: toCode，占个字节；
文件名称长度：,占两个字节；
文件名称：fileName,占个字节；

定义好规则后就是组装数据，首先定义一个新的arraybuffer对象，其长度是：消息类型标识31(2字节)+(2字节)+(2个字节)+fileName(个字节)+msgArrayBuffer（个字节），代码可以参考文本消息。

ArrayBuffer的使用可以参考MDN /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

相关文章