摘要：本文作为系列的第四篇内容，将会用一个简单的聊天应用把整个传输二进制数据类型的内容连接起来，让用户对整个传输二进制数据的方法有个了解。如何发送二进制数据通过如何设计一个二进制协议一章，我们知道了如何定义传输的二进制数据格式。
概述
通过前三篇博客，我们能够了解在通过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"
}
当我们需要发送此消息时，只需要：
在前2个Byte放入id。
接下来8个Byte中放入sender。
再接下来8个Byte放入reciever。
最后紧接着放入一个string类型（以WebSocket系列之字符串如何与二进制数据进行转换博客中的格式为例，先将字符串长度构造成一个int类型，放在前4个Byte中，接下来将string类型编码后放入）。
此数据就完全按照协议构造完成了。我们只需将次协议通过WebSocket发送即可。具体方法将会在后面章节中说明。
接收消息从协议格式可知，当我们收到一条消息时，只需要按照协议规范来进行反向解析即可。例如：
{
"id": 1,
"sender": "123",
"reciever": "456",
"data": "Hellow World"
}
如果发送端发送的数据仍然为此消息，我们的解析顺序为：
先根据前2个Byte读取一个Short类型的id数值。
将接下来的8个Byte读取为Long类型的sender字段。
再接下来的8个Byte读取为Long类型的reciever字段。
接下来读取一个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可能出现的问题，我们能够让整个长连接更加健壮。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93869.html
摘要：与此同时，后端服务的中也有相关的长连接维持时长设置。如何快速的恢复连接根据上面的操作方案，我们会在网络异常时断开连接。 概述 通过前四篇博客，相信读者对于WebSocket的使用和数据（不论是ArrayBuffer还是String）传输都有了一个深刻的了解。现在我们来介绍下，我在使用WebSocket时，连接相关模块遇到的一些共性问题，以及我们如何解决这些问题。 本文作为WebSock...
摘要：总结通过使用和，我们能够在数据和二进制数据中进行互相转换。下一篇系列相关的博客，将会介绍如何通过来向后端传递二进制数据，以及如何处理通过收到的二进制数据。 概述 上一篇博客我们说到了如何进行数字类型（如Short、Int、Long类型）如何在JavaScript中进行二进制转换，如果感兴趣的可以可以阅读本系列第二篇博客——WebSocket系列之JavaScript中数字数据如何转换为...
摘要：以和为例，说明中的数字数据如何转换为二进制数据。对象用来表示通用的固定长度的原始二进制数据缓冲区。中的数字数据如何转换为二进制数据对和有了一个大概的了解，下面让我们来看下它是如何进行二进制数据操作的。 概述 本文主要通过对JavaScript中数字数据与二进制数据之间的转换，让读者能够了解在JavaScript中如何对数字类型（包括但不限于Number类型）进行处理。 二进制数据在日常...
摘要：帧协议让我们深入了解下帧协议。目前可用的值该帧接续前面一帧的有效载荷。该帧包含二进制数据。帧有以下几类长度表示有效载荷的长度。数据分片有效载荷数据可以被分成多个独立的帧。接收端会缓冲这些帧直到位有值。 原文请查阅这里，略有改动，本文采用知识共享署名 3.0 中国大陆许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原...
摘要：概述本文是系列的第一篇，主要介绍相关的基础协议知识和。客户端收到响应后，立即发起下一次的请求。收到消息通过事件来接收消息。类型则需要传递一个对象作为参数，相关的内容也将在本系列第二篇中进行介绍。 概述 本文是WebSocket系列的第一篇，主要介绍WebSocket相关的基础协议知识和API。由于WebSocket的相关介绍在MDN中分布较乱，初学者不太容易入门，因此通过本文将相关基础...
阅读 2126·2021-11-10 11:35
阅读 717·2021-09-26 09:55
阅读 2146·2021-09-22 15:22
阅读 2125·2021-09-22 15:17
阅读 3390·2021-09-09 09:33
阅读 1694·2019-08-30 11:22
阅读 796·2019-08-30 10:57
阅读 458·2019-08-29 16:10
