js实现websocket断线重连功能

本文主要是介绍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>