websocket 斷開重連
websocket 5行程式碼模子:
1.例項化WebSocket物件
var old=new WebSocket("ws://xxx.xxxxx.xxx.xxxx");
2.回撥事件的處理
old.onerror = function(){}
old.onopen = function(){}
old.onmessage=function(evt){}
old.onclose=function(){}
WebSocket斷開或斷網情況下用以下方法嘗試重連但無效
//連線關閉的回撥方法
old.close=function(){
//alert("flow.html:WebSocket失效連線關閉");
console.lgo("flow.html:WebSocket失效連線關閉");
//1. reload方法,該方法強迫瀏覽器重新整理當前頁面(可行,但拙)
window.location.reload();
//2.重新new(不可行)
//xin=new WebSocket("ws://xxxx.xxxxx.xxx.xxxx");
//old = null;
//old = xin;
}
github上找到個重連包
https://github.com/joewalnes/reconnecting-websocket
reconnecting-websocket.js
reconnecting-websocket.min.js
//引入
<script type="text/javascript" src="xxxx/reconnecting-websocket.js"></script>
//開啟一個websocket,自動提交表單到後臺controller,以繫結client_id
var url ="ws://xxx.xxxxx.xxx.xxxx";
//var old = new WebSocket(url);
var old=new ReconnectingWebSocket(url);
old.debug = true;
old.timeoutInterval = 5400;
以上寫法會不定時長斷開
心跳包重連
http://www.voidcn.com/article/p-zshodvff-mm.html
http://www.voidcn.com/article/p-trguhbme-bnu.html
斷線重連?
心跳包重連CODE
===========================================心跳包重連CODE START===============================================
var lockReconnect = false; //避免ws重複連線
var ws=null; //判斷當前瀏覽器是否支援WebSocket
var wsUrl = "ws://xxx.xxxxx.xxx.xxxx";
createWebSocket(wsUrl); //連線ws
function createWebSocket(url){
try{
if('WebSocket' in window){
ws=new WebSocket(url);
}else if ('MozWebSocket' in window){
ws = new MozWebSocket(url);
}else{
layui.use([''],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);
};
}
//監聽視窗關閉事件,當視窗關閉時,主動去關閉WebSocket連線,防止連線還沒斷開就關閉視窗,server端後丟擲異常
window.onbeforeunload=function(){
ws.close();
}
function reconnect(url){
if(lockReconnect) return;
lockReconnect = true;
setTimeout(function(){ //沒連線上會一直重連,設定延遲避免請求過多
createWebSocket(url);
lockReconnect = false;
},2000);
}
//心跳檢測
var heartCheck = {
//timeout:540000, //9分鐘發一次心跳
//timeout:3600,//1分鐘發一次心跳
timeout:10800,//3分鐘發一次心跳
timeoutobj:null,
serverTimeoutObj:null,
reset:function(){
clearTimeout(this.timeoutObj);
clearTimeout(this.TimeoutObj);
return this;
},
start:function(){
var self=this;
this.timeoutObj = setTimeout(function(){
//這裡傳送一個心跳,後端收到後,返回一個心跳資訊
//onmessage拿到返回的心跳就說明連線正常
ws.send("ping");
console.log("ping!");
self.serverTimeoutObj=setTimeout(function(){
//如果超過一定時間還沒重置,說明後端主動斷開了
//如果onclose會執行reconnect,我們執行ws.close()就行了,如果直接執行reconnect會觸發onclose導致重連兩次
ws.close();
},self.timeout)
},this.timeout)
}
}
======================================心跳包重連code end===============================
//處理訊息
function handMsg(evtdata){}