WebSocket series of binary data design and transmission

Time:2019-10-23

An overview of the

Through the first three blogs, we can understand how the data we need to pass before sending data through WebSocket becomes ArrayBuffer binary data. After we received the binary data, how we turned it into a common data type in JavaScript.
This article, the fourth in the WebSocket series, will use a simple IM chat application to connect the whole WebSocket binary data type of content, so that the user has an understanding of the whole WebSocket binary data transfer method.
The main contents of this paper are as follows:

  • How to design a binary protocol
  • How does WebSocket send binary data
  • How does WebSocket process incoming binary data

In the previous blog, we have introduced the basics of WebSocket, conversion between numeric and string types and binary data. If there is no relevant foundation, please read the following article in turn:

  • Introduction to the basics of the WebSocket series
  • How is digital data converted to binary data in the WebSocket series of JavaScript
  • How do strings in the WebSocket series convert to binary data

How to design a binary protocol

What is an agreement

Protocol, short for network protocol, is a set of conventions that must be followed by both parties to a communication computer. Such as how to establish a connection, how to recognize each other. Only by following this convention can computers communicate with each other. Its three elements are: grammar, semantics and sequence.

Through the introduction of baidu encyclopedia, we have a basic understanding of the concept of the agreement. In layman’s terms, an agreement is a set of rules agreed upon by the parties to a communication.

Why design protocols

No rules, no standards. Only through the protocol, the communication parties can identify the data content sent by the other party.

How should we design this protocol

First, the protocol design should be able to distinguish between different data packets; Second, it needs to be compatible.
According to the above two requirements, we designed a set of simple IM chat protocol, supporting text, picture, file three kinds of messages. This protocol is designed in the simplest possible way, and is therefore only a reference point. In a real online usage scenario, the protocol will be more complex and hierarchical than the one in this article. The specific format is as follows:

{
    "Id ": "short", // message type, 1 is text protocol format; 2 is the picture protocol format; 3 is the document protocol format
    Sender: "long", // send user unique id
    "Reciever ": "long", // accept user unique id
    "Data ": "string" // message content, text content if text protocol; If is the picture agreement then is the picture address; File address if file protocol
}

How does this protocol work

Send a message

According to the protocol format, if you put the above data into an ArrayBuffer in the fixed order above, you will get a binary data with a specific meaning. Such as:

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

When we need to send this message, we just need:

  1. In the first 2 bytesid
  2. The next 8 bytessender
  3. And then the next 8 bytesreciever
  4. It is followed by a string type (in the case of the WebSocket series on how strings can be converted to binary data in a blog, the length of the string is first constructed as an int, in the first four bytes, and then encoded as a string type).

This data is constructed exactly according to the protocol. We just need to send the secondary protocol via WebSocket. The method will be described in a later section.

Receives the message

From the protocol format, when we receive a message, we only need to parse it backwards according to the protocol specification. Such as:

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

If the data sent by the sender is still this message, our parsing order is:

  1. Read a Short type based on the first two bytesidNumerical values.
  2. Read the next 8 bytes as LongsenderField.
  3. The next eight bytes read LongrecieverField.
  4. Next, read a string type (toSend a messageThe data in this section, for example, reads an int of type length of four bytes, and then reads the string according to its length.

Extend this protocol

How do we extend this protocol field when it is not available and is already online?
According to our write and read steps, we can know:Every time we read binary data, we can think of it as a fixed form of data (string types are constructed with length information, so we can think of it as a relatively fixed length), so we can read binary data with a fixed length.Therefore, we only need to add fields after the protocol when extending.

  • The extended application will still read the data protocol that has been determined before, as long as the content remains the same and the function remains the same.
  • The extended application is able to parse the extended protocol, thus getting more data and thus more functionality.

How does WebSocket send binary data

throughHow to design a binary protocolIn chapter 1, we learned how to define the binary data format for WebSocket transfer. Now, let’s look at how to send binary data in WebSocket:

Let arrayBuffer = getArrayBufferMessagesFromUser (); // gets the message data that the user needs to send as an ArrayBuffer object
Let the webSocket = getWebSocket (); // get the WebSocket instance that was successfully connected

Websocket. BinaryType = 'arraybuffer'; // specifies that WebSocket accepts ArrayBuffer instances as arguments

webSocket.send(arrayBuffer);

As you can see from the example above, WebSocket USES either string type data or ArrayBuffer type datasendMethod, we only need to specify the transport type after the WebSocket is initializedbinaryTypeCan.

How does WebSocket process incoming binary data

throughHow does WebSocket send binary dataIn chapter 1, we learned how to send binary data. Next, let’s take a look at what to do with the binary data that WebSocket receives:

Let the webSocket = getWebSocket (); // get the WebSocket instance that was successfully connected

Websocket. BinaryType = 'arraybuffer'; // specifies that WebSocket accepts ArrayBuffer instances as arguments

webSocket.addEventListener('message', (message) => {
    Let arrayBuffer = message. The data; // gets the message data received by the user as an ArrayBuffer object
    Let data = parseMessage (arrayBuffer); // parses binary data
});

From the example above, we can see that we specified the transport type when establishing the connectionbinaryTypeAfter ArrayBuffer, the data we receive via WebSocket is also an ArrayBuffer instance. We just need to follow the way we explained in chapter 1.

conclusion

This article, the fourth in a series of websockets, links together the first three blog posts with an example of an IM chat application to give the reader a complete introduction to the use of binary data transfer in websockets and the associated data type conversion.
Through the content of the previous four blogs, readers can quickly construct and encapsulate WebSocket for binary data transmission according to their own needs, basically connecting the whole application process.
The next article in the WebSocket series will cover how to ensure WebSocket connectivity in an online environment, as well as possible problems online. By addressing possible WebSocket issues, we were able to make the entire long connection more robust.

Recommended Today

Pilot for Web

First of all, thank you @ Qibing @ zujianguo for their investment in FFW’s pre research! background Google launched the flutter for web on the latest Google I / O, aiming to further solve the problem of one-time code and multi-terminal operation. Flutter for web is still in the early pilot version and is not […]