给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消息给服务端,服务端不需要返回。即可解决问题。

目录
相关文章
|
5月前
|
前端开发
websocket的心跳机制
websocket的心跳机制
241 3
|
12月前
|
网络协议 数据安全/隐私保护
百度搜索:蓝易云【WebSocket:从建立连接到关闭的完整流程】
这是WebSocket的基本流程,它提供了一种实时、双向的通信方式,适用于需要实时数据传输的应用场景,如聊天应用、实时游戏等。
229 2
|
移动开发 HTML5
WebSocket心跳机制
WebSocket心跳机制
142 0
websocket封装带心跳和重连机制(vue3+ts+vite)
websocket封装带心跳和重连机制(vue3+ts+vite)
1861 0
|
2月前
|
前端开发 JavaScript API
赶快收藏!全网最佳websocket封装:完美支持断网重连、自动心跳!
【8月更文挑战第17天】赶快收藏!全网最佳websocket封装:完美支持断网重连、自动心跳!
54 3
赶快收藏!全网最佳websocket封装:完美支持断网重连、自动心跳!
|
2月前
|
关系型数据库 Serverless API
Serverless 函数实例问题之websocket连接如何解决
除了控制台,您还可以通过API或CLI使用PolarDB实例的Exec功能。API接口允许执行数据库命令,而阿里云CLI工具如`aliyun polardb`命令可用于管理数据库实例。详情参见[文档](https://help.aliyun.com/document_detail/137999.html)。
42 0
|
3月前
WebSocket 心跳机制如何实现
WebSocket 心跳机制如何实现
37 0
|
4月前
|
应用服务中间件 网络安全 nginx
处理 WebSocket 连接失败的最佳实践
WebSocket 目前已经成为了一项极为重要的技术,其允许客户端和服务器之间进行实时、全双工的通信。然而,在实际项目中,开发者时常会遇到 WebSocket 连接失败的情况。这不仅影响了用户体验,还可能导致不可预见的系统错误或数据丢失。那么,造成 WebSocket 连接失败的原因有哪些?又该如何解决这些问题呢?本文将逐一分析常见的 WebSocket 连接失败原因,并提供详细的解决方案。
|
5月前
|
监控 安全 API
WebSocket通过建立一个持久的连接实现实时双向通信
【5月更文挑战第2天】WebSocket通过建立一个持久的连接实现实时双向通信
112 4
|
5月前
|
移动开发 监控 网络协议
linux如何查看websocket的连接
linux如何查看websocket的连接
380 0