websocket网络断开之后重连_Axchen519的博客-程序员秘密_websocket关闭后重新打开

技术标签: websocket  HTML  

websocket网络断开之后重连

最近做了一个web的聊天页面,加载到APP中聊天使用,后来发现手机锁屏一分钟之后socket资源就会被关闭,这时解锁再发消息就会失败,所以需要对websocket做重连,废话不多说,贴代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<!--<input type="text" id="send_input">-->
<textarea name="" id="send_input" cols="30" rows="10"></textarea>
<a href="javascript:;" id="send_message">发送</a>
</div>
<script>

    //消息变量
    var data = {
    };

    var wsServer = "";//http通信地址
    // var wsServer = "";//https通信地址
    var webSocket = new WebSocket(wsServer);
    var changlian = '';//长联定时器
    var chonglian = '';//重连定时器

    //发送消息方法
    $('#send_message').click(function(){
    
        //readyState 0尚未建立连接 1连接已经建立 2连接正在关闭 3连接已经关闭或不可用
        if(webSocket.readyState!=1){
    
            alert('网络异常,请稍后再试');//给用户提示
            return;
        }

        data.message = $('#send_input').val();
        data.user_id = 1;//用户变量
        data.to_user_id = 2;//聊天对象用户变量
        webSocket.send(JSON.stringify(data));
    })

    //新打开触发的方法
    webSocket.onopen = function(evt){
    
    }

    //socket通信触发方法
    webSocket.onmessage = function(evt){
    
        message_action(evt)
    };

    //socket报错触发 
    webSocket.onerror = function(evt,e){
    
    	console.log('连接关闭');
        error_action(evt,e)
    };

    //关闭当前页面触发的方法
    webSocket.onclose = function(evt,e){
    
        console.log('连接关闭');
        error_action(evt,e)
    };

    //添加定时器保证长联,服务器端一般会对一定时长内没有通信的socket进行切断
    changlian = setInterval(function(){
    
        webSocket.send('');
    }, 50000);

	//获取到消息之后进行页面渲染,此处属于内部逻辑
    function message_action(evt){
    
        var evt = evt.data!='' ? eval('('+evt.data+')') : {
    };
        console.log(evt);
    }

    //异常处理方法,清空长联定时器,执行重连方法
    
    function error_action(evt,e){
    
        clearInterval(changlian);
        chonglian_action();
    }
    
    //重连方法
    function chonglian_action() {
    
    	//每隔一秒进行一次重连操作
        chonglian = setInterval(function(){
    
        	//判断有没有网 此处代码后加的,为了优化没网实例化socket时候的报错问题
        	if(!navigator.onLine){
    
        		return ;//没网就中断
			}
            //readyState 0尚未建立连接 1连接已经建立 2连接正在关闭 3连接已经关闭或不可用
            if(webSocket.readyState==3){
    
                console.log('网络异常');
                webSocket = new WebSocket(wsServer);
                console.log(webSocket.readyState);
            }
            //如果连上了清空重连定时器 并且 要开启长联定时器 并且将各个事件重新注册
            if(webSocket.readyState==1){
    
                changlian = setInterval(function(){
    
                    webSocket.send('');
                }, 50000);
                //新打开触发的方法
                webSocket.onopen = function(evt){
    
                }
                //socket通信触发方法
                webSocket.onmessage = function(evt){
    
                    message_action(evt)
                };
                //socket报错触发
                webSocket.onerror = function(evt,e){
    
                    console.log('连接错误');
                    error_action(evt,e)
                };
                //关闭当前页面触发的方法
                webSocket.onclose = function(evt,e){
    
                    console.log('连接关闭');
                    error_action(evt,e)
                };

                clearInterval(chonglian);
            }
        }, 1000);
    }

</script>
</body>
</html>

代码就是这些,下面是测试过程的截图
断网期间的请求
在这里插入图片描述经历两次断网之后的重连及通信数据的请求截图
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_29309533/article/details/120073943

智能推荐

SSL/TLS 双向认证(一) -- SSL/TLS工作原理_申庆胜的博客-程序员秘密

本文部分参考: https://www.wosign.com/faq/faq2016-0309-03.htm https://www.wosign.com/faq/faq2016-0309-04.htm http://blog.csdn.net/hherima/article/details/52469674 一: SSL/TLS介绍什么是SSL,什么是TLS呢?官...

msys2、mingw64环境配置_WhatWhoWhere的博客-程序员秘密_msys2环境变量配置

