js实现websocket断线重连功能

于 2024-04-02 20:34:15 发布
阅读量1.4k 收藏 22
点赞数 24
分类专栏： 前端技术 个人笔记 文章标签： javascript websocket 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qcg0223/article/details/137287120
版权

在项目开发中我们可能经常要使用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();


        // 断线重新连接websocket
        function reConnect()
        {
            let timeId =  setInterval(function(){
                console.log("正在努力重连。。。");
                if(socket.readyState===WebSocket.CLOSED)
                {
                    connectWS();
                    // 重新连接成功后清除定时器
                    clearInterval(timeId);
                }
            },3000);

        }
    })
</script>
</body>

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

我是罗易呀！
关注
  • 24
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
websocket断线重连 websocket JS框架
11-09
websocket的JS框架，目前我们的项目也在使用，实现永久不断线就靠它了，使用很简单，有demo，谁想要就下载吧，没骗你们
websocket封装使用心跳检测+断线重连
01-16
websocket封装基于 1.websocket四大基础事件 2.扩展心跳检测与断线重连功能 3.核心对象封装，生成与销毁不需要客户端控制
学习使用js链接websocket服务断线重连的方法
徊忆羽菲
04-13 7341
学习使用js链接websocket服务断线重连的方法前提思路示例代码 前提 我们在是有websocekt的时候，有的时候由于某些原先websocket会断开连接，我们需要重现连接，该如何实现呢？这就需要我们仔细研究websocket的api的使用了。 思路 首先我们要熟悉如下几个api 1、连接websocket的服务器的websocekt函数 2、websocekt断开后触发的onclose函数 由上面这两个函数就可以了，大致思路梳理一下： 1、首先开发一个函数websocketinit，函数主要是web
WebSocket的心跳机制和断线重连
热门推荐
weixin_45313351的博客
12-12 2万+
心跳机制的实现，在客户端连接成功的回调中即开启心跳。心跳处理函数内部使用定时器延时触发向服务端发送消息的方法，待服务器将消息返回证明是连线成功状态下，继续调用心跳检测方法。如果客户端给服务端发送心跳消息，在定义的超时时间后客户端没有收到回复，则说明和服务端断线了,此时会触发到客户端连接关闭的回调函数，在此回调中发起重新连接websocket。
JavaScript WebSocket实现长连接通信连接重连
纸上得来终觉浅，绝知此事要躬行
11-22 7997
JavaScript-JS依靠WebSoket也可以像其他语言一样能够实现通信代码，不过使用的时候需要注意检查连接断开的情况。最基本的必须保证IP和端口都可以访问。 目录 WebSocket代码及测试 调用初始化代码 通信示例代码 测试效果 WebSocket连接关闭重连处理 连接断开问题 代码实现重连 重连效果 WebSocket代码及测试 调用初始化代码 CvNet...
js websocket自动重连机制（心跳后续）
weixin_42900858的博客
04-22 3416
window.webSocket = {}; var heartCheck = { lockReconnect: false, //避免ws重复连接 maxReconnectionDelay: 30 * AP.MINUTE, //最大重连时间 minReconnectionDelay: 10 * AP.SECOND, //最小重连时间 reconnectionDelayGrowFactor: 1.5, //自动重连失败后重连时间倍数增长 connectionTimeo
websocket断线重连&&心跳检测
weixin_39530121的博客
11-14 2356
封装websocket 实现断线重连跟心态检测，使用的typeScript去封装。
pcVeryWs:封装了webSocket，实现了掉线重连，心跳，等功能，
05-14
pcVeryWs封装了webSocket，实现了掉线重连，心跳，等功能，
vue封装websocket.zip
02-24
vue 封装 webSocket调用 封装后的webSocket在组件中调用 压缩文件中包含socket.js和调用方法说明
js websocket断线重连
牛奔的博客
10-14 1399
js websocket断开重连实例代码,请根据自己需求做出相应改动Vue中使用websocket $(function() { var lockReconnect = false;//避免重复连接 var ws = null; //WebSocket的引用 var wsUrl = "xxxxxx"; //这个要与后端提供的相同 //创建WebSocket连接,如果不确定浏览器是否支持，...
js 封装websocket (包括心跳检测，断线重连等)
weixin_43827751的博客
08-05 2833
代码】js 封装websocket (包括心跳检测，断线重连等)
如何通过websoket实现即时通讯+断线重连?
weixin_48082900的博客
03-08 3084
通过express搭建本地服务器,实现websoket即时通讯,并解决断线重连问题
WebSocket使用及优化（心跳机制与断线重连）
jianjieX的博客
02-17 6672
与http不同，websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接。于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。原文：https://www.cnblogs.com/HelloWorld-Yu/p/14599514.html。//添加索引，方便在客户端列表查询某个socket连接。//存放已连接的客户端。
websocket断线重新连接
walaw11的博客
12-08 467
【代码】websocket断线重新连接。
websocket的基础使用，心跳机制，断线重连
weixin_43239880的博客
05-23 7220
websocket的基础使用，心跳机制，断线重连。传统的http请求只能是由前端向后台发送一个请求，然后后台把结果返回给前端，前端再进行展示。这里就暴露了一个问题，就是通信只能由前端发起，而后台无法主动与前端通信。而websoket的出现就是为了解决这个问题，让前端可以主动联系后台，后台也可以主动联系前台。相信大家都知道websoket的应用场景主要是用于即时通讯，比如QQ、微信即时通讯软件，同时在一些实时监控，需要即时暴露问题的地方也需要用到websoket，比如大屏可视化，需要及时的展现商品的成交数量。
Vue项目全局创建WebSocket连接(支持断线重连和心跳检测)
weixin_42817587的博客
12-30 7198
首先创建WebSocket.js文件，我把它放在了src/js/websocket.js路径下 WebSocket.js： import store from '@/store' import { Message } from 'element-ui' var url = 'ws://127.0.0.1:9090/websocket/' var ws; var tt; var lockReconnect = false;//避免重复连接 var clientId = localStorage.getIte
Js WebSocket类，收发Json，带心跳，断线重连
最新发布
kael_wyh的博客
12-15 974
如题心跳：4秒发一次断线：2秒后自动重连收发：发送和返回json，处理粘包断包等情况，json字符串最大长度9999缓存：未连接时，自动缓存100个包，当连接时会自动发出。
前端 websocket 断线重连
03-28
前端 WebSocket 断线重连是一种处理 WebSocket 连接异常断开的方法，以确保 WebSocket 连接的可靠性。以下是一个基本的断线重连示例： ```javascript let websocket = null; let lockReconnect = false; // 避免重复连接 function createWebSocket() { try { websocket = new WebSocket('ws://localhost:8080'); websocket.onopen = function () { console.log('WebSocket 连接成功'); }; websocket.onclose = function () { console.log('WebSocket 连接关闭'); reconnect(); }; websocket.onerror = function () { console.log('WebSocket 连接出错'); reconnect(); }; websocket.onmessage = function (event) { console.log('收到消息：', event.data); }; } catch (e) { console.log('WebSocket 连接异常：', e.message); reconnect(); } } function reconnect() { if (lockReconnect) { return; } lockReconnect = true; // 重连间隔递增 setTimeout(function () { createWebSocket(); lockReconnect = false; }, 5000); } createWebSocket(); ``` 以上代码中，`createWebSocket` 函数用于创建 WebSocket 连接，捕获连接成功、关闭、出错和收到消息的事件。如果连接关闭或出错，则调用 `reconnect` 函数进行重连。`reconnect` 函数会检查是否已经在重连中，如果是则不进行重连，否则等待一段时间后重新创建 WebSocket 连接。 需要注意的是，WebSocket 断线重连的实现也需要考虑到服务器的实现，例如服务器可能会限制客户端的连接频率或连接数量。因此，更复杂的实现方式可能需要考虑这些因素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值