详解JS WebSocket断开原因和心跳机制


Posted in Javascript onMay 07, 2021

1、断开原因

WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。

ws.onclose = function (e) {
  console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
  console.log(e)
}

错误状态码:

WebSocket断开时,会触发CloseEvent, CloseEvent会在连接关闭时发送给使用 WebSockets 的客户端. 它在 WebSocket 对象的 onclose 事件监听器中使用。CloseEvent的code字段表示了WebSocket断开的原因。可以从该字段中分析断开的原因。

CloseEvent有三个字段需要注意, 通过分析这三个字段,一般就可以找到断开原因

CloseEvent.code: code是错误码,是整数类型

CloseEvent.reason: reason是断开原因,是字符串

CloseEvent.wasClean: wasClean表示是否正常断开,是布尔值。一般异常断开时,该值为false

状态码 名称 描述
0?999   保留段, 未使用.
1000 CLOSE_NORMAL 正常关闭; 无论为何目的而创建, 该链接都已成功完成任务.
1001 CLOSE_GOING_AWAY 终端离开, 可能因为服务端错误, 也可能因为浏览器正从打开连接的页面跳转离开.
1002 CLOSE_PROTOCOL_ERROR 由于协议错误而中断连接.
1003 CLOSE_UNSUPPORTED 由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据).
1004   保留. 其意义可能会在未来定义.
1005 CLOSE_NO_STATUS 保留. 表示没有收到预期的状态码.
1006 CLOSE_ABNORMAL 保留. 用于期望收到状态码时连接非正常关闭 (也就是说, 没有发送关闭帧).
1007 Unsupported Data 由于收到了格式不符的数据而断开连接 (如文本消息中包含了非 UTF-8 数据).
1008 Policy Violation 由于收到不符合约定的数据而断开连接. 这是一个通用状态码, 用于不适合使用 1003 和 1009 状态码的场景.
1009 CLOSE_TOO_LARGE 由于收到过大的数据帧而断开连接.
1010 Missing Extension 客户端期望服务器商定一个或多个拓展, 但服务器没有处理, 因此客户端断开连接.
1011 Internal Error 客户端由于遇到没有预料的情况阻止其完成请求, 因此服务端断开连接.
1012 Service Restart 服务器由于重启而断开连接.
1013 Try Again Later 服务器由于临时原因断开连接, 如服务器过载因此断开一部分客户端连接.
1014   由 WebSocket标准保留以便未来使用.
1015 TLS Handshake 保留. 表示连接由于无法完成 TLS 握手而关闭 (例如无法验证服务器证书).
1016?1999   由 WebSocket标准保留以便未来使用.
2000?2999   由 WebSocket拓展保留使用.
3000?3999   可以由库或框架使用.? 不应由应用使用. 可以在 IANA 注册, 先到先得.
4000?4999   可以由应用使用.

2、加入心跳

var lockReconnect = false;  //避免ws重复连接
var ws = null;          // 判断当前浏览器是否支持WebSocket
var wsUrl = serverConfig.socketUrl;
createWebSocket(wsUrl);   //连接ws

function createWebSocket(url) {
    try{
        if('WebSocket' in window){
            ws = new WebSocket(url);
        }
        initEventHandle();
    }catch(e){
        reconnect(url);
        console.log(e);
    }     
}

function initEventHandle() {
    ws.onclose = function () {
        reconnect(wsUrl);
        console.log("llws连接关闭!"+new Date().toLocaleString());
    };
    ws.onerror = function () {
        reconnect(wsUrl);
        console.log("llws连接错误!");
    };
    ws.onopen = function () {
        heartCheck.reset().start();      //心跳检测重置
        console.log("llws连接成功!"+new Date().toLocaleString());
    };
    ws.onmessage = function (event) {    //如果获取到消息,心跳检测重置
        heartCheck.reset().start();      //拿到任何消息都说明当前连接是正常的
        console.log("llws收到消息啦:" +event.data);
        if(event.data!='pong'){
            let data = jsON.parse(event.data);
        }
    };
}
// 监听窗口关闭事件,当窗口关闭时,主动去关闭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: 1000,        //1分钟发一次心跳
    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每隔1分钟自动断开连接,搜了很多博客都说设置一下nginx的proxy_read_timeout,但是这个时间过长会影响服务器性能,采取心跳包的方式每隔1分钟客户端自动发送ping消息给服务端,服务端需要返回pong。即可解决问题。

以上就是详解JS WebSocket断开原因和心跳机制的详细内容,更多关于JS WebSocket断开原因和心跳机制的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 学习之旅 (2)
Feb 05 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
ztree实现权限横向显示功能
May 20 Javascript
php 修改密码实现代码
May 24 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
如何用threejs实现实时多边形折射
详解JS ES6编码规范
May 07 #Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 #Javascript
详解如何使用Node.js实现热重载页面
May 06 #Javascript
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
在JavaScript中如何使用宏详解
May 06 #Javascript
如何用JS实现简单的数据监听
May 06 #Javascript
You might like
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
人力资源主管的岗位职责
2014/03/15 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
法律意见书范文
2015/05/20 职场文书
初三毕业感言
2015/07/31 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android