欢迎大家来到Altaba的博客 2017年11月27日
相信随着H5的演进,我们越来越多接触到websocket的使用,本身就使用此技术并不难,但是在开发中会遇到各种无法预测的原因,有浏览器兼容问题,有后台的意外断开,状态百出。
本人前端开发遇到这样的问题:websocket部分使用了nginx服务,默认配置是60s,就是60s,如果一直没有数据传输,连接会在过了这个时间之后自动关闭。
解决:nginx配置改为600s,前端在onclose 函数体加入判断 然后重连
基于子慕大诗人博客阅读学习借鉴,不才在此做了一些优化,希望大家参阅
//2017年11月27日 修改websocket连接
var ws;//websocket实例
var lockReconnect = false;//避免重复连接
var wsUrl = "ws://"+'xxxxxxx';
function createWebSocket(url) {
try {
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
url = "http://" + 'xxxxxxx';
ws = new SockJS(url);
}
initEventHandle();
} catch (e) {
reconnect(url);
}
}
function initEventHandle() {
ws.onclose = function (evnt) {
//console.log('websocket服务关闭了');
reconnect(wsUrl);
};
ws.onerror = function (evnt) {
//console.log('websocket服务出错了');
reconnect(wsUrl);
};
ws.onopen = function (evnt) {
//心跳检测重置
heartCheck.reset().start();
};
ws.onmessage = function (evnt) {
//如果获取到消息,心跳检测重置
//拿到任何消息都说明当前连接是正常的
//console.log('websocket服务获得数据了');
//接受消息后的UI变化
doWithMsg(evnt.data);
heartCheck.reset().start();
}
//收到消息推送
function doWithMsg(msg) {
//......
}
}
function reconnect(url) {
if(lockReconnect) return;
lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
createWebSocket(url);
lockReconnect = false;
}, 2000);
}
//心跳检测
var heartCheck = {
timeout: 60000,//60秒
timeoutObj: null,
serverTimeoutObj: null,
reset: function(){
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function(){
var self = this;
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳,后端收到后,返回一个心跳消息,
//onmessage拿到返回的心跳就说明连接正常
ws.send("HeartBeat");
self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了
ws.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
}, self.timeout)
}, this.timeout)
}
}
//初始化websocket
createWebSocket(wsUrl);
借鉴于子慕大诗人相关博客
https://www.cnblogs.com/1wen/p/5808276.html