var wsClient = {
socket: null, //websocket的实例
lockReconnect: false, //避免重复连接
timeout: 1000, //60秒
timeoutObj: null,
serverTimeoutObj: null,
getwebsocket: function (wsUrl,appKey,alias) { //新建websocket的函数 页面初始化 断开连接时重新调用
var self = this;
if (wsUrl == null || wsUrl == "" || wsUrl == undefined) {
console.log('无效连接地址');
return
}
this.socket = new WebSocket(wsUrl);
this.socket.onerror = function (event) {
console.log('websocket服务出错了');
self.reconnect(wsUrl);
};
this.socket.onclose = function (event) {
console.log('websocket服务关闭了');
self.reconnect(wsUrl);
};
this.socket.onopen = function (event) {
console.log('websocket 开启了 '+alias);
self.socket.send('{"alias":"'+alias+'","appkey":"'+appKey+'"}')
};
this.socket.onmessage = function (event) {
//如果获取到消息,心跳检测重置
//拿到任何消息都说明当前连接是正常的
//console.log('websocket服务获得数据了');
//接受消息后的UI变化
self.doWithMsg(event);
self.reset().start();
};
return self.socket;
},
reconnect: function (url) {
var self = this;
if (self.lockReconnect) return;
self.lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
self.getwebsocket();
self.lockReconnect = false;
}, 2000);
},
//心跳检测
reset: function () {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
var self = this;
this.timeoutObj = setTimeout(function () {
//这里发送一个心跳,后端收到后,返回一个心跳消息,
//onmessage拿到返回的心跳就说明连接正常
self.socket.send(1);
console.log('websocket 心跳检测');
self.serverTimeoutObj = setTimeout(function () { //如果超过一定时间还没重置,说明后端主动断开了
self.socket.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
console.log('websocket 主动断开');
}, self.timeout)
}, this.timeout)
}
}
使用方式:
//1、扩展消息体处理的业务方法
wsClient.doWithMsg=function(event){
alert()
}
//2、连接 ws服务器
var wsSocket=wsClient.getwebsocket(wsUrl,"appkey","alias")