Cocos Creator 使用protobufjs

Win7 + Creator 2.0.0 + protobufjs 6.8.8

1.下载安装protobufjs

npm install -g protobufjs

可以看到protobufjs安装在C:\Users\Administrator\AppData\Roaming\npm\node_modules\protobufjs中

 

2.在protobufjs\dist中找到protobuf.js文件，并作为插件拖放到Creator中（注意，必须作为插件，并且是四个选项都必须选中，否则将报错！）

 

3.新建一个通讯协议文件msg.proto，内容如下

syntax = "proto3";

package msg;

message Login {
    string name = 1;
    string pwd = 2;
}

注意：package为包名msg

 

4.使用如下命令将msg.proto文件转为对应的js版本文件Msg.js

::protobuf.js版本6.x生成js文件
pbjs -t static-module -w commonjs -o Msg.js msg.proto 

 

5.修改Msg.js文件对应内容

//var $protobuf = require("protobufjs/minimal"); //将源文件中的这一行屏蔽，然后新增下面一行
var $protobuf = protobuf;

 

6.将Msg.js拖放到Creator中（包含Msg.js和protobuf.js文件的结构如下）

 

7.写一个WebSocket的处理脚本挂载到场景中即可。

import {msg} from "./Msg"  //这里引入文件,msg为package的包名

cc.Class({
    extends: cc.Component,

    properties: {
        ip: {
            default: "",
            type: cc.string
        },

        port: {
            default: 0,
            type: cc.number
        }
    },

    ctor: function () {
        this.ws = null;
    },

    onLoad: function () {
        var self = this;

        var ipPort = "ws://" + this.ip + ":" + this.port;
        console.log(ipPort);

        this.ws = new WebSocket(ipPort);
        this.ws.binaryType = 'arraybuffer'; //这里设置为发送二进制数据

        this.ws.onopen = function (event) {
            console.log("open");

            //打开成功立刻进行发送
            if (self.ws.readyState === WebSocket.OPEN) {
                let message = msg.Login.create({name: "hello", pwd: "pwd"});//构造对象
                let messageBuf = msg.Login.encode(message).finish(); //获取二进制数据，一定要注意使用finish函数

                self.ws.send(messageBuf); //发送二进制数据
            }
        };

        this.ws.onmessage = function (event) {
            console.log("onmessage : " + event.data);
        };

        this.ws.onerror = function (event) {
            console.log("on error :", event.data);
        };

        this.ws.onclose = function (event) {
            console.log("onclose");
        };
    }
});

 

PS：在实际应用中，可能需要在二进制数据前再拼接一些数据才进行发送

8.在二进制数据前再拼接一个short数据

              let message = msg.Login.create({name: "hello", pwd: "pwd"});
                let msgEncode = msg.Login.encode(message).finish(); //一定要注意使用finish函数

                //二进制数据的长度+一个short的长度
                var sendBuf = new ArrayBuffer(msgEncode.length + 2);

                var dv = new DataView(sendBuf);
                dv.setInt16(0,1); //写入一个short值

                //将二进制数据写入
                var u8view = new Uint8Array(sendBuf, 2); //跳过一个short的距离
                for (var i = 0, strLen = msgEncode.length; i < strLen; ++i){
                    u8view[i] = msgEncode[i];
                }

                self.ws.send(sendBuf);

 

9.使用JAVA的WebSocketServer接口，很方便就可以接收并处理数据

    @Override
    public void onMessage(WebSocket conn, ByteBuffer message) {
        try {
            short val = message.getShort(); //获取short值
            Msg.Login login = Msg.Login.parseFrom(message);
            Log.info("val = %d name : %s pwd : %s", val, login.getName(), login.getPwd());
        } catch (InvalidProtocolBufferException e) {
            e.printStackTrace();
        }
    }

输出结果

 

参考传送：《cocosCreator中Protobuf的简单使用》

以上。