js实现websocket断线重连功能_js websocket断线重连-CSDN博客

本文链接：https://blog.csdn.net/Qcg0223/article/details/137287120

本文对比了项目开发中未做断线检测的WebSocket连接和实现断线重连后的效果，介绍了如何在客户端进行网络状态监控和自动重连，以确保在服务中断时仍能接收消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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