前言

今天給大家介紹一位公衆号的貴客：

姓名：Javen

Email：[email protected]

Github：https://github.com/Javen205

Gitee：https://gitee.com/Javen205

CSDN：https://blog.csdn.net/zywjava

特長：擅長聚合支付、QQ玩一玩

開源項目：IJPay、weixinguide作者

Javen今天帶來的是google-protobuf在前後端的應用，為了降低大家的閱讀負擔，公衆号隻節選了其中基礎部分以及在Cocos Creator的使用。大家可以通過閱讀原文更多地了解到google-protobuf在Java、QQ玩一玩等平台上的使用。

1. 什麼是protobuf

protobuf是一種靈活高效的獨立于語言平台的結構化資料表示方法，與XML相比，protobuf更小更快更簡單。你可以用定義自己protobuf的資料結構，用ProtoBuf編譯器生成特定語言的源代碼，如C++，Java，Python等，目前protobuf對主流的程式設計語言都提供了支援,非常友善的進行序列化和反序列化。

特點：

平台無關、語言無關。
二進制、資料自描述。
提供了完整詳細的操作API。
高性能比xml要快20-100倍
尺寸小比xml要小3-10倍高可擴充性
資料自描述、前後相容

下載下傳protobuf的編譯器

目前最新版本為Protocol Buffers v3.6.1

2. 配置環境變量

解壓

protoc-3.6.1-osx-x86_64.zip

Mac 配置環境變量

vi ~/.bash_profile

使其配置生效

source ~/.bash_profile

#protobuf
export PROTOBUF_HOME=/Users/Javen/Documents/dev/java/protobuf/protoc-3.6.1-osx-x86_64
export PATH=$PATH:$PROTOBUF_HOME/bin

複制

Window 将bin添加到path 即可例如:

D:\protobuf\protoc-3.6.1-win32\bin

本文在Mac環境下編寫

Mac與window指令唯一的差別就是需要将

protoc

改成

protoc.exe

前提是需要添加環境變量。

3. 編寫一個proto檔案

檔案儲存為

chat.proto

此

proto

檔案摘自t-io 讓天下沒有難開發的網絡程式設計

syntax = "proto3";
package com.im.common.packets;
//設定java對應的package

option java_package = "com.im.common.packets";  
 //建議設定為true，這樣會每個對象放在一個檔案中，否則所有對象都在一個java檔案中option java_multiple_files = true; 


/**
 * 聊天類型
 */
enum ChatType {
    CHAT_TYPE_UNKNOW = 0;//未知
    CHAT_TYPE_PUBLIC = 1;//公聊
    CHAT_TYPE_PRIVATE = 2;//私聊
}
/**
 * 聊天請求
 */
message ChatReqBody {
    int64 time = 1;//消息發送時間
    ChatType type = 2; //聊天類型
    string text = 3; //聊天内容
    string group = 4; //目标組id
    int32 toId = 5; //目标使用者id，
    string toNick = 6; //目标使用者nick
}

/**
 * 聊天響應
 */
message ChatRespBody {
    int64 time = 1;//消息發送時間
    ChatType type = 2; //聊天類型
    string text = 3; //聊天内容
    int32 fromId = 4; //發送聊天消息的使用者id
    string fromNick = 5; //發送聊天消息的使用者nick
    int32 toId = 6; //目标使用者id
    string toNick = 7; //目标使用者nick
    string group = 8; //目标組id
}

複制

4. 編譯器proto為js

protoc --js_out=import_style=commonjs,binary:. chat.proto

複制

執行後會在目前檔案夾中生成

chat_pb.js

檔案，這裡面就是

protobuf

的API和一些函數。如果是

Node.js

就可以直接使用了，如果想在浏覽器(前端)中使用

protobuf

還需要做一些處理。

在

chat_pb.js

檔案的同級目錄下安裝引用庫

npm install -g require
npm install google-protobuf
npm install -g browserify

複制

編寫腳本儲存為exports.js，使用browserify對檔案進行編譯打包

var chatProto = require('./chat_pb');  
module.exports = {  
    DataProto: chatProto  
}

複制

執行指令

browserify exports.js > chat.js

複制

對

chat_pb.js

檔案進行編譯打包生成

chat.js

後就可以在Cocos Creator愉快的使用了。

5. 使用示例

将生成的chat.js導入項目，Cocos Creator會提示是否設定為插件，在這裡選擇是。

cc.Class({
    extends: cc.Component,

    buttonClick() {
        var chatReqBody = new proto.com.im.common.packets.ChatReqBody();
        chatReqBody.setTime(new Date().getTime());
        chatReqBody.setText("測試");
        chatReqBody.setType(1);
        chatReqBody.setGroup("Javen");
        chatReqBody.setToid(666);
        chatReqBody.setTonick("Javen205");

        var bytes = chatReqBody.serializeBinary();  
        console.log("序列化為位元組:"+bytes);
        var data = proto.com.im.common.packets.ChatReqBody.deserializeBinary(bytes); 
        console.log("反序列化為對象:"+data);  
        console.log("從對象中擷取指定屬性:"+data.getTonick());
        console.log("對象轉化為JSON:"+JSON.stringify(data)); 
    }
});

複制

Cocos Creator的插件腳本會将導出的對象設定為全局變量，是以在使用時無需要require任何js檔案，proto對象直接可以使用啦！

demo源碼連結: https://pan.baidu.com/s/1hy12FdO1tNL7pV8kNPXpUw 密碼:huil

6. 後記

google-protobuf是Cocos Creator中使用protobuf另一個解決方案。它與之前Shawn提供的protobufjs有所不同，使用google-protobuf是使用protoc指令将proto檔案編譯為js，做為Cocos Creator的插件。這下不喜歡将proto檔案暴露在安裝包裡的同學有福了，看來pbkiller替代品了，要加油了哦！

與Google Protocol Buffer親密接觸前言1. 什麼是protobuf2. 配置環境變量3. 編寫一個proto檔案4. 編譯器proto為js5. 使用示例6. 後記

前言