Topwo博客-在H5引擎中如何使用Protobuf

您现在的位置是：Topwo博客>>JavaScript文章

在H5引擎中如何使用Protobuf

发布时间：2022-02-18作者：Topwo来源：原创点击：435

demo下载：
[https://files-cdn.cnblogs.com/files/gamedaybyday/Egret3.2.6_ProtobufExample.7z](https://files-cdn.cnblogs.com/files/gamedaybyday/Egret3.2.6_ProtobufExample.7z)

protobuf简介
百度百科：protocolbuffer(以下简称PB)是google 的一种数据交换的格式，它独立于语言，独立于平台。google 提供了多种语言的实现：java、c#、c++、go和python，每一种实现都包含了相应语言的编译器以及库文件。由于它是一种二进制的格式，比使用xml进行数据交换快许多。可以把它用于分布式应用之间的数据通信或者异构环境下的数据交换。作为一种效率和兼容性都很优秀的二进制数据传输格式，可以用于诸如网络传输、配置文件、数据存储等诸多领域。

参考：
[protocol buffer_百度百科](http://baike.baidu.com/link?url=-9ShgFrE73nQ-CleSb7rAf6sc88UpDWKt4GKSYGyEQlsfdGe6DdxIxMFRQg6AuEYhXHbntg-cHL7Ww3lpnQlB6hOuFIt93btwc9HjYe3OEq)  
[中重度游戏开发框架：EGER PRO开发教程](http://bbs.egret.com/forum.php?mod=viewthread&tid=13947&highlight=%E6%A1%86%E6%9E%B6)
[google_protobuf数据类型](http://blog.csdn.net/superbfly/article/details/17920383)

## 使用protobuf
### 1. 导入第三方库
我直接把protobuf第三方库放在了项目中.
![](http://uploadqn.topwo.com/topwo_site/5d15508ca11377c62a66f21afc767a23.png)

修改egretProperties.json文件，增加protobuf库。添加完成后，需要编译引擎。
![](http://uploadqn.topwo.com/topwo_site/7cbd5bc6bf0ccc93a120a20652200e60.png)

### 2. 编写protobuf文件
新建一个文件template.proto
我这里编写一个测试用数据，user_login
![](http://uploadqn.topwo.com/topwo_site/b88d4cb70c63c0ce2300c6402b0de1d5.png)

### 3. 加载protobuf文件
注意类型要是text
![](http://uploadqn.topwo.com/topwo_site/96f4171ca60180b3732aa008f7908f47.png)

### 4. 使用protobuf
读取template_proto文件

```
var message = dcodeIO.ProtoBuf.loadProto(RES.getRes("template_proto"));
```
新建一个user_login类
```
var user_login_class = message.build("user_login");
var user_login = new user_login_class();
user_login.userId = 123;
user_login.userName = "peter";
```

将user_login转成字节
```
var bytes = user_login.toArrayBuffer();
```

socket发送user_login
```
var socket:egret.WebSocket = new egret.WebSocket();
socket.writeBytes(bytes);
socket.flush();
```

接收数据的处理
```
//接收服务端数据（假设byteArray是服务端websocket接收数据）
var revData:egret.ByteArray = byteArray;

//读取数据
 var user_login = user_login_class.decode(revData.buffer);
console.log("接收数据：", user_login);
```

## 其他：
1、怎么自动将.proto文件导出成ts文件？有没有现成工具？
-------------------------------

比如一个.proto文件里有

```
message user_login{
    required int32 userId = 1;
    required string userName = 2;
}

message user_login2{
    required int32 userId = 1;
    required string userName = 2;
}
```

怎么导出ts的文件，在egret中直接使用

```
class user_login{
     public userId:number;
     public userName:string;  
}

class user_login2{
     public userId:number;
     public userName:string;  
}
```

[protobufjs工具](https://www.npmjs.com/package/protobufjs)
--------------------------------------------------------

准备一个测试用的.proto文件
![](http://uploadqn.topwo.com/topwo_site/de1f00b5663e77afe1bc48c7cf2b94fc.png)

在安装了nodejs的情况下，全局安装protobufjs。打开cmd窗口，输入：

```
npm install protobufjs -g
```

然后在你的proto文件的目录下，打开cmd窗口，输入：
```
pbjs -t static-module -w commonjs -o template.js template.proto
pbts -o template.d.ts template.js　
```
![](http://uploadqn.topwo.com/topwo_site/8abad9e4e86e6d1c5b5bd87f94605654.png)

得到如下文件：
![](http://uploadqn.topwo.com/topwo_site/5c0ed83366e15de339a46eeb5fc25686.png)

仅仅是一些测试数据，但是文件达到了80kb+。生成的template.js里的代码太多了。
![](http://uploadqn.topwo.com/topwo_site/067f64263784c84c71241e6f2fddd3e3.png)

生成的文件还有问题。参考：[Babel 入门教程](http://www.ruanyifeng.com/blog/2016/01/babel.html)

[egret官方提供的工具](https://github.com/WanderWang/protobuf-egret/)
-------------------------------------------------------------

下载demo瞅瞅，也是封装protobufjs。
![](http://uploadqn.topwo.com/topwo_site/387abb4a2297cfe645da4182445079ac.png)
.gitignore：忽略文件
dist：存放了protobuf-library.js库
egret-project：白鹭项目
egret-project_wxgame：白鹭小游戏项目
out：存放cli.js、index.js，用于拷贝protobuf源码到白鹭项目，添加protobuf到egretProperties.json配置文件中等等
src：存放index.ts
package.json、tsconfig.json：其他等等配置文件
![](http://uploadqn.topwo.com/topwo_site/18241e8f28dc4a030319e42c5554df51.png)

根据教程尝试安装。全局安装protobufjs。
```
npm install protobufjs@6.8.4 -g
npm install @egret/protobuf -g
```
![](http://uploadqn.topwo.com/topwo_site/dae7b0ef3ad35425a11a03e85550907a.png)

在你的白鹭项目下，打开cmd窗口，输入pb-egret add，将代码和项目结构拷贝至白鹭项目中
```
pb-egret add
```

譬如我的白鹭项目是TTT
![](http://uploadqn.topwo.com/topwo_site/9355242714b0ea430c7cbdeff2d676ae.png)

这是会项目目录下会新增一些文件，配置文件也会自动被修改
将测试用的.proto文件放在项目目录TTT\protobuf\protofile下
![](http://uploadqn.topwo.com/topwo_site/e12413c3553b24502ae602118e910bba.png)

.proto一定要有package
![](http://uploadqn.topwo.com/topwo_site/ee4d56f4b23226142ef767f588db75f3.png)

cmd中输入pb-egret generate，文件将会生成到 protobuf/bundles 文件夹中
```
pb-egret generate
```

生成的文件如下。这是.proto文件转成的js库，已经自动配置到egretProperties.json中了。
![](http://uploadqn.topwo.com/topwo_site/f48d79b16b37cb75bb079fa5119a5a14.png)

代码中使用（未实际测试）
```
//create user_login
let sendData = new template.user_login();
sendData.userId = 1;
sendData.userName = "abc";

//encode user_login
let sendByte = template.user_login.encode(sendData).finish();

//websocket send
let byteArray:egret.ByteArray = new egret.ByteArray(sendByte);
let socket:egret.WebSocket = new egret.WebSocket();
socket.writeBytes(byteArray);
socket.flush();

//decode user_login
let user_login = template.user_login.decode(sendByte);
console.log(user_login.userId,  user_login.userName);  //输出1 "abc"
```

我们打开protobuf-bundles.js，会发现user_login里有有以下方法
> create
> encode
> encodeDelimited
> decode
> decodeDelimited
> fromObject
> toObject
> toJSON
> verify
> convert

精简生成文件
------
我们可以对该生成规则进行精简，在生成js文件时，生成指定的方法，减少文件大小

### 一、首先修改out文件夹下的index.js
讲generate下的case14修改如下
![](http://uploadqn.topwo.com/topwo_site/b6f588dd184f247df0d9ef5b0ce3f3c2.png)

### 二、再修改项目protobuf文件夹下的pbconfig.json
修改如下
![](http://uploadqn.topwo.com/topwo_site/77b47b02331a91d6b801599266fadd03.png)

### 三、再次打开cmd窗口pb-egret generate生成一次proto文件
会发现create，verify、convert、delimited方法没有了。

### 四、关于protobuf-bundles.js中的注释，则无需精简，再发布项目时，会自动压缩去掉这些注释。

## 参考：
1. [CSDN：Egret项目中使用protobuf](https://blog.csdn.net/letthinking/article/details/77750856)（protobufjs）
2. [在cocos creator中使用protobufjs](http://forum.cocos.com/t/cocos-creator-protobufjs/48124)
3. [layabox：网络和格式--ProtocolBuffer](https://layaair.ldc.layabox.com/demo/?category=2d&group=Network&name=ProtocolBuffer)
4. [egret protobuf](https://github.com/WanderWang/protobuf-egret/)（egret官方提供的工具，自动配置和生成）

上一篇：解决electron-v9.0.2-darwin-x64.zip安装包下载慢的问题

下一篇：Android内存泄露检测之LeakCanary的使用