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

旧城等待， 2022-12-18 09:56 166阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebSocket心跳机制

目录 1 WebSocket简介 2 WebSocket事件与方法 2.1 创建WebSocket实例 2.2 WebSocket

秒速五厘米/ 2024年04月08日 11:29/ 0 赞/ 67 阅读

相关 WebSocket断线自动重连javascript库(含心跳包)

> ReconnectingWebSocket 是一个小型的 JavaScript 库，封装了 WebSocket API > 提供了在连接断开时自动重连的机制。

朱雀/ 2023年01月01日 15:58/ 0 赞/ 235 阅读

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

var userId=$("userId").val(); var lockReconnect = false; //避免ws重复连接 var ws

旧城等待，/ 2022年12月18日 09:56/ 0 赞/ 167 阅读

相关 websocket系列:添加心跳机制防止连接自动断开

前言本文主要介绍通过添加心跳机制防止websocket连接自动断开的问题。 -------------------- 一、原因分析很多同学可能非常疑惑，本地

小咪咪/ 2022年09月10日 15:23/ 0 赞/ 200 阅读

相关长连接和心跳包

摘自：http://blog.csdn.net/sctq8888/article/details/7426031 第一种设置：通过设置socket的keepalive属性

绝地灬酷狼/ 2022年08月18日 11:51/ 0 赞/ 207 阅读

相关 MySQL自动断开连接的问题

[MySQL][]自动断开连接的问题有三个方法可以解决这个问题： 1：修改MySQL配置参数 2：修改JDBC 3：修改第三方的[数据库][MyS

た入场券/ 2022年06月15日 05:06/ 0 赞/ 245 阅读

相关 TCP连接的心跳包机制

文章目录什么是心跳机制为什么需要心跳机制？如何及时有效地检测到另一方的非正常断开 TCP的keeplive保活机制什么是心跳机制

r囧r小猫/ 2022年04月23日 11:24/ 0 赞/ 563 阅读

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

原文：[https://blog.csdn.net/weixin\_36185028][https_blog.csdn.net_weixin_36185028] va

痛定思痛。/ 2022年04月13日 13:28/ 0 赞/ 258 阅读

相关保持websocket长连接心跳检测

$(function () { createWebSocket(wsServer);//建立socket连接 });

╰+哭是因爲堅強的太久メ/ 2022年03月25日 04:19/ 0 赞/ 393 阅读

相关 navicat数据库工具，连接数据库时自动断开连接解决办法（设置发送心跳数据）

navicat 保持长连接，不断开连接方法 navicat数据库工具，连接数据库时自动断开连接解决办法（设置发送心跳数据）这是因为数据库服务器设置了连接多久没有

太过爱你忘了你带给我的痛/ 2021年09月26日 23:30/ 0 赞/ 666 阅读