给websocket加入心跳包防止自动断开连接

简介: var userId=$("#userId").val();var lockReconnect = false; //避免ws重复连接var ws = null; // 判断当前浏览器是否支持WebSocketvar wsUrl = serverConfig.
var userId=$("#userId").val();
var lockReconnect = false;  //避免ws重复连接
var ws = null;          // 判断当前浏览器是否支持WebSocket
var wsUrl = serverConfig.cyberhouse_ws+userId;
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(['layer'],function(){
              var layer = layui.layer;
              layer.alert("您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器,请勿使用IE10以下浏览器,360浏览器请使用极速模式,不要使用兼容模式!"); 
            });
        }
        initEventHandle();
    }catch(e){
        reconnect(url);
        console.log(e);
    }     
}

function initEventHandle() {
    ws.onclose = function () {
        reconnect(wsUrl);
        console.log("llws连接关闭!"+new Date().toUTCString());
    };
    ws.onerror = function () {
        reconnect(wsUrl);
        console.log("llws连接错误!");
    };
    ws.onopen = function () {
        heartCheck.reset().start();      //心跳检测重置
        console.log("llws连接成功!"+new Date().toUTCString());
    };
    ws.onmessage = function (event) {    //如果获取到消息,心跳检测重置
        heartCheck.reset().start();      //拿到任何消息都说明当前连接是正常的
        console.log("llws收到消息啦:" +event.data);
        if(event.data!='pong'){
            var obj=eval("("+event.data+")");
            layui.use(['layim'], function(layim){
                if(obj.type=="onlineStatus"){
                    layim.setFriendStatus(obj.id, obj.content);
                }else if(obj.type=="friend" || obj.type=="group"){
                    layim.getMessage(obj);  
                } 
    };
}
// 监听窗口关闭事件,当窗口关闭时,主动去关闭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分钟发一次心跳
    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("ping");
            console.log("ping!")
            self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了
                ws.close();     //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    }
}
    // 收到客户端消息后调用的方法 
    @OnMessage  
    public void onMessage(String message, Session session) {  
        if(message.equals("ping")){
        }else{
        。。。。
        }
   }

系统发现websocket每隔10分钟自动断开连接,搜了很多博客都说设置一下nginx的
keepalive_timeout
proxy_connect_timeout
proxy_send_timeout
proxy_read_timeout
这四个字段的时长即可,然而好像并不奏效。遂采取心跳包的方式每隔9分钟客户端自动发送ping消息给服务端,服务端不需要返回。即可解决问题。

目录
相关文章
|
应用服务中间件 nginx 前端开发
WebSocket加入心跳包防止自动断开连接
近日,在公司中开发一个使用websocket为前端推送消息的功能时,发现一个问题:就是每隔一段时间如果不传送数据的话,与前段的连接就会自动断开; 刚开始以为是session的原因,因为web session 的默认时间是30分钟;但是通过日志发现断开时间间隔时间远远不到30分钟;认真分析发现不操作间隔恰好为90秒 它就会在自动断开;随恍然大悟;原来是我们的使用nginx 代理,nginx配置了访问超时时间为90s; WebSocket是html5中用来实现长连接的一个协议。
24429 0
|
数据采集 前端开发 JavaScript
查看Socket断开原因及加入心跳机制防止自动断开连接
一般情况下,前端页面连接WebSocket服务的时候都是通过Nginx等负载均衡,然后由Nginx去代理连接后端的socket服务。如果建立连接之后不做一些措施,那么可能会有各种各样的原因会导致socket断开。
2604 0
|
网络协议 移动开发
WebSocket(伍) 断开连接
原文链接 https://www.web-tinker.com/article/20310.html WebSocket是很民主的,啥都要协商!建立连接时需要握手协议,连断开连接都需要双方共同完成!其实断开连接直接断开TCP连接就可以了,但是这有点暴力。
2292 0
|
10月前
|
前端开发
websocket的心跳机制
websocket的心跳机制
518 3
|
10月前
|
移动开发 HTML5
WebSocket心跳机制
WebSocket心跳机制
113 0
|
前端开发
WebSocket使用及优化(心跳机制与断线重连)
WebSocket使用及优化(心跳机制与断线重连)
2826 0
WebSocket使用及优化(心跳机制与断线重连)
|
网络协议 C#
基于TCP通信的客户端断线重连
源码下载 在CS程序中,断线重连应该是一个常见的功能。 此处的断线重连主要指的是服务器端因为某种故障,服务器端程序或者系统进行了重新启动,客户端能够自动探测到服务器端掉线,并尝试重新进行连接 本程序基于来自英国的开源c#通信框架的networkcomms(2.
1982 0
|
网络协议 网络安全
Socket 心跳包机制总结
跳包之所以叫心跳包是因为:它像心跳一样每隔固定时间发一次,以此来告诉服务器,这个客户端还活着。事实上这是为了保持长连接,至于这个包的内容,是没有什么特别规定的,不过一般都是很小的包,或者只包含包头的一个空包。
2706 0
|
前端开发 网络协议 Java
长连接 、短连接、心跳机制与断线重连
概述 可承遇到,不知什么原因,一个夜晚,机房中,大片的远程调用连接断开。 第二天早上,用户访问高峰,大部分服务器都在获取连接,造成大片网络阻塞。 服务崩溃,惨不忍睹的景象。 本文将从长连接和短连接的概念切入,再到长连接与短连接的区别,以及应用场景,引出心跳机制和断线重连,给出代码实现。
3212 0
C# + Socket断线重连
一、网上常用方法 1、当Socket.Conneted == false时,调用如下函数进行判断 点击(此处)折叠或打开 /// /// 当socket.
2342 0