这里主要是前台回调的方法我进行了封装处理,因为一直没看到有人在前台调用的回调处理,
这里利用了es6中的new Map(),当然也可以替换,欢迎来指导。
我这面是利用protoc.exe把pb文件转成js 做的业务处理,这个如果是小白会比较难受的一点,业务代码不上了。
class soket{
_config={ //用来存逻辑
token = ''
}
webSocket = null; //websocket实例
socketOpen = false; //websocket是否链接
globalCallback = new Map() //回调
/**
* webSocket初始化
* @param {*} token
*/
init(token) {
this.webSocket = wx.connectSocket({
url: host,
header: {
'content-type': 'application/json'
}
})
this._config.token = token
}
/**
* 链接
* @param {*} token
*/
connect(){
//连接建立时触发
this.webSocket.onOpen(res => {
this.socketOpen = true;
console.log('监听 WebSocket 连接打开事件。', res);
this.ComMonReq(reMsg)
})
// 连接关闭时触发
this.webSocket.onClose(onClose => {
this.socketOpen = false;
console.log('监听 WebSocket 连接关闭事件。', onClose)
this.onClose(onClose)
})
//通信发生错误时触发
this.webSocket.onError(onError => {
this.socketOpen = false;
console.log('监听 WebSocket 错误。错误信息', onError)
this.onError(onError)
})
//客户端接收服务端数据时触发
this.webSocket.onMessage((onMessageData) => {
this.handleEvent(onMessageData)
});
}
/**
* 处理消息回调
* @param {*} onMessageData
*/
handleEvent(onMessageData){
//这里需要用pb方法对onMessageData反序列化二进制,能拿到data、和响应的标识(action)。
let action,data;
let gbCallback = this.globalCallback.get(action)
gbCallback && gbCallback (data)
}
sendMsg(){
//使用连接发送数据
if (this.socketOpen) {
this.webSocket.send({
data: msg
}, function (res) { })
}
}
/**
* 是用来发请求的公共部分的方法
* @param {*} reMsg 回调函数
*/
ComMonReq(reMsg){
let bytes //这里把请求进行序列化二进制
let callbackMap = new Map([
'key':'value'
])
let num = callbackMap.get('key') //主要是把请求和响应的方法对应上(为了响应时能找到)
this.globalCallback.set(num, reMsg)
this.sendMsg(bytes)
}
}
export default socket
调用方法: 这里心跳与业务相关就不贴代码了
import socket from "../../utils/socket ";
var websocket = new socket();
methods: {
wstinit(token){
websocket.init(token);
//连接
websocket.connect(data=>{
console.log("连接成功");
})
//断开重连
websocket.onClose = function(e) {
setTimeout(() => {
console.log("close重连中...");
_this.wstinit(_this.token);
}, 15000);
}
websocket.onError = function(e) {};
}
}
}