菜单 搜索
首页 前端知识 js实现websocket断线重连功能

js实现websocket断线重连功能

2024-08-22 23:08:18 前端知识 前端哥 468 477 我要收藏

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

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16515.html
标签
websocket
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

基于javaweb mysql的ssm maven医院预约挂号系统(java ssm jsp js jquery layui mysql)

2024-06-22 10:06:27

jQuery入门到精通学习教程，收藏我这篇就够了，【大牛系列教学

2024-09-01 00:09:13

JavaScript jQuery,交换式web前端开发

2024-09-01 00:09:11

【Jquery】jquery的简单使用

2024-09-01 00:09:11

jQuery Tree Multiselect：优雅的前端树形选择器组件

2024-09-01 00:09:10

第1章-05-通过浏览器控制台安装JQuery.js库

2024-09-01 00:09:08

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45

推荐文章：JQuery Ajax Progress——掌握每一次数据流动的脉搏

2024-09-01 00:09:45

JqueryDataTablesServerSide项目指南

2024-09-01 00:09:44

解决vCharts不兼容Echarts5 版本问题

2024-09-01 00:09:44

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！