在 Cocos Creator 中使用 Protobufjs（一）

一. 环境准备

我一直在探索Cocos H5正确的开发姿式，目前作javascript项目已经离不开 nodejs、npm或grunt等脚手架工具了。

1.初始化package.json文件

npm init

当新建好cocos-js或creator项目，在项目根目录使用npm init命令，一路回车，将在当前目录建立package.json文件用于nodejs三方模块的管理。关于npm的使用细节网络上有不少教程，在此不用细说。

2. protobufjs模块

本人最先在cocos2dx 2.x时代就开始用protobufjs模块来操纵protobuf一直到如今。因此下面全部内容都是关于protobufjs在cocos creator中的使用，包括原平生台(cocos2d-js也是大同小异)。

安装protobufjs到项目

npm install protobufjs@5 --save

使用npm install命令安装模块，注意咱们这里使用的是protobufjs 5.x版本。 虽然protobufjs目前最新的 6.x版本，提供了ts、rpc等功能的支持，但有一个问题是在微信小游戏中不能动态加载proto文件。

安装protobufjs到全局

npm install -g protobufjs@5

使用npm install -g 参数将模块安装到全局，目的主要是方便使用protobufjs提供的pbjs命令行工具。pbjs能够将proto原文件转换成json、js等，以提供不一样的加载proto的方式，咱们能够根据本身的实际状况选择使用。

二. protobufjs用法

下面是demo中定义的Player.proto文件的内容

syntax = "proto3";
package grace.proto.msg;

message Player {
    uint32  id = 1;         //惟一ID  首次登陆时设置为0，由服务器分配
    string  name = 2;       //显示名字
    uint64  enterTime = 3;  //登陆时间
}
复制代码

关于proto具体语法细节这里就很少说了，咱们重点如何将Player.proto文件中定义的Player对象在js中实例化、属性赋值、序列化、反序列化操做。

1. 静态语言中使用proto文件

在c++/java这类静态语言中使用protobuf一般是使用官方提供的protoc命令将proto文件编译成c++/java代码，像下面这样：

protoc --cpp_out=输出路径 xxx.proto protoc --java_out=输出路径 xxx.proto

将输出路径的文件导入对应语言的工程中使用。

2. 在creator项目中使用proto文件

javascript是动态语言，能够在运行时产生对象，所以protobufjs提供了更为便捷的动态编译，将proto文件中的对象生成js对象，下面简要讲解一下在creator中具体的使用步骤：

1.加载proto文件并编译生成proto对象

//导入protobufjs模块
let protobuf = require("protobufjs");
//获取一个builder对象
let builder = protobuf.newBuilder();
//使用protobufjs加文件，并与一个builder对象关联
protobuf.protoFromFile('xxx.proto', builder);
protobuf.protoFromFile('yyy.proto', builder);
...
let PB = builder.build('grace.proto.msg'); 
复制代码

这步操做主要是使用protobufjs加载、编译proto文件。

2.实例化proto对象与属性赋值

let PB = builder.build('grace.proto.msg')
复制代码

build函数返回值PB对象中将包含的是在proto中定义全部message对象，如今已经成为js对象，能够被实例化，代码以下：

//实例化Player
let player = new PB.Player();  
//属性赋值
player.name = '张三';             
player.enterTime = Date.now();
复制代码

3.proto对象的序列化与反序列化

不说废话，仍是直接上代码

...
//使用实例对象上的toArrayBuffer函数将对象序列化为二进制数据
let data = player.toArrayBuffer();
//使用类型对象上的decode函数将二进制数据反序列化为实例对象
let otherPlayer = PB.player.decode(data);
复制代码

若是幸运你能够在web上使用protobuf了， 为何只是在web上呢，当你把上面的代码运行在jsb环境下的时候，你会体验到悲催的事情正在发生。

三. 拯救cocos-jsb上的protobufjs

为何在原生上运行就挂掉了呢？要理解这个问题须要对nodejs\ 浏览器\cocos-jsb这三个javascript的运行宿主环境有必定的了解。

我以前的文章提到过在选择nodejs模块时，要注意是否同时支持nodejs和web，只要是纯js的模块在cocos中通常均可以随便用，好比async、undersocre、lodash等。 protobufjs这个模块是能够很好的在浏览器和nodejs环境上运行的。但运行在cocos-jsb上就会出问题，首先咱们要定位到出问题的关键代码：

protobuf.protoFromFile('xxx.proto', builder);
复制代码

1. 问题分析

从protobuf.protoFromFile函数名上看就知道是要进行文件的加载，一想到文件加载，就涉及到文件操做的api，咱们来整理一下不一样平台上的文件接口：

宿主平台	文件接口	说明
浏览器	XMLHttpRequest	浏览器中动态加载资源、文件等AJAX操做的基础
nodejs	fs.readFile / fs.readFileSync	nodejs上的文件操做模块，底层由c/c++实现
cocos-jsb	jsb.fileUtils.getStringFromFile	cocos-js提供的读取文件内容接口，在不台平台（ios\android\windows）由不一样底层api实现

看到这里相信不少人已经明白为何在cocos-jsb上会有问题了，咱们再来读一下protobufjs源码，证明下咱们的分析。

2. 分析protobufjs源码

找到protobufjs加载文件的主要代码，下面我为源码加上了注释，请认真读一下注释内容：

