WebSocket系列之二进制数据设计与传输

概述

经过前三篇博客，咱们可以了解在经过WebSocket发送数据以前，咱们须要传递的数据是如何变成ArrayBuffer二进制数据的；在咱们收到二进制数据以后，咱们又如何将其变成了JavaScript中的常见数据类型。
本文做为WebSocket系列的第四篇内容，将会用一个简单的IM聊天应用把整个WebSocket传输二进制数据类型的内容链接起来，让用户对整个WebSocket传输二进制数据的方法有个了解。
本文的主要内容以下：

• 如何设计一个二进制协议
• WebSocket如何发送二进制数据
• WebSocket如何处理接收的二进制数据

以前的博客咱们介绍过了WebSocket基础知识，数字类型和字符串类型与二进制数据间的转换，若是没有相关的基础，建议先依次阅读如下文章：

• WebSocket系列之基础知识入门篇
• WebSocket系列之JavaScript中数字数据如何转换为二进制数据
• WebSocket系列之字符串如何与二进制数据进行转换

如何设计一个二进制协议

什么是协议

协议，网络协议的简称，网络协议是通讯计算机双方必须共同听从的一组约定。如怎么样创建链接、怎么样互相识别等。只有遵照这个约定，计算机之间才能相互通讯交流。它的三要素是：语法、语义、时序。

经过百度百科中的介绍，咱们对协议的概念有了一个基础的了解。通俗来讲，协议就是通讯双方约定好的一套规则。

为何要设计协议

没有规矩不成方圆。通讯双方只有经过协议，才可以识别对方发送的数据内容。

咱们应该如何设计这套协议

首先，协议的设计应该可以区分不一样的各个数据包；其次，它还须要具有必定的兼容性。
根据上述两点要求，咱们设计了一套简单的IM聊天协议，支持文本、图片、文件三种消息。这套协议是按照最简单的思路来设计的，所以也只是给你们一个参考的观点，在真正的线上使用场景中，协议会比本文中的复杂和更加有层次。具体格式以下：

{
    "id": "short", // 消息类型，1是文本协议格式；2是图片协议格式；3是文件协议格式
    "sender": "long", // 发送用户惟一id
    "reciever": "long", // 接受用户惟一id
    "data": "string" // 消息内容，若是是文本协议则为文本内容；若是是图片协议则为图片地址；若是是文件协议则为文件地址
}

这套协议如何使用

发送消息

从协议格式可知，将上述数据按照上述固定顺序放入ArrayBuffer中，便可获得一个有特定含义的二进制数据。例如：

{
    "id": 1,
    "sender": "123",
    "reciever": "456",
    "data": "Hellow World"
}

当咱们须要发送此消息时，只须要：

1. 在前2个Byte放入id。
2. 接下来8个Byte中放入sender。
3. 再接下来8个Byte放入reciever。
4. 最后紧接着放入一个string类型（以WebSocket系列之字符串如何与二进制数据进行转换博客中的格式为例，先将字符串长度构形成一个int类型，放在前4个Byte中，接下来将string类型编码后放入）。

此数据就彻底按照协议构造完成了。咱们只需将次协议经过WebSocket发送便可。具体方法将会在后面章节中说明。

接收消息

从协议格式可知，当咱们收到一条消息时，只须要按照协议规范来进行反向解析便可。例如：

{
    "id": 1,
    "sender": "123",
    "reciever": "456",
    "data": "Hellow World"
}

若是发送端发送的数据仍然为此消息，咱们的解析顺序为：

1. 先根据前2个Byte读取一个Short类型的id数值。
2. 将接下来的8个Byte读取为Long类型的sender字段。
3. 再接下来的8个Byte读取为Long类型的reciever字段。
4. 接下来读取一个string类型（以发送消息这一节的数据为例，先读取4个Byte长度的int类型字符串长度，而后再根据长度读取字符串便可）。

扩展此协议

当此协议字段没法知足而且已经在线上使用时，咱们应该如何扩展呢？
根据咱们的写入和读取步骤，咱们能够知道：每次咱们读取的二进制数据能够认为是一个格式固定的数据（string类型在构造时会有长度信息，所以认为也是长度相对固定），因此咱们在读取二进制数据时读取的长度也是固定的。所以，咱们在扩展时只须要往协议后面增长字段便可。

• 扩展前的应用仍然会读取以前已经肯定的数据协议，只须要保证内容不变，那么功能也不会变。
• 扩展后的应用可以解析扩展后的协议，所以获得更多的数据，从而能够实现更多的功能。

WebSocket如何发送二进制数据

经过如何设计一个二进制协议一章，咱们知道了如何定义WebSocket传输的二进制数据格式。下面，咱们来看下如何在WebSocket中发送二进制数据：

let arrayBuffer = getArrayBufferMessagesFromUser(); // 获取用户须要发送的消息数据,为一个ArrayBuffer对象
let webSocket = getWebSocket(); // 获取已经链接成功的WebSocket实例

websocket.binaryType = 'arraybuffer'; // 指定WebSocket接受ArrayBuffer实例做为参数

webSocket.send(arrayBuffer);

经过上面的示例咱们能够知道，WebSocket在发送string类型的数据或者ArrayBuffer类型的数据时，使用的API接口都是send方法，咱们只须要在WebSocket初始化后指定传输类型binaryType便可。

WebSocket如何处理接收的二进制数据

经过WebSocket如何发送二进制数据一章，咱们知道了如何发送二进制数据。接下来，让咱们开看下如何处理WebSocket接收到的二进制数据：

let webSocket = getWebSocket(); // 获取已经链接成功的WebSocket实例

websocket.binaryType = 'arraybuffer'; // 指定WebSocket接受ArrayBuffer实例做为参数

webSocket.addEventListener('message', (message) => {
    let arrayBuffer = message.data; // 获取用户接收到的消息数据,为一个ArrayBuffer对象
    let data = parseMessage(arrayBuffer); // 解析二进制数据
});

经过上面的示例咱们能够知道，当咱们在创建链接时指定了传输类型binaryType为ArrayBuffer以后，咱们经过WebSocket收到的数据也是一个ArrayBuffer实例。咱们只须要根据第一章讲解的方式进行解析便可。

总结

本文做为WebSocket系列的第四篇，经过一个IM聊天应用的示例将前三篇博客分享的内容串联起来，给读者完整介绍了在WebSocket中使用二进制数据进行传输的方法以及相关的数据类型转换。经过前面4篇博客的内容，读者能够根据本身的需求快速的构造和封装WebSocket进行二进制数据传输，基本可以串联整个应用流程。WebSocket系列下一篇文章将会介绍在线上环境中，如何保证WebSocket的链接，以及线上可能遇到的问题。经过应对WebSocket可能出现的问题，咱们可以让整个长链接更加健壮。