前言

今天给大家介绍一位公众号的贵客：

姓名：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. 后记

前言