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,可以直接拿来使用