1、下载和运行&quot;x86_64&quot;的msys2安装程序(32-bit Windows安装&quot;i686&quot;),官方:http://www.msys2.org/。2、点击“下一步”3、输入安装路径(最好不包含中文、空格、连接符等标点符号),点击“下一步”4、勾选“现在运行MSYS2”,点击“完成”5、更新“组件包数据库”和“系统核心组件包”pacman -Syu6、必要时...

【Rust日报】 2019-03-02_cpongo3的博客-程序员秘密

本文转载自:https://rust.cc/article?id=9356a7eb-c4b4-4e4d-b43c-abefaea209e9用Rust重写Node.js实现的接口之后所带来的震惊#node.js作者用Rust重写了Node.js实现的一个小接口,但是流量很大,每秒180个请求。之前Node.js版本技术栈:koa,框架pino,日志request,转...

node-webkit-MusicBox 基于nwjs ,html5 ,制作的音乐盒子_ymark_的博客-程序员秘密

太长?单击目录直接去看最终效果,在最下边 文件下载地址:http://download.csdn.net/detail/u013934914/9180053 1.思路(简单设想)index.html 实现 对页面的显示,并调用绑定ymusic.js中的方法需要: 绘出基本页面样式 实现窗口的放大缩小关闭 实现调用播放器对象,并实现对事件的监听,通过监听改变文字或样式等y

随便推点

Android运行时异常“Binary XML file line # : Error infla_weixin_34310127的博客-程序员秘密

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

WSL下geant4及root的安装_爬天梯的蜗牛的博客-程序员秘密

WSL下geant4-v11.0.0及root的安装WSL下geant4-v11.0.0及root的安装​参考文献:官方下载路径:geant4.web.cern.chGeant4官方安装指南:https://geant4-userdoc.web.cern.ch/UsersGuides/AllGuides/html/InstallationGuide/installguide.html#buildandinstall​目录一、安装WSL二、安装Geant4三、安装Root四、可视化界面

百度地图报错原因tried Java_com_baidu_platform_comjni_engine_JNIEngine_initClass and Java_com_edwinsnao的博客-程序员秘密

No implementation found for int com.baidu.platform.comjni.engine.JNIEngine.initClasstried Java_com_baidu_platform_comjni_engine_JNIEngine_initClass and Java_com网上说是因为so文件放的位置不对,确实是这样如果不想在bui

iqoo5参数配置_qq305496026的博客-程序员秘密

外观方面,iQOO 5拥有皓影、星溯两个配色,均为AG工艺玻璃背板,正面为左侧挖孔直屏,厚8.32mm,重197g;iQOO 5 Pro拥有赛道版(碳纤维纹理)、传奇版(三色纹理素皮)两个配色,正面为左侧挖孔曲面屏,厚8.9mm,重198g。iqoo5更多使用感受和评价:https://www.vivo.com.cniQOO 5系列采用6.56英寸三星超视感柔性屏,屏占比92.6%,屏幕通过了SGS低拖影无缝显示认证及SGS低蓝光护眼认证,最高支持120Hz屏幕刷新率。iQOO 5系列还提供240Hz

大数据模块开发----ETL_我是楠楠的博客-程序员秘密

ETL工作的实质就是从各个数据源提取数据,对数据进行转换,并最终加载填充数据到数据仓库维度建模后的表中。只有当这些维度/事实表被填充好,ETL工作才算完成。本项目的数据分析过程在hadoop集群上实现,主要应用hive数据仓库工具,因此,采集并经过预处理后的数据,需要加载到hive数据仓库中,以进行后续的分析过程。1. 创建ODS层数据表1.1. 原始日志数据表drop table i...

基于min-max搜索和alpha-beta(α-β)剪枝的五子棋的c语言实现(带简单禁手)_LauJiYeoung的博客-程序员秘密_minimax算法五子棋

这实际上是我学校的C语言程序设计课结课作业。整个作业代码适中,算法难度合适,是对初学者很友好的一件结课作业。对五子棋而言最重要的还是估值函数的选择,如果一开始就写出了一个全盘估值的算法,那么很快就能改完了。我的实现是这么考虑的,对于一个棋盘,黑白两色分别考虑,对于一个颜色,选择棋盘上分数最大的一个点作为这个颜色棋盘的分数,而这个分数的选择是基于活二活三等的数量统计出来的。然后将两个颜色做差得到分数。int F(int x,int y,int col){//get F int ret=0; for