1、
npm install -g protobufjs 安裝protobufjs
2、protobufjs\dist中找到protobuf.js文件，并作為插件拖放到Creator中（注意，必須作為插件，并且是四個(gè)選項(xiàng)都必須選中，否則將報(bào)錯(cuò)！）
3、定義msg.proto文件，并將prot文件轉(zhuǎn)成對(duì)應(yīng)的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'; //這里設(shè)置為發(fā)送二進(jìn)制數(shù)據(jù)
this.ws.onopen = function (event) {
console.log("open");
//打開成功立刻進(jìn)行發(fā)送
if (self.ws.readyState === WebSocket.OPEN) {
let message = msg.Login.create({name: "hello", pwd: "pwd"});//構(gòu)造對(duì)象
let messageBuf = msg.Login.encode(message).finish(); //獲取二進(jìn)制數(shù)據(jù)，一定要注意使用finish函數(shù)
self.ws.send(messageBuf); //發(fā)送二進(jìn)制數(shù)據(jù)
}
};
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這個(gè)數(shù)據(jù)結(jié)構(gòu)，它
表示通用的、固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。
ArrayBuffer 不能直接操作，而是要通過
類型數(shù)組對(duì)象或
DataView 對(duì)象來操作，它們會(huì)將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過這些格式來讀寫緩沖區(qū)的內(nèi)容。
let message = msg.Login.create({name: "hello", pwd: "pwd"});
let msgEncode = msg.Login.encode(message).finish(); //一定要注意使用finish函數(shù)
//二進(jìn)制數(shù)據(jù)的長度+一個(gè)short的長度
var sendBuf = new ArrayBuffer(msgEncode.length + 2);
var dv = new DataView(sendBuf);
dv.setInt16(0,1); //寫入一個(gè)short值
起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)16-bit數(shù) //將二進(jìn)制數(shù)據(jù)寫入
var u8view = new Uint8Array(sendBuf, 2); //跳過一個(gè)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) //相對(duì)于起始位置偏移 n 個(gè)字節(jié)處開始，獲取一個(gè)16-bit數(shù)(短整型，2個(gè)字節(jié)).
//消息體
var data_body = new Uint8Array(recv_data, 4);
//轉(zhuǎn)成PB消息體
let message = msg.Login.decode(data_body);//構(gòu)造對(duì)象
8、解包格式應(yīng)和組包格式一樣；cocos下經(jīng)過命令處理后的消息js文件不能作為插件使用，使用的時(shí)候切記
9、https://github.com/zimv/websocket-heartbeat-js，這是一個(gè)封裝好的帶有心跳和重連websocket，可以直接拿來使用