cocos creator中使用protobuf(dcodeIO/protobuf.js 5.0)

cocos creator项目需要使用protobuf作为序列化！

查找资料发现：

主要存在两个解决方案 使用protobufjs 或者 谷歌官方的js解析(通过protoc.exe生成.proto对应的js文件直接使用)，个人认为protojs更为方便，如果更改.proto文件都要使用protoc重新生成对应的js文件略为繁琐。所以这里我们直接采用的protobufjs。

但是通过github使用最新的protobufjs（6.x,x版本),在require("protobuf")时，编辑器报错 "moudule not  found”,使用;参考下方资料解决：

1. cocos creator: js中实现protobuf的打包和解析

2.[已解决] Cocos creator 上 protobufjs 报错

总结就是：

需要使用之前的protobuf5.0版本（下载地址:forum.cocos.com/uploads/default/original/2X/0/0e90b3823e4520d0afa40f114b6a830ae1126c7f.zip）。 同样的 按照上方的1相同步骤即可。

需要注意的是：

.proto文件需要放在工程目录的 assert/resources目录下（没有则创建）否则无法通过cc.loader.loadRes函数读取到该文件。

测试如下：

proto文件：

//登陆数据
message Login{
		// 命令
		required string cmd = 1;
		// 昵称
		required string name = 2;
		// 密码
		required string pw = 3;
}

新建一个简单地helloworld的creator文件即可，在onLoad()函数中添加如下代码：

cc.loader.loadRes("login", function(err, msg){
          cc.log("start load file");
          if (err) {
              cc.error(err.message || err);
              return;
          }
           cc.log(msg);
      
          let Build = ProtoBuf.loadProto(msg);
          if(Build){
            let LoginModule = Build.build("Login");
            if(LoginModule){

              let loginModule = new LoginModule();

              loginModule.set("cmd", "login");
              loginModule.set("name", "saint");
              loginModule.set("pw", "123456");

              let array = loginModule.toArrayBuffer();
              let message = LoginModule.decode(array);
              console.log(message.get("cmd"));
              console.log(message.get("name"));
              console.log(message.get("pw"));
              console.log("解析后接收到的的数据为：");
              console.log(message);
            }else{
              console.log("LoginModule is null");
            }
          }else{
            console.log("Build Faild!");
          }
      
      })

运行输出结果如下：

Simulator: start load file
Simulator: message Login{

Simulator: // 命令

Simulator: required string cmd = 1;

Simulator: // 昵称

Simulator: required string name = 2;

Simulator: // 密码

Simulator: required string pw = 3;
Simulator: }
Simulator: login
Simulator: saint
Simulator: 123456
Simulator: 解析后接收到的的数据为：
Simulator: .Login

正确的序列化和反序列化结果。

同时需要指出的是 cocos creator 采用的是websocket ！

websocket也是基于tcp的，相当于在tcp基础上封装了一层。 某种程度来说tcp的性能优于websocket，因为websocket就是在tcp的基础上多了一层转化，但是websocket使用更简单，用tcp的app端需要自己去读tcp流，根据包头和包体组装数据包，而websocket不需要，因为websocket会是一个整包的数据并不是流的形式。 具体来说，后端通过缓存区把数据冲刷（flush）给前端，app端拿到tcp数据流，需要根据消息头给定的消息体长度，去拿取后面多少位的数据，然后组装成一个数据包。 而websocket传输过来就是一个个的包，也就是帧并不是数据流，所以后端在给websocket数据的时候，必须要把一个整包，在缓冲区一次性冲刷过来，而给tcp的话就可以自由冲刷。

   也就是说如果服务端同样采用的是websocket的话（Node.js及 ws库），我们对消息是不需要添加数据头进行数据包的组装的。websocket是按照包一次性读取的。既我们不需要在手动的定义数据包头以及添加数据包长度信息。