详解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 相关文章推荐
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
原生js+ajax分页组件
Jan 30 Javascript
基于vue中的scoped坑点解说
Sep 04 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JS 控制CSS样式表
2009/08/20 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
webpack4的迁移的使用方法
2018/05/25 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Python实现FM算法解析
2019/06/18 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
大学军训感言600字
2014/02/25 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
继承公证书格式
2015/01/26 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2016大学军训心得体会
2016/01/11 职场文书
初一数学教学反思
2016/02/17 职场文书
销售会议开幕词
2016/03/04 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
SQL语句多表联合查询的方法示例
2022/04/18 MySQL