白鹭egret配合protobufjs的使用

Posted 2023-02-10 雷乌斯

说一下版本，如果和你使用的版本不同的话，不保证有效。

.proto文件的写法使用的是protobuf2，不是protobuf3，也不是用了syntax=2的protobuf3。

白鹭引擎版本5.0.13

protobufjs版本6.7.0

------------------------------------------------------------------

先说明一下，我自己之前也在网上翻了不少相关的帖子，几乎所有的都是使用“把.proto文件当成资源动态加载进来，然后解析使用”的方法，但是这个方法有2个不好的地方。

1、解析需要消耗运行时的时间

2、最重要的，写代码的时候没有自动完成。

然后我发现了现在版本的protobufjs有提供命令行工具可以把proto文件转为d.ts文件和js文件的，也就是说其实是可以像其他语言那样，编译成静态的代码来使用的。

第一步：

安装nodejs（因为protobufjs的使用需要nodejs）

然后去protobufjs的官网

dcode.io/protobuf.js

按照说明，在命令行工具里为nodejs安装protobufjs，安装完后就可以在命令行中使用pbjs和pbts2个指令了。

第二步：

准备好你的.proto文件，比如common.proto，battle.proto。

使用命令

pbjs -t static-module -w closure -o protocol.js common.proto battle.proto

这里我是手写了2个文件名在后面，实际到项目中的话需要在批处理脚本里写个for循环把整个文件夹下的proto文件都加进来。

注意warp模式要是closure，官网给的例子是commonjs模式，commonjs是给nodejs用的，这样生成的ts文件里会带有import和export等函数，这个是在浏览器下没有的函数，编译会不通过。

上面代码跑完之后，就会在当前的目录下得到一个protocol.js文件，他包含了你导入的所有proto文件的内容。

第三步：

使用命令

pbts -o protocol.d.ts protocol.js

你会得到一个d.ts文件，这个就相当于刚才的js的头文件了，有了他就可以在代码里获得自动完成功能了。

第四步：

把protobufjs的github上的\\dist\\minimal\\下的4个文件拖到你的白鹭项目的libs目录下，

把刚才生成的d.ts文件和js文件拖到你的白鹭项目的libs目录下，

我是这样的：

protocol.min.js是我自己用uglifyjs命令行工具自动生成的，uglifyjs也是nodejs提供的一个模块，感兴趣的可以去搜一下，能压缩不少。

然后修改你的egretproperties.json文件，在modules数组里加上

    
      "name": "protobuf",
      "path": "./libs/protobuf"
    ,
    
      "name": "protocol",
      "path": "./libs/protobuf"
    

第二个name填你自己刚才输出的文件名。

第五步：

你会发现报错了。

在d.ts文件的第一行，把protobufjs改成./protobuf。

如果你在协议里使用了int64，你还会报一个找不到Long的错，所以在第一行后面再加上一行

import Long from "./protobuf"

然后，再加上一行

export as namespace protocol

第六步：

在你项目里加入这几行代码：

let _pbroots = protobuf.roots["default"];
let pb_common = _pbroots["pb_common"];
let pb_battle = _pbroots["pb_battle"];

class SocketUtil

  private static _socket:egret.WebSocket;
  ......

我是直接写在处理协议消息的Util类里了。

这里加上去的那几行代码是我蒙的，因为一直用不了，所以我去看了一下生成的js文件，发现东西都保存在一个roots.default的object下面，所以我就试着这么写了，发现真的可以用。。。。如果哪位大佬知道正确的用法，还劳烦留言告诉我一蛤。

注意pb_common和pb_battle是我在common.proto和battle.proto文件的第一行书写的包名，就像这样：

package pb_common;

第七步：

使用。

举个例子，发一个消息

let msg = new pb_battle.C_CAST();
msg.spellId = spellId;
msg.type = pb_common.CAST_TYPE.TYPE1;

收一个消息：

private _castHandler(msg:protocol.pb_battle.S_CAST):void

     if(msg.result != pb_scene.S_CAST.ErrorCode.OK)
     
        .....
        return;
     
     .....

同时，你将享受到自动完成的快感（滑稽）