Util.fetch = function(path, callback) {
    //检查callback参数，callback参数决定是否为异步加载
    if (callback && typeof callback != 'function')
        callback = null;

    //运行环境是否为nodejs
    if (Util.IS_NODE) {
        //加载nodejs的文件系统模块
        var fs = require("fs");  
        //检查是否有callback，存在使用fs.readFile异步函数读取文件内容
        if (callback) {
            fs.readFile(path, function(err, data) {
                if (err)
                    callback(null);
                else
                    callback(""+data);
            });
        } else
            //使用fs.readFileSync同步函数读取文件内容 
            try {
                return fs.readFileSync(path);
            } catch (e) {
                return null;
            }
    } else {
        //当不为nodejs运行环境使用XmlHttpRequest加载文件
        var xhr = Util.XHR();
        //根据callbcak参数是否存在，使用异步仍是同步方式
        xhr.open('GET', path, callback ? true : false);
        // xhr.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
        xhr.setRequestHeader('Accept', 'text/plain');
        if (typeof xhr.overrideMimeType === 'function') xhr.overrideMimeType('text/plain');
        //经过XmlHttpRequest.onreadystatechange事件函数异步获取文件数据
        if (callback) {
            xhr.onreadystatechange = function() {
                if (xhr.readyState != 4) return;
                if (/* remote */ xhr.status == 200 || /* local */ (xhr.status == 0 && typeof xhr.responseText === 'string'))
                    callback(xhr.responseText);
                else
                    callback(null);
            };
            if (xhr.readyState == 4)
                return;
            //调用send方法发起AJAX请求
            xhr.send(null);
        } else {
            ////调用send方法发起AJAX请求，同步获取文件数据
            xhr.send(null);
            if (/* remote */ xhr.status == 200 || /* local */ (xhr.status == 0 && typeof xhr.responseText === 'string'))
                return xhr.responseText;
            return null;
        }
    }
};
复制代码

从上面的代码能够看出protobufjs库是为浏览器和nodejs准备的，根本就没考虑过cocos-jsb的存在（吐槽：建议cocos官方提供的接口能模仿nodejs这样能少不少事），因此要在cocos-jsb中使用protobufjs***其中的一个办法***就是修改protobufjs的源码，以下：

Util.fetch = function(path, callback) {
    if (callback && typeof callback != 'function')
        callback = null;
    //将平台检查代码改成cocos提供的接口
    if (cc.sys.isNative) {
        //文件读取使用cocos-jsb提供的函数
        try {
            let data = jsb.fileUtils.getStringFromFile(path);
            cc.log(`proto文件内容: {data}`);
            return data;
        } catch (e) {
            return null;
        }
    } else {
        //web端无需修改，略
        ...
};
复制代码

咱们用cocos的接口将代码修改一下，加载问题就被化解了，问题真的被解决了吗？ 很差意思，除了上面要代码外还有一处代码须要修改，源码以下：

BuilderPrototype["import"] = function(json, filename) {
    var delim = '/';

    // Make sure to skip duplicate imports

    if (typeof filename === 'string') {
        //这里又出现了平台检查
        if (ProtoBuf.Util.IS_NODE)
            // require("path")是加载nodejs的path模块，resolve
            filename = require("path")['resolve'](filename);
        if (this.files[filename] === true)
            return this.reset();
        this.files[filename] = true;

    } else if (typeof filename === 'object') { // Object with root, file.

        var root = filename.root;
        //这里还要修改
        if (ProtoBuf.Util.IS_NODE)
            root = require("path")['resolve'](root);
        if (root.indexOf("\\") >= 0 || filename.file.indexOf("\\") >= 0)
            delim = '\\';
        var fname;
         //这里还要修改
        if (ProtoBuf.Util.IS_NODE)
            fname = require("path")['join'](root, filename.file);
        else
            fname = root + delim + filename.file;
        if (this.files[fname] === true)
            return this.reset();
        this.files[fname] = true;
    }
    ...
}
复制代码

这里我就再也不贴修改代码了，你们自行解决。

四 为protobuf继续填坑

原本写到这里，问题大多已经解决了， 但此时，若是你满怀信心地使用改造后的protobufjs源码，将你的代码运行起来那一刻，我相信绝大多数人会一脸蒙逼。

妈的根本就不行！！看了好多字，好不容易读到这里，不只在模拟器上跑不起来，在web上一样也跑不起来。

怎么办，为了完全解决问题，我还得继续写下去。

1. 了解creator动态加载资源的方法

请你们思考一个问题，creator项目中的一张图片，在web与cocos-jsb上他们的文件路径会同样吗？直接使用protobuf.protoFromFile('xxx.proto')去加载一个proto文件会成功吗？ cocos文档中说过要动态加载一个图片资源须要将文件存放在assets/resources目录下，使用以下方法加载：

cc.loader.loadRes('resources/xxx')
复制代码

尝试将proto文件存放在resources/pb/目录下，用使用如下代码：

protobuf.protoFromFile('resources/pb/xxx.proto')
复制代码

一样会获得失败的提示，该如何办呢？怎么才能得到正确的资源路径？ 算了，不买关子了，写累了直接出答案吧！

protobuf.protoFromFile(cc.url.raw('resources/pb/xxx.proto'));
复制代码

cc.url.raw这个函数在浏览器、模拟器、手机上会返回不一样的资源路径，这才是真正的资源路径，这下代码应该能够正常运行起来了。

2. 更好的解决法办

我一直在探索Cocos H5正确的开发方式，虽然经过修改protobufjs源码的方法能够来解决在cocos-jsb上运行的问题，但这并非惟一的解决方案。

如何在不修改protobufjs源码的状况下让代码运行起来，以及使用pbjs工具预编译proto文件为JSON和js文件的用法，请继续观注个人系列文章《当Creator赶上protobufjs》！