concept

Protocol Buffers (PB) is a portable and efficient structured data storage format, which can be used for the serialization of structured data and is suitable for data storage and RPC data exchange. It can be used for language – independent, platform – independent and extensible serialized structure data format in communication protocol, data storage and other fields. I have to say, the concept looks confusing. In fact, we can generally understand that PB is a data exchange format similar to JSON. The difference is that JSON is a text format, which is convenient for direct reading, but PB is a binary format, which is not conducive to direct reading.

Why use PB?

  • Cross-language, cross-platform

    PB supports multiple languages, including Java, C++, and Python, and supports multiple platforms. The front and back end documents only need to define a description file to collaborate.

  • Small volume

    After serialization of PB data, the volume is nearly 3 times smaller.

  • efficient

    Binary format advantage

Does the front end need to use PB?

First of all, let’s take a look at the advantages of using JSON in the front end: – JS native support, in line with the native SYNTAX of JS, low cost of writing and reading. – Easy to parse using json.parse () and json.stringify () without third-party library support. – Compared with PB, it does not need to describe files and directly defines and transmits data, which has low learning cost. – Easy packet capture. You can use a packet capture tool such as Chrome DevTools to capture JSON data and view it directly. To sum up, JSON is a very suitable data exchange format for JS, while PB requires the introduction of third-party packages for parsing, which is not conducive to packet capture reading and debugging. Under what circumstances do we need to use PB?

In fact, when the data of a single request is relatively large, such as several meters of data packets, the main processing means of the front-end is subcontracting and pulling, so that whether concurrent loading or blocking loading will increase the complexity of the code, and there will be different performance bottlenecks and request time bottlenecks to a certain extent. In this case, it is time to use the PB data exchange format. For the same data content, a 4.3 MB PB file is equivalent to a 16 MB JSON file.

Use of PB in the front end

The use of PB in the front end is mainly divided into three stages:

  1. Write a description file similar to TS to declare data types
  2. Load the description file and write the corresponding data content
  3. Compile to binary and decompile

First NPM installs Protobufjs:

npm install protobufjs --save

Write a description file. Proto

${package_name}.${message_name}. Proto // if syntax = "proto3"; Syntax = "proto3"; // The message carrier in the PB is called message // define the message name // Define how many members of the message, the respective data type, is necessary // Each field in the message definition has a unique number. These field numbers are used to identify fields in the binary format of the message and should not be changed after the message type is used. Message Classmate {required INT32 ID = 1; required string name = 2; optional int32 sex = 3; }Copy the code

Write the message body file

Var Protobuf = require("protobufjs"); Protobuf.load("school.classmate.proto"). Then (function(root) {var Message = root.lookupType("school.classmate"); Var info = {id: 1, name: "Jack"}; Var errMsg = message.verify (info); if(errMsg) throw Error(errMsg); var classmateInfo = Message.create(info); // classmate { id: 1, name: 'Jack' } var buffer = Message.encode(classmateInfo).finish(); // <Buffer 08 01 12 04 4a 61 63 6b> var decodeMessage = Message.decode(buffer); // classmate { id: 1, name: 'Jack' } })Copy the code