cocoscreator:websocket集成使用protobuf

首先在Google搜索中找到些相关资料，这里吐槽下百度，用百度真心搜索不到有用的资料，大部分均是广告，不知道作为一个搜索引擎，情何以堪。综合谷歌搜索到的各项资料，将本菜鸟cocos2dx_js集成方式贴出:

1.需要protobuf.js(http://pan.baidu.com/s/1dFfpXsd),bytebuffer.js(http://pan.baidu.com/s/1hs36tUG),long.js(http://pan.baidu.com/s/1slBv57n)文件,此处给出我使用的版本。

2.将此三个文件复制到脚本文件夹下

3.引用 protobuf.js,bytebuffer,js

 

var ByteBuffer = require("bytebuffer");
var ProtoBuf = require("protobuf");

4.将protobuf原文件(.proto)复制到项目assets/resources目录下，如果没有resources目录，新建一个即可

 

5.使用protobuf.js解析proto文件，因为我的原文件放在assets/resources/protobuf/guaji.proto,此处不需要加后缀,cocos2d会自动查找 ，ProtoBuf.protoFromString方法会解析文件生成一个protobuf对象工厂。

 

        var protoFile = "protobuf/guaji";
        cc.loader.loadRes(protoFile, function (err, bgTexture2D){
            cc.log("loadfinish");

            Builder = ProtoBuf.protoFromString(bgTexture2D);
        });

6.拿到工厂之后使用工厂对象生成原文件中数据对象,如果源文件中存在package包名，在创建protobuf对象的时候记得加上包名，此处我的包名为(game.service.data),拿到protobuf对象之后记得使用new创建实例，然后使用set方法即可设置数据

        var Message = Builder.build("game.service.data.MsgLoginData");
        var loginMessage = new Message();
        loginMessage.set("UserAccount","webTest");
        loginMessage.set("UserPassWord","123456");

7.使用BUFF数据解析生成protobuf数据实例messageBuff为ArrayBuffer对象实例，使用get方法,或直接使用取属性符号(.)即可获取数据

 

 

        var Message = Builder.build("game.service.data.MsgLoginResult");
        var msg = Message.decode(messageBuff);

到此js和protobuf集成基本完成

 

websocket集成使用

 

 

        var Message = Builder.build("game.service.data.MsgLoginData");
        var loginMessage = new Message();
        loginMessage.set("UserAccount","webTest");
        loginMessage.set("UserPassWord","123456");
        var msgBuf = loginMessage.<span style="color:#ff0000;">encode().toBuffer()</span>;

1.数据打包

在protobuf数据结构填写完成后，即可调用encode().toBuffer()将对象转换为ArrayBuffer对象，使用websockt发送数据即可

 

     var Message = Builder.build("game.service.data.MsgLoginResult");
     var msg = Message.decode(messageBuff);

 

 

if(cc.sys.isNative){
    webSocket.onDataReceived(event.data);
}else {
    var fileReader = new FileReader();
    fileReader.onload  = function(progressEvent) {
        var arrayBuffer = this.result; // arrayBuffer即为blob对应的arrayBuffer
        webSocket.onDataReceived(arrayBuffer);
    };
    fileReader.readAsArrayBuffer(event.data);
}

2.数据接收，数据接收有一个需要注意，需要判断是原生环境还是浏览器环境，如果是浏览器环境websocket收到的data将是BLOB类型，需要将BLOB类型转换为ArrayBuffer,

如果是原生环境，直接使用即可