画面(JavaScript
)からProtocol Buffers
を使う機会があったので、メモしておきます。
OSSは、protobufjs/protobuf.jsを利用しました。
https://github.com/protobufjs/protobuf.js
demo
※ サンプルコード全量
https://github.com/Thirosue/protocol-buffers-javascript-sample
インターフェイス定義
インターフェース定義は公式のサンプルを利用します。
この定義は、インターネットで取得できる場所に配置しておきます。
person.proto
syntax = "proto3";
package person;
message Person {
string name = 1;
uint32 id = 2;
string email = 3;
}
CDN
以下から、スクリプトを取得します。
https://www.jsdelivr.com/package/npm/protobufjs
<script src="https://cdn.jsdelivr.net/npm/protobufjs@6.10.1/dist/protobuf.min.js"></script>
サンプルコード
protobuf.load("person.proto", function (err, root) {
if (err) throw err;
// インターフェース定義を取得する
var Person = root.lookupType("person.Person");
// 設定するデータを定義
var payload = {
name: "john doe",
id: 99,
email: "test@example.com",
};
// データを検証
var errMsg = Person.verify(payload);
if (errMsg) throw Error(errMsg);
// 連携するメッセージを作成する
var person = Person.create(payload);
console.log(new TextDecoder().decode(buffer)); // 文字列に変換する
console.log(btoa(String.fromCharCode(...buffer))); // base64エンコード
// メッセージを Uint8Array に変換する
var buffer = Person.encode(person).finish();
// メッセージをデコードする
var person = Person.decode(buffer);
// メッセージをオブジェクトに変換する
var object = Person.toObject(person, {
longs: String,
enums: String,
bytes: String,
// see ConversionOptions
});
});