前端websockt可重连功能的插件

详情参考：

https://www.cnblogs.com/HendSame-JMZ/p/6383443.html

下载两个包后，直接引入html：

https://github.com/tangcc8/reconnecting-websocket

https://github.com/tangcc8/offline

效果：

最终的效果是：当网络断开连接后，会先重连3000次，如果3000次重连不上则浏览器放弃重连，开始监听网络状态，如果网络一恢复，则直接刷新页面，恢复数据正常。

demo:

var socketStatus=false;
function tanchuang(){
    Offline.check();
    if(!socketStatus){
        $('.big_toast div').html('网络连接已断开！');
        $('.big_toast').css('left', '45%');
        $('.big_toast').fadeIn("fast");
        $('.big_toast').fadeOut(2000);
        if(Offline.state === 'up' && websocket.reconnectAttempts>websocket.maxReconnectInterval){
            window.location.reload();
        }
    //    buildSocket();
    }else{
        websocket.send("{}");
    }
}
var websocket;
buildSocket();
function buildSocket(){
        if ('WebSocket' in window) {      
            websocket = new ReconnectingWebSocket("ws://host/websocket/get/overview");
        } else if ('MozWebSocket' in window) {
            //   websocket = new MozWebSocket("ws://host/websocket/get/all/data/rt");
            websocket = new MozWebSocket("ws://host/websocket/get/overview");
        } else {
            //   websocket = new SockJS("http://192.168.1.114/sockjs/websocket/get/all/data/rt");
            websocket = new SockJS("http://host/websocket/get/overview");
                     
        }
        
}
websocket.onopen = function (evnt) {
    socketStatus=true;
    clearInterval(t1);//去掉定时器
    t2=setInterval(tanchuang,3000);
    // tanchuang();
};
websocket.onmessage = function (evnt) {
};
websocket.onerror = function (evnt) {
    socketStatus=false;
};
websocket.onclose = function (evnt) {
    socketStatus=false;
};

这是实践代码（增加了心跳给后台做判断前台是否还在连接中）：

<script>
var interval;
var wsUri ="ws://192.168.1.107/webSocket/9999";

var socket = new ReconnectingWebSocket(wsUri);
socket.debug = true;//开启高度模式
socket.timeoutInterval = 5400;//重连间隔
socket.onmessage = function (message) {
    // 处理服务器推送过来的数据
    console.log(message);
};
socket.onopen = function () {
    //链接打开
    console.log("Connected to notification socket");
    interval=setInterval(function () {
        var send_data={type:'beat'};
        var str=JSON.stringify(send_data);
        socket.send(str);
    },5000);
}
socket.onclose = function () {
    //链接关闭
    clearInterval(interval);
    console.log("Disconnected to notification socket");
}

</script>