记一次websocket开发实践（ArrayBuffer）

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

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

文字类型消息

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

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

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

文件类型消息

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

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

ArrayBuffer的使用可以参考MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer