教程目錄
一 protobuf簡介
二 使用protobuf
參考:
CSDN:Egret項目中使用protobuf(protobufjs)
TS項目中使用Protobuf的解決方案(babel)
egret protobuf(egret官方提供的工具,自動配置和生成)
demo下載:
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_百度百科 中重度游戲開發框架:EGER PRO開發教程
google_protobuf數據類型
使用protobuf
1 導入第三方庫
我直接把protobuf第三方庫放在了項目中..
修改egretProperties.json文件,增加protobuf庫。添加完成后,需要編譯引擎。
2 編寫protobuf文件
新建一個文件template.proto
我這里編寫一個測試用數據,user_login
3 加載protobuf文件
注意類型要是text
4 使用protobuf
讀取template_proto文件
|
1
|
var message = dcodeIO.ProtoBuf.loadProto(RES.getRes(
"template_proto"
));
|
新建一個user_login類
|
1
2
3
4
|
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轉成字節
|
1
|
var bytes = user_login.toArrayBuffer();
|
socket發送user_login
|
1
2
3
|
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工具
准備一個測試用的.proto文件

在安裝了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

得到如下文件:

僅僅是一些測試數據,但是文件達到了80kb+。生成的template.js里的代碼太多了。

生成的文件還有問題。參考:Babel 入門教程
egret官方提供的工具
下載demo瞅瞅,也是封裝protobufjs。

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 其他等等配置文件

根據教程嘗試安裝。全局安裝protobufjs。
npm install protobufjs@6.8.4 -g npm install @egret/protobuf -g

在你的白鷺項目下,打開cmd窗口,輸入pb-egret add,將代碼和項目結構拷貝至白鷺項目中
pb-egret add
譬如我的白鷺項目是TTT

這是會項目目錄下會新增一些文件,配置文件也會自動被修改
將測試用的.proto文件放在項目目錄TTT\protobuf\protofile下

.proto一定要有package

cmd中輸入pb-egret generate,文件將會生成到 protobuf/bundles 文件夾中
pb-egret generate
生成的文件如下。這是.proto文件轉成的js庫,已經自動配置到egretProperties.json中了。

代碼中使用(未實際測試)
//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修改如下

二、再修改項目protobuf文件夾下的pbconfig.json
修改如下

三、再次打開cmd窗口pb-egret generate生成一次proto文件
會發現create,verify、convert、delimited方法沒有了。
四、關於protobuf-bundles.js中的注釋,則無需精簡,再發布項目時,會自動壓縮去掉這些注釋。
