protobuf在websocket通讯中的使用

柔光的暖阳◎ 2023-06-20 06:52 20阅读 0赞

# 教程目录   一 protobuf简介   二 使用protobuf   三 Demo下载 #

参考：

[CSDN：Egret项目中使用protobuf][CSDN_Egret_protobuf]（protobufjs）

[TS项目中使用Protobuf的解决方案][TS_Protobuf]（babel）

[在cocos creator中使用protobufjs][cocos creator_protobufjs]

[layabox：网络和格式--ProtocolBuffer][layabox_--ProtocolBuffer]

[egret protobuf][]（egret官方提供的工具，自动配置和生成）  
  
protobuf简介  
百度百科：protocolbuffer(以下简称PB)是google 的一种数据交换的格式，它独立于语言，[独立][Link 1]于平台。google 提供了多种语言的实现：java、[c\#][c]、[c++][c 1]、go 和 [python][]，每一种实现都包含了相应语言的[编译器][Link 2]以及库文件。由于它是一种二进制的格式，比使用[xml][] 进行数据交换快许多。可以把它用于[分布式应用][Link 3]之间的数据通信或者异构环境下的数据交换。作为一种效率和兼容性都很优秀的二进制数据传输格式，可以用于诸如网络传输、配置文件、数据存储等诸多领域。  
  
参考：[protocol buffer\_百度百科][protocol buffer]  [中重度游戏开发框架：EGER PRO开发教程][EGER PRO]  
[google\_protobuf数据类型][google_protobuf]        
  
  
使用protobuf  
1  导入第三方库  
我直接把protobuf第三方库放在了项目中..  
![format_png][]   
  
修改egretProperties.json文件，增加protobuf库。添加完成后，需要编译引擎。  
![format_png][]   
  
2 编写protobuf文件  
新建一个文件template.proto  
我这里编写一个测试用数据，user\_login  
![format_png][]   
  
3 加载protobuf文件  
  
注意类型要是text  
![format_png][]   
  
4 使用protobuf  
读取template\_proto文件

\[C++\] 纯文本查看 复制代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var message = dcodeIO.ProtoBuf.loadProto(RES.getRes(</code><code>"template_proto"</code><code>));</code></p> </td> 
  </tr> 
 </tbody> 
</table>

新建一个user\_login类

\[AppleScript\] 纯文本查看 复制代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>var user_login_class </code><code>=</code>&nbsp;<code>message</code><code>.build</code><code>(</code><code>"user_login"</code><code>)</code><code>;</code></p> <p><code>var user_login </code><code>=</code>&nbsp;<code>new</code>&nbsp;<code>user_login_class</code><code>(</code><code>)</code><code>;</code></p> <p><code>user_login.userId </code><code>=</code>&nbsp;<code>123</code><code>;</code></p> <p><code>user_login.userName </code><code>=</code>&nbsp;<code>"peter"</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

将user\_login转成字节

\[C\#\] 纯文本查看 复制代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var bytes = user_login.toArrayBuffer();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

socket发送user\_login

\[C\#\] 纯文本查看 复制代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>var socket:egret.WebSocket = </code><code>new</code>&nbsp;<code>egret.WebSocket();</code></p> <p><code>socket.writeBytes(bytes);</code></p> <p><code>socket.flush();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

接收数据的处理

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> 
   <td> <p><code>//接收服务端数据（假设byteArray是服务端websocket接收数据）</code></p> <p><code>var</code>&nbsp;<code>revData:egret.ByteArray = byteArray;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</p> <p><code>//读取数据</code></p> <p><code>&nbsp;</code><code>var</code>&nbsp;<code>user_login = user_login_class.decode(revData.buffer);</code></p> <p><code>console.log(</code><code>"接收数据："</code><code>, user_login);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[三 Demo下载][Demo]

其他：

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

比如一个.proto文件里有

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </td> 
   <td> <p><code>message user_login{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>required int32 userId = 1;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>required&nbsp;</code><code>string</code>&nbsp;<code>userName = 2;</code></p> <p><code>}</code></p> <p>&nbsp;</p> <p><code>message user_login2{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>required int32 userId = 1;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>required&nbsp;</code><code>string</code>&nbsp;<code>userName = 2;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </td> 
   <td> <p><code>class</code>&nbsp;<code>user_login{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code>&nbsp;<code>userId:number;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code>&nbsp;<code>userName:</code><code>string</code><code>;&nbsp;</code></p> <p><code>}</code></p> <p>&nbsp;</p> <p><code>class</code>&nbsp;<code>user_login2{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code>&nbsp;<code>userId:number;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code>&nbsp;<code>userName:</code><code>string</code><code>;&nbsp;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## [protobufjs工具][protobufjs] ##

准备一个测试用的.proto文件

![format_png 1][]

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm install protobufjs -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

然后在你的proto文件的目录下，打开cmd窗口

输入：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>pbjs -t&nbsp;</code><code>static</code><code>-module -w commonjs -o template.js template.proto</code></p> <p><code>pbts -o template.d.ts template.js　</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 2][]

得到如下文件：

![format_png 3][]

仅仅是一些测试数据，但是文件达到了80kb+。生成的template.js里的代码太多了。

![format_png 4][]

生成的文件还有问题。参考：[Babel 入门教程][Babel]

## [egret官方提供的工具][egret protobuf] ##

下载demo瞅瞅，也是封装protobufjs。

![format_png 5][]

dist                                     存放了protobuf-library.js库

egret-project                      白鹭项目

egret-project\_wxgame      白鹭小游戏项目

out                                     存放cli.js、index.js，用于拷贝protobuf源码到白鹭项目，添加protobuf到egretProperties.json配置文件中等等

src                                     存放index.ts

.gitignore                           忽略文件

package.json、tsconfig.json    其他等等配置文件

![format_png 6][]

根据教程尝试安装。全局安装protobufjs。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>npm install protobufjs@6.8.4 -g</code></p> <p><code>npm install @egret/protobuf -g</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 7][]

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>pb-egret add</code></p> </td> 
  </tr> 
 </tbody> 
</table>

譬如我的白鹭项目是TTT

![format_png 8][]

这是会项目目录下会新增一些文件，配置文件也会自动被修改

将测试用的.proto文件放在项目目录TTT\\protobuf\\protofile下

![format_png 9][]

.proto一定要有package

![format_png 10][]

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>pb-egret generate</code></p> </td> 
  </tr> 
 </tbody> 
</table>

生成的文件如下。这是.proto文件转成的js库，已经自动配置到egretProperties.json中了。

![format_png 11][]

代码中使用（未实际测试）

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> </td> 
   <td> <p><code>//create user_login</code></p> <p><code>let</code>&nbsp;<code>sendData =&nbsp;</code><code>new</code>&nbsp;<code>template.user_login();</code></p> <p><code>sendData.userId = 1;</code></p> <p><code>sendData.userName =&nbsp;</code><code>"abc"</code><code>;</code></p> <p>&nbsp;</p> <p><code>//encode user_login</code></p> <p><code>let</code>&nbsp;<code>sendByte = template.user_login.encode(sendData).finish();</code></p> <p>&nbsp;</p> <p><code>//websocket send</code></p> <p><code>let</code>&nbsp;<code>byteArray:egret.ByteArray =&nbsp;</code><code>new</code>&nbsp;<code>egret.ByteArray(sendByte);</code></p> <p><code>let</code>&nbsp;<code>socket:egret.WebSocket =&nbsp;</code><code>new</code>&nbsp;<code>egret.WebSocket();</code></p> <p><code>socket.writeBytes(byteArray);</code></p> <p><code>socket.flush();</code></p> <p>&nbsp;</p> <p><code>//decode user_login</code></p> <p><code>let</code>&nbsp;<code>user_login = template.user_login.decode(sendByte);</code></p> <p><code>console.log(user_login.userId,&nbsp; user_login.userName);&nbsp;&nbsp;</code><code>//输出1 "abc"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

我们打开protobuf-bundles.js，会发现user\_login里有有以下方法

create

encode

encodeDelimited

decode

decodeDelimited

fromObject

toObject

toJSON

verify

convert

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

## 精简生成文件 ##

一、首先修改out文件夹下的index.js

讲generate下的case14修改如下

![format_png 12][]

二、再修改项目protobuf文件夹下的pbconfig.json

修改如下

![format_png 13][]

三、再次打开cmd窗口pb-egret generate生成一次proto文件

会发现create，verify、convert、delimited方法没有了。

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

[CSDN_Egret_protobuf]: https://blog.csdn.net/letthinking/article/details/77750856
[TS_Protobuf]: http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece76310498b384f0a97634b868d4a68d4e409c43104161b20b7e8607c5613d3b22d3a5eb21a41e9f33d70350122b598c8824adfbd91283889537336439146669244e88b1772d621e61cbafa0ee7ccac65d6f99395cb110e8a050a38c0adcd071715ba3fb74026e3d7df03570807bb9d7134bf02356f882331a137f2f7416810f181ca2a38&p=c678c64ad4934eac5aa7e6265c0d&newp=c6658e1b86cc42ad46acc7710f5192695d0fc20e3cddd101298ffe0cc4241a1a1a3aecbf20261b02d6c27a6303aa435beaf636703d0034f1f689df08d2ecce7e31c9&user=baidu&fm=sc&query=protobuf+typescript+%B9%A4%BE%DF&qid=c134c8160003f92b&p1=9
[cocos creator_protobufjs]: http://forum.cocos.com/t/cocos-creator-protobufjs/48124
[layabox_--ProtocolBuffer]: https://layaair.ldc.layabox.com/demo/?category=2d&group=Network&name=ProtocolBuffer
[egret protobuf]: https://github.com/WanderWang/protobuf-egret/
[Link 1]: http://baike.baidu.com/item/%E7%8B%AC%E7%AB%8B/3259
[c]: http://baike.baidu.com/item/c%23
[c 1]: http://baike.baidu.com/item/c%2B%2B
[python]: http://baike.baidu.com/item/python
[Link 2]: http://baike.baidu.com/item/%E7%BC%96%E8%AF%91%E5%99%A8
[xml]: http://baike.baidu.com/item/xml
[Link 3]: http://baike.baidu.com/item/%E5%88%86%E5%B8%83%E5%BC%8F%E5%BA%94%E7%94%A8
[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
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5lZ3JldC5jb20vZm9ydW0ucGhw?x-oss-process=image/format,png
[Demo]: https://coding.net/u/gamedaybyday/p/EgretExample/git/tree/master/ProtobufExample
[protobufjs]: https://www.npmjs.com/package/protobufjs
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNjA4NDUzMDc5NC0xMzQzMDkxMDM5LnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNjA4NDM0NTEyMy0xMzExNDUzMTg5LnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNjA4NDQwMjc4Ny0yMDU1NTY1ODA2LnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4MTYyMTc3Ni0xODk4MTc0MTE0LnBuZw?x-oss-process=image/format,png
[Babel]: http://www.ruanyifeng.com/blog/2016/01/babel.html
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4MjUyMjM0MC0xMjEzMTg1OTY5LnBuZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4NDcyMzUyNS01MDM5MTc1NjYucG5n?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4MTgwMzM1My0xMzIwMzQyNTQ2LnBuZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4NDAwNTkyMS0xNTYyNzY0OTQxLnBuZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4NDIxMjEyMS0zNDU1ODg3MjIucG5n?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4NDMxMzU3Ny02MjM5ODg0MzEucG5n?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDYvMTA2MjE3NC0yMDE4MDYyNzA4NDQxMDYyOC0xMTE3NzE2NDc1LnBuZw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDgvMTA2MjE3NC0yMDE4MDgwMzEzNTU0MzY3My0xMzAyNDM0OTUwLnBuZw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA2MjE3NC8yMDE4MDgvMTA2MjE3NC0yMDE4MDgwMzEzNTY0ODM5OC0xNTMyNjgyNjgwLnBuZw?x-oss-process=image/format,png