您的位置:首页 > Web前端 > JavaScript

白鹭egret配合protobufjs的使用

2017-12-31 20:07 986 查看
说一下版本,如果和你使用的版本不同的话,不保证有效。

.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;
}
.....
}


同时,你将享受到自动完成的快感(滑稽)



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  egret 白鹭