How To Use Protocol Buffer in Javascript

We have understood a few advantages of protocol buffer like what I've explained in my other post. Now, let's look at how we can implement it in our code. The "transpiler" tool, named protoc, supports the generation of a helper class for managing the object instance in a variety of programming languages. In this post, we use Javascript as an example and run in a Linux environment.

Preparation

Before we develop our code, we should install protoc for generating the helper class.

1. Download protoc binary from the release page.
2. Extract the content and store the directories  (bin and includes) in /usr/local directory so that the executable binary can be accessed directly.
3. Run protoc --help to check its manual.
4. Install a required dependency globally to enable protoc to generate the Javascript files by running: npm i -g protoc-gen-js.

Create a proto file

First, we should create an empty directory to store everything. The first thing we will create is a proto file that contains the object schema. For instance, we just create a simple "User" message definition.

syntax="proto3";

package company.my;

message User {
    uint64 id = 1;
    string name = 2;
    repeated string hobbies = 3;
}
    

Generate the helper library

Still, in the same directory, we will generate the helper library for working with the object instance for tasks like setting and getting the values of some properties, serializing an object into binary, or deserializing binary into an object.

protoc user.proto --proto_path=./ --js_out=import_style=commonjs_strict,binary:./
    

In the command above we use commonjs_strict parameter to generate a CommonJS-styled library and prevent exposing the class to global scope. After running the command above, we will have a user_pb.js file.

Take a look at the generated file. We can see some setter and getter methods that already align with the object property names like getId, setName, addHobbies, getHobbiesList, and so on. In this case, hobbies property has different methods because the property stores an array value.

Create a sample code

We need to initialize a Javascript project and install a required library which is google-protobuf.

npm init
npm i google-protobuf
    

We can use the following script as an example. Let's create a index.js file.

const userProto = require('./user_pb');
const User = userProto.company.my.User;

// Create a User instance and set some values
const user = new User();
user.setId(123);
user.setName('John');
user.addHobbies('Skiing');
user.addHobbies('Hiking');

// Serializes to a binary (UInt8Array).
const bytes = user.serializeBinary();

// We can store the binary into a file 
// or send directly the bytes to other machines

// Deserialize to a JavaScript object.
const data = User.deserializeBinary(bytes);

console.log('ID:', data.getId());
console.log('Name:', data.getName());
console.log('Hobbies:', data.getHobbiesList());