websocket 心跳包保持连接和关闭重连

2019-07-06 18:40:32 阅读：317 来源： 互联网

标签：function websocket log heartCheck 心跳 console 重连 evnt

来源https://my.oschina.net/714593351/blog/1583592

整体架构：

前端：浏览器websocket

后端：nginx+tomcat

nginx 设置(超过 90s 没有传输数据将关闭连接)：

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_connect_timeout 5;
proxy_send_timeout 90;#超过这个时间服务器将关闭连接
proxy_read_timeout 90;#超过这个时间服务器将关闭连接

初始化 websocket
只考虑浏览器原生支持 websocket 的情况。

var websocket;
var host= window.location.host;
if (‘WebSocket’ in window) {
websocket = new WebSocket(“ws://”+host+"/ws/user-channel");
} else if (‘MozWebSocket’ in window) {
websocket = new MozWebSocket(“ws://”+host+"/ws/user-channel");
} else {
// websocket = new SockJS(“http://localhost:8080/sockjs/user-channel”);
websocket = null;
}
// websocket事件
websocket.onopen = function (evnt) {
console.log("onopen: ", evnt);
heartCheck.start();
};
websocket.onmessage = function (evnt) {
console.log("onmessage: ", evnt);
heartCheck.reset();
doSomething();// 业务逻辑
};
websocket.onerror = function (evnt) {
console.log("onerror: ", evnt);
};
websocket.onclose = function (evnt) {
console.log(“onclose”, evnt);
if (evnt.code != 4500) {
//4500为服务端在打开多tab时主动关闭返回的编码
reconnect();//重连
}
}
心跳包保持连接
因为服务端在 90s 未传输数据时会主动关闭连接，所以，客户端需要定时发送数据保持连接。

发送心跳数据代码：

var heartCheck = {
        timeout: 60000,//60s
        timeoutObj: null,
        reset: function(){
            clearInterval(this.timeoutObj);
            this.start();
        },
        start: function(){
            this.timeoutObj = setInterval(function(){
                if(websocket.readyState==1){
                    websocket.send("HeartBeat");
                }
            }, this.timeout)
        }
    };

在 websocket onopen 事件上执行 heartCheck.start()，表示连接成功后开始发送心跳包（每隔 60s 发送一次）；在 onmessage 事件执行 heartCheck.reset() ，收到数据时，重置发送心跳定时程序。

// websocket事件
websocket.onopen = function (evnt) {
console.log("onopen: ", evnt);
heartCheck.start();
};
websocket.onmessage = function (evnt) {
console.log("onmessage: ", evnt);
heartCheck.reset();
doSomething();// 业务逻辑
};
3. 关闭重连
特殊情况下，如网络故障，服务器故障等发生时（一般情况 onclose 事件的 evnt.code=1006），需要重连。

其中 evnt.code = 4500 是我在服务端主动关闭连接时（如打开多个 tab，需要把之前 tab 的 websocket 关闭）返回的代码，此种情况下，不需要重连。

websocket.onclose = function (evnt) {
console.log(“onclose”, evnt);
if (evnt.code != 4500) {
//4500为服务端在打开多tab时主动关闭返回的编码
reconnect();//重连
}
}

标签：function,websocket,log,heartCheck,心跳,console,重连,evnt
来源： https://blog.csdn.net/qq_38377590/article/details/94881130

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

websocket 心跳包保持连接和关闭重连