Обзор

Благодаря первым трем блогам мы смогли понять, как данные, которые нам нужно передать, становятся двоичными данными ArrayBuffer перед отправкой данных через WebSocket; после того, как мы получим двоичные данные, как мы можем сделать их общими для данных типа JavaScript. В качестве четвертого содержания серии WebSocket в этой статье будет использоваться простое приложение чата для обмена мгновенными сообщениями для подключения всей передачи WebSocket контента двоичного типа данных, чтобы пользователи имели представление обо всем методе передачи WebSocket двоичных данных. Основное содержание этой статьи следующее:

• Как разработать бинарный протокол
• Как WebSocket отправляет двоичные данные
• Как WebSocket обрабатывает полученные двоичные данные

В предыдущем блоге мы представили базовые знания о WebSocket, преобразовании между числовыми типами, строковыми типами и двоичными данными.Если нет соответствующей основы, рекомендуется прочитать следующие статьи по очереди:

• Введение в базовые знания серии WebSocket
• Как преобразовать цифровые данные в двоичные данные в JavaScript в серии WebSocket
• Как преобразовать строки серии WebSocket в двоичные данные

Как разработать бинарный протокол

что такое соглашение

Протокол, сокращение от сетевого протокола, сетевой протокол представляет собой набор соглашений, которые должны соблюдать обе стороны коммуникационного компьютера. Например, как установить соединение, как идентифицировать друг друга и так далее. Только при соблюдении этого соглашения компьютеры могут взаимодействовать друг с другом. Его три элемента: синтаксис, семантика, время.

пройти черезЭнциклопедия БайдуВо введении у нас есть базовое понимание концепции протокола. С точки зрения непрофессионала, соглашение представляет собой набор правил, согласованных обеими сторонами.

Зачем разрабатывать протокол

Никаких правил, никаких стандартов. Только по соглашению обе стороны в общении могут идентифицировать содержание данных, отправленных другой стороной.

Как мы должны разработать этот протокол

Во-первых, конструкция протокола должна позволять различать разные пакеты, во-вторых, он также должен иметь определенную степень совместимости. В соответствии с двумя вышеуказанными требованиями мы разработали набор простых протоколов обмена мгновенными сообщениями, который поддерживает три типа сообщений: текст, изображение и файл. Этот набор протоколов разработан по самым простым идеям, поэтому он является лишь ориентиром для всех.В реальном сценарии использования в сети протокол будет более сложным и иерархичным, чем тот, что описан в этой статье. Конкретный формат выглядит следующим образом:

{
    "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 байтаid.
2. Вставьте следующие 8 байтовsender.
3. Затем следующие 8 байт помещаются вreciever.
4. Наконец, поместите строковый тип (сКак преобразовать строки серии WebSocket в двоичные данныеВозьмите формат в блоге в качестве примера, сначала создайте длину строки в типе int, поместите ее в первые 4 байта, а затем закодируйте тип строки и вставьте ее). Эти данные полностью построены в соответствии с протоколом. Нам просто нужно отправить вторичный протокол через WebSocket. Конкретный метод будет объяснен в следующих главах.

получить сообщение

Из формата протокола, когда мы получаем сообщение, нам нужно только выполнить обратный анализ в соответствии со спецификацией протокола. Например:

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

Если данные, отправленные отправителем, по-прежнему являются этим сообщением, наша последовательность анализа такова:

1. Сначала прочитайте тип Short в соответствии с первыми 2 байтами.idчисленная величина.
2. Прочитать следующие 8 байт как длинныеsenderполе.
3. Следующие 8 байтов читаются как длинный типrecieverполе.
4. Затем прочитайте строковый тип (с发送消息Данные в этом разделе являются примером, сначала прочитайте длину строки типа int длиной 4 байта, а затем прочитайте строку в соответствии с длиной).

расширить этот протокол

Как мы должны расширить, если это поле протокола не может быть удовлетворено и уже используется в сети? В соответствии с нашими шагами записи и чтения мы можем знать: ** Каждый раз, когда двоичные данные, которые мы читаем, можно рассматривать как данные фиксированного формата (строковый тип имеет информацию о длине во время построения, поэтому он считается относительно фиксированным по длине), поэтому длина, которую мы читаем при чтении двоичных данных, также фиксирована. ** Поэтому нам нужно только добавить поля в конец протокола при расширении.

• Приложение перед расширением по-прежнему будет считывать протокол данных, который был определен ранее, пока содержимое остается неизменным, функция не изменится.
• Приложения могут быть расширены после протокола расширенного разрешения, тем самым получая больше данных, тем самым позволяя больше.

Как WebSocket отправляет двоичные данные

пройти через如何设计一个二进制协议В этой главе мы увидели, как определить формат двоичных данных, передаваемых WebSocket. Далее давайте посмотрим, как отправлять бинарные данные в WebSocket:

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

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

webSocket.send(arrayBuffer);

Из приведенного выше примера мы можем знать, что когда WebSocket отправляет данные типа string или данные типа ArrayBuffer, используется интерфейс API.sendметод, нам просто нужно указать тип транспорта после инициализации WebSocketbinaryTypeВот и все.

Как WebSocket обрабатывает полученные двоичные данные

пройти черезWebSocket如何发送二进制数据В главе 1 мы видели, как отправлять двоичные данные. Далее рассмотрим, как обрабатывать бинарные данные, полученные 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. Нам нужно только разобрать его в соответствии со способом, описанным в главе 1.

Суммировать

Как четвертая часть серии WebSocket, эта статья соединяет контент, опубликованный в первых трех блогах, с помощью примера приложения для обмена мгновенными сообщениями и дает читателям полное введение в метод использования двоичных данных для передачи в WebSocket и связанный с ним тип данных. преобразование. Благодаря содержимому предыдущих четырех блогов читатели могут быстро сконструировать и инкапсулировать WebSocket для передачи двоичных данных в соответствии со своими потребностями, что в основном может связать весь процесс приложения. В следующей статье серии WebSocket будет рассказано, как обеспечить подключение WebSocket в онлайн-среде, а также о проблемах, с которыми можно столкнуться в сети. Устранив возможные проблемы с WebSockets, мы смогли сделать все долгоживущее соединение более надежным.