断线重连与心跳包重连
公司最近在做一个抽奖的运用,年会快到了嘛
应用基于微信页来做开发的,其中有一个功能是需要即时交互,在团队定下的方案中,就用socket,于是我便和websocket会面了;
runoob上的例子:http://www.runoob.com/html/html5-websocket.html
看到网上html websocket很多的代码demo都是这样5行代码一个模子:
1.实例化WebSocket对象
var old = new WebSocket("ws://xxxx.xxxxx.xxx:xxxx");
2.回调事件的处理
old.Onerror= function () {}
old.Onopen= function(){}
old.Onmessage= function (evt){}
old.Onclose= function () {}
我碰到了重连失败的这个问题(websocket断开连不上,断网情况连不上),我尝试这样处理重连,但无效:
old.Onclose= function () {
console.log("flow.html:WebSocket失效连接关闭");
window.location.reload();
}
暂时拙用了html中window.location.reload();在当前html页websocket失效的时候再重新加载,当然这是不行的;
于是便暂放了一下,先用html reload()的方式顶着先,一定会找到方法;
网上找个重连包吧,搜的一下,github上找到这个:
https://github.com/joewalnes/reconnecting-websocket
reconnecting-websocket.js
reconnecting-websocket.min.js
引入
var url = "ws://xxx.xxxxx.xxx:xxxx";
var old = new ReconnectingWebSocket(url);
old.debug = true;
old.timeoutInterval = 5400;
打开手机,打开秒表(噔噔噔…),测试看看到底有没有效果:
16:17 开始,有效,收到即时消息
16:20 有效,收到即时消息
16:35 失效,未收到即时消息
用时17:54 59;
-》重连失败!(吼吼啊啊啊,我要疯了...难道是用错了??)
————————————————————-2018年01月31日 11:59:54—————————————————————
这个重连的问题困扰我很多天了,想不明白是个啥原因,也不知道怎么做,有点灰心,现在
5分钟就断开了,然后连不了…唉!!
再测一次吧,这个代码:
var websocket = new ReconnectingWebSocket(url);
//websocket.debug = true;//之前打了个true,不会是debug true值导致的重连无效吧???被自己坑了??!!!
websocket.debug = false;
websocket.timeoutInterval = 3000;
18:18 ok
18:20 ok
18:22 ok //中间手机熄了一次屏
18:25 ok
18:27 ok
18:31 no!
时长约13Min;
再测一次吧,这个代码2:
var websocket = new ReconnectingWebSocket(url);
//websocket.debug = true;
//websocket.debug = false;
//websocket.timeoutInterval = 3000;
18:38 ok
18:40 ok
18:45 no(此时已经断了,网络不稳定原因,连发了3次,html websocket没有收到消息),此时接着页面刷新测->
18:45 ok
18:50 ok
18:55 ok
19:00 ok(关掉屏幕Android休眠)
19:07 断了! (这次时长20分钟,说明它还可以更长时间的连接,没有问题)
19:10
19:15
19:20
19:25
19:30
排原因:微信浏览器缓存,缓存了上次修改的js,css,清除缓存:退出微信号,kill应用进程,再登录微信,访问html页面;
休眠的问题!:
相关博客:
1.websocket聊天室,一开始能用聊天,手机休眠后,就不能用了
2.Android锁屏休眠唤醒后,为什么WebSocket和Ajax在后台不能正常工作
3.websocket中wss在ios中,无法断开重连
4.html5+Javascript 有什么方法能让手机浏览器不休眠吗?
那就测休眠:
var websocket = new ReconnectingWebSocket(url);
19:24 开始休眠(android huawei)
19:29 断了。
android休眠后,重新开启时,浏览器如何告诉html,android设备已经不是休眠状态了?有这样的东西吗??这种事件检测已经不是浏览器支持的能力了…这种能力的支持对用户手机是相当不安全的,此事告一段落,原来是这个原因…
结论:只有在android/ios手机设备不休眠的先决条件下,html websocket才能重连;(结论是错误的!…记2018年 02月 06日 星期二 08:55:57 CST)
————————————————————-2018年 02月 03日 星期六 17:27:50 CST—————————————————————
读者看到,如有误,请纠正,感谢不尽。
这个问题还没解决,手机不休眠下重连,还是失败的,根本不知道它什么时候会失效,就是断了,连不上;
————————————————————-2018年 02月 05日 星期一 15:24:17 CST—————————————————————
心跳包重连?
http://www.voidcn.com/article/p-zshodvff-mm.html
http://www.voidcn.com/article/p-trguhbme-bnu.html
断线重连?
心跳包重连CODE:
var lockRecOnnect= false;
var ws = null;
var wsUrl = "ws://xxx.xxxxx.xxx:xxxx";
createWebSocket(wsUrl);
function createWebSocket(url) {
try {
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
layui.use(['layer'], function () {
var layer = layui.layer;
layer.alert("您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器,请勿使用IE10以下浏览器,360浏览器请使用极速模式,不要使用兼容模式!");
});
}
initEventHandle();
} catch (e) {
reconnect(url);
console.log(e);
}
}
function initEventHandle() {
ws.Onclose= function () {
console.log("llws连接关闭!" + new Date().toUTCString());
reconnect(wsUrl);
};
ws.Onerror= function () {
console.log("llws连接错误!");
reconnect(wsUrl);
};
ws.Onopen= function () {
heartCheck.reset().start();
console.log("llws连接成功!" + new Date().toUTCString());
};
ws.Onmessage= function (event) {
heartCheck.reset().start();
var eventData = event.data;
handMsg(eventData);
};
}
window.Onbeforeunload= function () {
ws.close();
}
function reconnect(url) {
if (lockReconnect) return;
lockRecOnnect= true;
setTimeout(function () {
createWebSocket(url);
lockRecOnnect= false;
}, 2000);
}
var heartCheck = {
timeout: 10800,
timeoutObj: null,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
var self = this;
this.timeoutObj = setTimeout(function () {
ws.send("ping");
console.log("ping!")
self.serverTimeoutObj = setTimeout(function () {
ws.close();
},self.timeout)
},this.timeout)
}
}
function handMsg(evtdata) {}
(3分钟发一次心跳)测试:
14:16 ok
14:19 ok
14:21 ok
14:25 ok
14:28 ok
14:36 ok
15:04 ok
16:00
终于ok,泥妹的,中文逗号
————————————————————2018年 02月 06日 星期二 14:12:48 CST—————————————————————