js实现websocket断线重连功能

在项目开发中我们可能经常要使用websocket技术，当连接发生断线后，如果不进行页面刷新将不能正常接收来自服务端的推送消息。为了有效避免这种问题，我们需要在客户端做断线重连处理。当网络或服务出现问题后，客户端会不断检测网络状态，如果服务恢复，客户端则会自动重新连接，并断开本地检测网络的定时器。

一、未做断线检测情况

  • 1、项目效果

通过控制台可看到一旦连接关闭，将无法再次收到来自服务器的推送消息。

在这里插入图片描述

  • 2、未整改前代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>排队叫号系统</title><link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" /><link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
</head>
<style>html{font-size:14px}.pear-container{background-color: #0d48ff;//background-color: #2e6fff}*{color:white;}.layui-row{width: 100%;}body{position: absolute;}.call-footer {left: 0;bottom: 0;position: fixed;text-align: center;padding: 10px;font-size: 16px;}.call-header{display: flex;justify-content: space-between;line-height: 40px;text-align: center;border-bottom: 2px dashed #85b8b6;}.isemer{color: red;}.call-header>div{font-size: 30px;font-family: "楷体","YaHei Consolas Hybrid", Consolas, "微软雅黑", "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, "Monaco", courier, monospace;font-weight: 800;}#hd-logo>img{width: 200px;}#hd-title {font-size: 24px;}#hd-desc{font-size: 14px;}/*设置显示当前呼叫患者信息*/#call-place{height: 28px;text-align: center;line-height: 28px;font-size: 18px;//color: #6fc9cc;border-bottom: 2px dashed #85b8b6;}.dis-dept{display: flex;justify-content:flex-start;font-size: 28px;align-items: center;}.disp-title{display: flex;justify-content: center;align-items: center;text-align: center;padding-right:30px;border-right: 3px dashed #21f3ff;margin-top: 20px;min-width: 200px;height: 75vh;}.disp-title-content{flex：1;display: flex;justify-content: center;align-items: center;text-align: center;font-size: 120px;border: 10px solid #f8fff7;border-radius: 50%;line-height: 100%;width: 180px;height: 180px;}.disp-content{flex:1;display: flex;justify-content: center;align-items: center;height: 75vh;padding-left: 20px;}/*字体大小设置*/.dispc-text{font-size: 60px;overflow: hidden;}.layui-layer{z-index: 9999; /*保证在最上层*/background-color: rgba(0,0,0,0.5); /*背景半透明*/}@keyframes twinkle {0% {opacity: 0.9;}100% {opacity: 0.2;}}</style>
<body class="pear-container"><div class="layui-fluid" ><div class="row call-header"><div id="hd-logo"><img src="/app/admin/upload/files/20231128/656599ce1fd4.png" alt=""></div><div id="hd-title">1号窗口</div><div id="hd-desc">2023-11-28 15:00:00</div></div><div style="display: none" class="row" id="call-place">请C003号 王小宝到1号窗口采血</div><div class="layui-row"  id="call-display"><div class="dis-dept"><div class="disp-title"><div class="disp-title-content"><?php echo $config['num'];?></div></div><div class="disp-content" id="disp-con-htm"><!--<marquee direction="up">--><div class="dispc-text">尚未呼叫 <br></div><!--</marquee>--></div></div></div></div>
<div class="layui-row call-footer" >请保持安静，耐心等待呼叫！
</div><script src="/app/admin/component/layui/layui.js"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/admin/js/common.js"></script>
<script src="/app/queue/component/tools.js"></script>
<script src="/app/queue/component/rpm2h5.js"></script>
<script>//=========定义显示时间功能结束===================function clock() {var time = new Date().toLocaleString();var htm = '<i class="fa fa-clock-o"></i>' + time;document.getElementById('hd-desc').innerHTML=htm;};setInterval("clock()", 1000);
</script>
<script>var socket = "";var token = "room"+readQueryVariable('id','1');console.log(token);// var isUpdate = readQueryVariable('isUpdate','0');//  var ws_url = "ws://192.168.40.100:7272?token="+token;var ws_url = "ws://192.168.40.100:7272?token="+token;var callMark = "就诊";layui.use(["table", "form", "common", "popup", "util","layer"], function() {let table = layui.table;let form = layui.form;let $ = layui.$;let common = layui.common;let util = layui.util;let layer = layui.layer;var loopTimes = 0 ;// 创建一个新的WebSocket对象var socket = new WebSocket(ws_url);// 连接打开时执行的函数socket.onopen = function(event) {console.log("已成功连接到服务器");// 发送一个消息给服务器//socket.send("你好，服务器!");};// 接收到服务器消息时执行的函数socket.onmessage = function(event) {loopTimes++;console.log("从服务器接收到的消息: " + event.data);};// 当连接关闭时执行的函数socket.onclose = function(event){console.log("连接已关闭");};// 当出现错误时执行的函数socket.onerror = function(error) {console.log("发生错误: " + error);};})</script>
</body>

二、做了断线检测情况

  • 1、重连效果

通过控制台观察可发现，在客户端连接成功后，可接收到服务端推送过来的消息，当服务端关闭后，会触发自动重连定时器，当定时器检测到服务连接成功后，会自动完成连接，并可正常接收来自服务端推送的消息。

在这里插入图片描述

  • 2、支持断线重连完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>排队叫号系统</title><link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" /><link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
</head>
<style>html{font-size:14px}.pear-container{background-color: #0d48ff;//background-color: #2e6fff}*{color:white;}.layui-row{width: 100%;}body{position: absolute;}.call-footer {left: 0;bottom: 0;position: fixed;text-align: center;padding: 10px;font-size: 16px;}.call-header{display: flex;justify-content: space-between;line-height: 40px;text-align: center;border-bottom: 2px dashed #85b8b6;}.isemer{color: red;}.call-header>div{font-size: 30px;font-family: "楷体","YaHei Consolas Hybrid", Consolas, "微软雅黑", "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, "Monaco", courier, monospace;font-weight: 800;}#hd-logo>img{width: 200px;}#hd-title {font-size: 24px;}#hd-desc{font-size: 14px;}/*设置显示当前呼叫患者信息*/#call-place{height: 28px;text-align: center;line-height: 28px;font-size: 18px;//color: #6fc9cc;border-bottom: 2px dashed #85b8b6;}.dis-dept{display: flex;justify-content:flex-start;font-size: 28px;align-items: center;}.disp-title{display: flex;justify-content: center;align-items: center;text-align: center;padding-right:30px;border-right: 3px dashed #21f3ff;margin-top: 20px;min-width: 200px;height: 75vh;}.disp-title-content{flex：1;display: flex;justify-content: center;align-items: center;text-align: center;font-size: 120px;border: 10px solid #f8fff7;border-radius: 50%;line-height: 100%;width: 180px;height: 180px;}.disp-content{flex:1;display: flex;justify-content: center;align-items: center;height: 75vh;padding-left: 20px;}/*字体大小设置*/.dispc-text{font-size: 60px;overflow: hidden;}.layui-layer{z-index: 9999; /*保证在最上层*/background-color: rgba(0,0,0,0.5); /*背景半透明*/}@keyframes twinkle {0% {opacity: 0.9;}100% {opacity: 0.2;}}</style>
<body class="pear-container"><div class="layui-fluid" ><div class="row call-header"><div id="hd-logo"><img src="/app/admin/upload/files/20231128/656599ce1fd4.png" alt=""></div><div id="hd-title">1号窗口</div><div id="hd-desc">2023-11-28 15:00:00</div></div><div style="display: none" class="row" id="call-place">请C003号 王小宝到1号窗口采血</div><div class="layui-row"  id="call-display"><div class="dis-dept"><div class="disp-title"><div class="disp-title-content"><?php echo $config['num'];?></div></div><div class="disp-content" id="disp-con-htm"><!--<marquee direction="up">--><div class="dispc-text">尚未呼叫 <br></div><!--</marquee>--></div></div></div></div>
<div class="layui-row call-footer" >请保持安静，耐心等待呼叫！
</div><script src="/app/admin/component/layui/layui.js"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/admin/js/common.js"></script>
<script src="/app/queue/component/tools.js"></script>
<script src="/app/queue/component/rpm2h5.js"></script>
<script>//=========定义显示时间功能结束===================function clock() {var time = new Date().toLocaleString();var htm = '<i class="fa fa-clock-o"></i>' + time;document.getElementById('hd-desc').innerHTML=htm;};setInterval("clock()", 1000);
</script>
<script>var socket = "";var token = "room"+readQueryVariable('id','1');console.log(token);// var isUpdate = readQueryVariable('isUpdate','0');//  var ws_url = "ws://192.168.40.100:7272?token="+token;var ws_url = "ws://192.168.40.100:7272?token="+token;var callMark = "就诊";layui.use(["table", "form", "common", "popup", "util","layer"], function() {let table = layui.table;let form = layui.form;let $ = layui.$;let common = layui.common;let util = layui.util;let layer = layui.layer;var loopTimes = 0 ;function connectWS(){try{socket = new WebSocket(ws_url);// 连接打开时执行的函数socket.onopen = function(event) {console.log("已成功连接到服务器");// 发送一个消息给服务器socket.send(token);};// 接收到服务器消息时执行的函数socket.onmessage = function(event) {console.log("从服务器接收到的消息: " + event.data);};// 当连接关闭时执行的函数socket.onclose = function(event){console.log("连接已关闭");reConnect();};// 当出现错误时执行的函数socket.onerror = function(error) {console.log("发生错误: " + error);};}catch(ex){console.log(ex.message);}};// 调用链接socket函数connectWS();// 断线重新连接websocketfunction reConnect(){let timeId =  setInterval(function(){console.log("正在努力重连。。。");if(socket.readyState===WebSocket.CLOSED){connectWS();// 重新连接成功后清除定时器clearInterval(timeId);}},3000);}})
</script>
</body>

希望各位小伙伴们都能学会了！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/788595.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

玩转ChatGPT：Kimi测评（科研写作）

玩转ChatGPT：Kimi测评（科研写作）

一、写在前面 ChatGPT作为一款领先的语言模型&#xff0c;其强大的语言理解和生成能力&#xff0c;让无数用户惊叹不已。然而&#xff0c;使用的高门槛往往让国内普通用户望而却步。 最近&#xff0c;一款由月之暗面科技有限公司开发的智能助手——Kimi&#xff0c;很火爆哦。…
阅读更多...
Linux基础篇：VMware centos7虚拟机网络配置——桥接模式

Linux基础篇：VMware centos7虚拟机网络配置——桥接模式

VMware centos7虚拟机网络配置——桥接模式 1 搞清楚什么是桥接模式 桥接模式允许虚拟机直接连接到物理网络&#xff0c;就像它是物理网络中的一个独立设备一样。在这种模式下&#xff0c;虚拟机将具有与宿主机相同网络中的其他设备相同的网络访问权限。虚拟机将获得一个独立…
阅读更多...
Navicat for MySQL 15免费注册方法

Navicat for MySQL 15免费注册方法

一、效果图如下&#xff1a; 注&#xff1a;此方法仅用于非商业用途&#xff0c;请勿传播&#xff0c;否则后果自负。 二、下载安装 下载安装包&#xff0c;分为32位和6位&#xff0c;下载文件名&#xff1a;Navicat for MySQL 15.zip&#xff08;https://download.csdn.net/…
阅读更多...
Flutter 开发学习笔记(4):widget布局容器学习

Flutter 开发学习笔记(4):widget布局容器学习

文章目录 前言相关链接Widget 有状态和无状态Flutter 代码风格去掉烦人的括号后缀提示代码缩进 Flutter 布局最简单的布局widgets和Material widgets Dark语法习惯Flutter 布局默认布局Center居中Padding 填充Align对齐默认居中顶部底部右上角 通用 WidgetContainer处于性能原因…
阅读更多...
K8S Pod 的生命周期

K8S Pod 的生命周期

本文会介绍 1个 POD 从启动到被关闭删除&#xff0c; 有什么事情发生&#xff0c; 和有什么组件被参与进来 容器环境初始化阶段 apiserver 接受到创建容器的指令时&#xff0c; 在构建容器之前会有一些环境的设置阶段&#xff0c; 例如node 选择&#xff0c; image 镜像下载等…
阅读更多...
路由和远程访问是什么？

路由和远程访问是什么？

路由和远程访问在现代互联网时代中&#xff0c;扮演着至关重要的角色。它们为我们提供了便捷的信息传递途径&#xff0c;让不同地区的电脑、设备以及人们之间能够轻松进行通信和交流。 对于路由来说&#xff0c;它是连接互联网上的各个网络的核心设备。一台路由器可以将来自不同…
阅读更多...
【Qt】使用Qt实现Web服务器（九）：EventSource+JSON实现工业界面数据刷新

【Qt】使用Qt实现Web服务器（九）：EventSource+JSON实现工业界面数据刷新

1、效果 效果如下，实时刷新温度、湿度 2、源码 2.1 index.html <html><body> <!-- 页面布局，本人对HTML标签不熟悉，凑合看吧 --> <div><label for
阅读更多...
前后端开发之——文章分类管理

前后端开发之——文章分类管理

原文地址&#xff1a;前后端开发之——文章分类管理 - Pleasure的博客 下面是正文内容&#xff1a; 前言 上回书说到 文章管理系统之添加文章分类。就是通过点击“新建文章分类”按钮从而在服务端数据库中增加一个文章分类。 对于文章分类这个对象&#xff0c;增删改查属于配…
阅读更多...
PyQt ui2py 使用PowerShell将ui文件转为py文件并且将导入模块PyQt或PySide转换为qtpy模块开箱即用

PyQt ui2py 使用PowerShell将ui文件转为py文件并且将导入模块PyQt或PySide转换为qtpy模块开箱即用

前言 由于需要使用不同的qt环境&#xff08;PySide&#xff0c;PyQt&#xff09;所以写了这个脚本&#xff0c;使用找到的随便一个uic命令去转换ui文件&#xff0c;然后将导入模块换成qtpy这个通用库(支持pyside2-6&#xff0c;pyqt5-6)&#xff0c;老版本的是Qt.py(支持pysid…
阅读更多...
Appium无线自动化实用教程

Appium无线自动化实用教程

文章目录 简介核心特点工作原理使用Appium进行自动化测试的一般步骤 环境设置安装和启动Appium Server使用Node.js和npm安装Appium Server&#xff1a;启动Appium Server:命令行启动使用Appium Desktop安装和启动Appium Server&#xff1a;使用代码启动appium server 编写测试代…
阅读更多...
Linux|centos7|postgresql数据库主从复制之异步还是同步的问题

Linux|centos7|postgresql数据库主从复制之异步还是同步的问题

前言&#xff1a; postgresql数据库是一个比较先进的中型关系型数据库&#xff0c;原本以为repmgr和基于repmgr的主从复制是挺简单的一个事情&#xff0c;但现实很快就给我教育了&#xff0c;原来postgresql和MySQL一样的&#xff0c;也是有异步或者同步的复制区别的 Postgre…
阅读更多...
vivado 面向 7 系列器件的 AES 密钥编程

vivado 面向 7 系列器件的 AES 密钥编程

要将 AES 密钥编程到 BBR 中 &#xff0c; 请在“硬件 (Hardware) ”窗口中右键单击 FPGA 器件并选中“ Program BBR Key ”。 在“ BBR 密钥编程 (Program BBR Key) ”对话框中 &#xff0c; 输入文件名或者浏览至目标文件以指定 AES 密钥文件 ( .nky ) 。指 定有效的 .n…
阅读更多...
4.2学习总结

4.2学习总结

解题思路 遍历初始整数的全排列,然后计算每一个排列与原排列的的步数找到花费的最小值就行了 代码 #include <iostream> #include <cstdio> #include <fstream> #include <algorithm> #include <cmath> #include <deque> #include <…
阅读更多...
Qt 使用QPropertyAnimation动画效果的图片浏览器

Qt 使用QPropertyAnimation动画效果的图片浏览器

文章目录 效果图功能点代码解析图片切换显示与动画效果图片缩放 总结 效果图 功能点 加载指定路径下的所有图片并显示滑动滑动条查看指定图片&#xff0c;也滚轮切换图片滑动条缩略图加入动画效果图片可以进行缩放移动查看 代码解析 整体来说相对&#xff0c;显示图片的是一…
阅读更多...
Apache Paimon实时数据糊介绍

Apache Paimon实时数据糊介绍

Apache Paimon 是一种湖格式，可以使用 Flink 和 Spark 构建实时 数据糊 架构，用于流式和批处理操作。Paimon 创新地将湖格式和 LSM（日志结构合并树）结构相结合，将实时流式更新引入湖架构中。 Paimon 提供以下核心功能： 实时更新： 主键表支持大规模更新的写入，具有非常…
阅读更多...
LeetCode 热题 100 | 动态规划（一）

LeetCode 热题 100 | 动态规划（一）

目录 1 70. 爬楼梯 1.1 基本思路 1.2 官方题解 2 118. 杨辉三角 3 198. 打家劫舍 菜鸟做题&#xff0c;语言是 C 1 70. 爬楼梯 核心思想&#xff1a;把总问题拆解为若干子问题。 总问题&#xff1a;上到 5 楼的方式有多少种子问题&#xff1a;上到 4 楼的方式有多…
阅读更多...
Oracle常用sql命令（新手）

Oracle常用sql命令（新手）

1、备份单张表 创建复制表结构 create table employeesbak as select * from cims.employees 如果只复制表结构&#xff0c;只需要在结尾加上 where 10 插入数据 insert into employeesbak select * from cims.employees 删除一条数据 delete from…
阅读更多...
【Servlet】服务器内部转发以及客户端重定向

【Servlet】服务器内部转发以及客户端重定向

文章目录 一、服务器内部转发&#xff1a;request.getRequestDispatcher("...").forward(request, response);二、客户端重定向&#xff1a;response.sendRedirect("");三、服务器内部转发代码示例四、客户端重定向代码示例 一、服务器内部转发&#xff1a…
阅读更多...
小象超市（原美团买菜） 的大屏图表

小象超市（原美团买菜） 的大屏图表

文章目录 概要技术细节技术名词解释小结 概要 20203年12月1日&#xff0c;美团旗下自营零售品牌“美团买菜”升级为全新品牌“小象超市”。 &#xff0c;“小象超市”坚持美团自营零售模式&#xff0c;通过在社区设立的集存储、分拣、配送为一体的便民服务站&#xff0c;为社区…
阅读更多...
go之web框架gin

go之web框架gin

介绍 Gin 是一个用 Go (Golang) 编写的 Web 框架。 它具有类似 martini 的 API&#xff0c;性能要好得多&#xff0c;多亏了 httprouter&#xff0c;速度提高了 40 倍。 如果您需要性能和良好的生产力&#xff0c;您一定会喜欢 Gin。 安装 go get -u github.com/gin-gonic/g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023