【咸魚教程】protobuf在websocket通訊中的使用


教程目錄
一 protobuf簡介
二 使用protobuf

參考:

CSDN:Egret項目中使用protobuf(protobufjs)

TS項目中使用Protobuf的解決方案(babel)

在cocos creator中使用protobufjs

layabox:網絡和格式--ProtocolBuffer

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文件

[C++]  純文本查看 復制代碼
?
1
var message = dcodeIO.ProtoBuf.loadProto(RES.getRes( "template_proto" ));



新建一個user_login類

[AppleScript]  純文本查看 復制代碼
?
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轉成字節

[C#]  純文本查看 復制代碼
?
1
var bytes = user_login.toArrayBuffer();



socket發送user_login

[C#]  純文本查看 復制代碼
?
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中的注釋,則無需精簡,再發布項目時,會自動壓縮去掉這些注釋。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM