菜鳥教程|在Egret Engine中如何使用Protobuf

如今在網絡通訊和通用數據交換等應用場景中常用的技術是 JSON 或 XML以及 Google 的 Protobuf。Protobuf是後起之秀，其在效率、兼容性等方面更加出色。不少人在項目技術選項中，尤爲是網絡通訊、通用數據交換等場景應該會優先選擇Protobuf。

白鷺引擎首席架構師王澤曾經發布了一個開源項目Protobuf-egret，提供了一個能夠適配微信小遊戲的Protobuf 類庫以及對應的代碼生成工具，而且這個工具不只限於白鷺引擎，即便是使用其餘 HTML5 遊戲引擎的開發者也可使用。本文將從基礎講解，讓你們認識Protobuf和如何在本身的項目中使用Protobuf這種數據格式以及開源項目Protobuf-egret開源庫的使用。

一、什麼是Protobuf

Protobuf是Google開源的一款相似於Json,XML數據交換格式，其內部數據是純二進制格式，不依賴於語言和平臺，具備簡單，數據量小，快速等優勢.

二、Protobuf與XML,Json的比較

一、json: 通常的web項目中，最流行的主要仍是json。由於瀏覽器對於json數據支持很是好，有不少內建的函數支持。 二、XML: 在webservice中應用最爲普遍，可是相比於json，它的數據更加冗餘，由於須要成對的閉合標籤。json使用了鍵值對的方式，不只壓縮了必定的數據空間，同時也具備可讀性。 三、Protobuf:是谷歌開源的一種數據格式，適合高性能，對響應速度有要求的數據傳輸場景。

相對於其它Protobuf更具備優點1：序列化後體積相比json和XML很小，適合網絡傳輸 2：支持跨平臺多語言 3：消息格式升級和兼容性還不錯 4：序列化反序列化速度很快，快於Json的處理速度

結論： 在一個須要大量的數據傳輸的場景中，若是數據量很大，那麼選擇Protobuf能夠明顯的減小數據量，減小網絡IO，從而減小網絡傳輸所消耗的時間。

三、Protobuf如何使用

由於profobuf是二進制數據格式，須要編碼和解碼。數據自己不具備可讀性。所以只能反序列化以後獲得真正可讀的數據。那麼，在項目中如何使用呢？

首先，編寫Protobuf格式的消息文件（以.proto爲後綴的文件）；

下面就是我編寫的一個test.proto文件

syntax = "proto3";//語法是proto3的語法
package test;//給每個文件指定一個package值。

//每個數據結構就是一個消息 有message關鍵字定義
message user_login{
  //限定修飾符 | 數據類型 | 字段名稱 = | 字段編碼值 | [字段默認值]
    required int32 userId = 1;
    required string    userName = 2; 
  require string password = 3;
}

ps:更多的語法規則你們能夠百度查看，這裏不詳細講解了。

其次，使用Protobuf的編譯器編譯消息文件XXX.proto；

google 提供了多種語言的實現：C++、C#、Objective-C、Java、JavaScript、Ruby、PHP、Dart、Go 語言，每一種實現都包含了相應語言的編譯器以及文件。

最後，使用編譯好對應語言的類文件進行消息的序列化和反序列化

四、egret集成Protobuf

如何在egret遊戲項目中使用Protobuf數據格式進行網絡通訊和數據交換呢？

白鷺引擎首席架構師王澤曾經發布了一個開源項目Protobuf-egret，提供了一個能夠適配微信小遊戲的Protobuf 類庫以及對應的代碼生成工具，而且這個工具不只限於白鷺引擎，即便是使用其餘 HTML5 遊戲引擎的開發者也可使用。相關內容你們能夠再次閱讀《如何在微信小遊戲中使用Protobuf》（https://mp.weixin.qq.com/s/WNdIRxZEfpKFpUdFdlr5Mg）。接下來，我再更加詳細的介紹一下個人使用過程。

4.1 介紹egret Protobuf庫

特性

1. 提供 Protobuf.js 基礎運行時庫
2. 提供命令行腳本，將 protofile 生成 JavaScript 代碼
3. 生成正確的 .d.ts 代碼，以方便 TypeScript 項目使用
4. 一鍵配置白鷺引擎的配置文件，無需開發者手動修改配置便可在項目中直接集成
5. 本項目雖然名爲 egret Protobuf ，可是理論上支持全部 HTML5 遊戲引擎。歡迎使用 PIXI.js , Cocos2d-js , LayaAir 等其餘引擎的開發者使用本庫。

原理

封裝了 Protobufjs 庫及命令行。使用 Protobufjs 6.8.4 的運行時庫。

Protobufjs 自身存在着 pbts 命令，雖然也能夠生成 .d.ts 文件，可是在全局模式而非 ES6 module 的狀況下存在一些錯誤，本項目致力於解決這個問題，使 Protobufjs 能夠在非 ES6 模塊項目中（好比白鷺引擎）中也可使用 Protobufjs

Protobufjs 提供了多種使用方式，因爲微信小遊戲禁止 eval , new Function 等動態代碼形式，因此本項目只提供了生成代碼的形式，不支持經過Protobuf.load('awesome.proto')的方式（由於這種方式也沒法在微信小遊戲中運行）。

4.2 安裝egret Protobuf庫

第一步，首先檢查你是否安裝了node.js以及npm，沒有安裝的自行安裝。

第二步，在本身的電腦上安裝Protobufjs庫以及egret Protobuf庫。

Protobuf.js是基於ByteBuffer.js的Protocol Buffers純JavaScript實現，主要功能是解析.proto文件，構建Message類，編碼解碼。

#安裝Protobufjs庫
npm install Protobufjs@6.8.4 -g
#安裝egret Protobuf庫
npm install @egret/Protobuf -g

4.3 使用egret Protobuf庫

假設用戶有個名爲 egret-project 的白鷺項目;

第一步，cd到egret-project目錄下

cd egret-project

第二步，將egret Protobuf代碼以及項目結構拷貝至白鷺項目

pb-egret add

執行以後的項目目錄以下圖：

第三步，將XXX.proto文件拷貝至protofile目錄中。

第四步，將XXX.proto文件在peorobuf/bundles目錄下生成對應的js文件和d.ts文件。

pb-egret generate

4.4 認識Protobuf-bundles.d.ts

咱們看看Protobuf如何序列化和反序列化

Main.ts

var user = {
            "userId":1,
            "userName":"psyche"
        }
        //驗證user是否知足要求
        var ret = test.user_login.verify(user);
        console.log(ret);
                //若是正確，ret是null 不然是返回字符串
        if(ret){
            throw Error(ret);
        }
            
        var msg = test.user_login.create(user);
        console.log(msg);
                //將實例編譯成二進制流
        var buf = test.user_login.encode(user).finish();
        console.log(buf);
                //解析二進制流
        var de_buf = test.user_login.decode(buf);
        console.log(de_buf);

本次關於egret中使用Protobuf的介紹到此爲止，案例連接見：https://github.com/WQQPsyche/...