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,

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