1、
npm install -g protobufjs 安裝protobufjs
2、protobufjs\dist中找到protobuf.js文件,并作為插件拖放到Creator中(注意,必須作為插件,并且是四個選項都必須選中,否則將報錯!)
3、定義msg.proto文件,并將prot文件轉成對應的js版本.
命令:::protobuf.js版本6.x生成js文件 pbjs -t static-module -w commonjs -o Msg.js msg.proto msg.proto是proto文件,Msg.js是生成的js文件
4、修改Msg.js文件,注釋掉var $protobuf = require("protobufjs/minimal");
新增var $protobuf = protobuf;
5、將Msg.js拖放到Creator中,寫腳本:
var ipPort = "ws://" + this.ip + ":" + this.port;
console.log(ipPort);
this.ws = new WebSocket(ipPort);
this.ws.binaryType = 'arraybuffer'; //這里設置為發送二進制數據
this.ws.onopen = function (event) {
console.log("open");
//打開成功立刻進行發送
if (self.ws.readyState === WebSocket.OPEN) {
let message = msg.Login.create({name: "hello", pwd: "pwd"});//構造對象
let messageBuf = msg.Login.encode(message).finish(); //獲取二進制數據,一定要注意使用finish函數
self.ws.send(messageBuf); //發送二進制數據
}
};
this.ws.onmessage = function (event) {
console.log("onmessage : " + event.data);
};
this.ws.onerror = function (event) {
console.log("on error :", event.data);
};
this.ws.onclose = function (event) {
console.log("onclose");
};
6、組包使用ArrayBuffer這個數據結構,它
表示通用的、固定長度的原始二進制數據緩沖區。
ArrayBuffer
不能直接操作,而是要通過
類型數組對象或
DataView
對象來操作,它們會將緩沖區中的數據表示為特定的格式,并通過這些格式來讀寫緩沖區的內容。
let message = msg.Login.create({name: "hello", pwd: "pwd"});
let msgEncode = msg.Login.encode(message).finish(); //一定要注意使用finish函數
//二進制數據的長度+一個short的長度
var sendBuf = new ArrayBuffer(msgEncode.length + 2);
var dv = new DataView(sendBuf);
dv.setInt16(0,1); //寫入一個short值
起始位置以byte為計數的指定偏移量(byteOffset)處儲存一個16-bit數 //將二進制數據寫入
var u8view = new Uint8Array(sendBuf, 2); //跳過一個short的距離
for (var i = 0, strLen = msgEncode.length; i < strLen; ++i){
u8view[i] = msgEncode[i];
}
self.ws.send(sendBuf);
7、解包:
this.ws.onmessage = function (event) {
console.log("onmessage : " + event.data);
var recv_data = event.data
var dv = new DataView(recv_data);
var len = dv.getInt16(0) //相對于起始位置偏移 n 個字節處開始,獲取一個16-bit數(短整型,2個字節).
//消息體
var data_body = new Uint8Array(recv_data, 4);
//轉成PB消息體
let message = msg.Login.decode(data_body);//構造對象
8、解包格式應和組包格式一樣;cocos下經過命令處理后的消息js文件不能作為插件使用,使用的時候切記
9、https://github.com/zimv/websocket-heartbeat-js,這是一個封裝好的帶有心跳和重連websocket,可以直接拿來使用