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

2024年5月1日 428次阅读 来源: hjava

概述

经由过程前三篇博客，我们能够相识在经由过程WebSocket发送数据之前，我们须要通报的数据是怎样变成ArrayBuffer二进制数据的；在我们收到二进制数据以后，我们又怎样将其变成了JavaScript中的罕见数据范例。
本文作为WebSocket系列的第四篇内容，将会用一个简朴的IM谈天运用把全部WebSocket传输二进制数据范例的内容衔接起来，让用户对全部WebSocket传输二进制数据的要领有个相识。
本文的主要内容以下：

  • 怎样设想一个二进制协定
  • WebSocket怎样发送二进制数据
  • WebSocket怎样处置惩罚吸收的二进制数据

之前的博客我们引见过了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能够涌现的题目，我们能够让全部长衔接越发硬朗。

    原文作者：hjava
    原文地址: https://segmentfault.com/a/1190000014109057
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