简易的 Websocket + 心跳机制 + 尝试重连

已于 2024-08-23 16:11:40 修改
阅读量860 收藏 22
点赞数 7
文章标签： websocket 网络协议 网络
于 2024-08-23 14:07:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010263423/article/details/141463968
版权

文章目录

还没有写完，bug 是有的，我在想解决办法了…

演示

请添加图片描述

大纲

  • 基础的 webSocket 连接
  • 前后端：添加心跳机制
  • 后端无心跳反应，前端尝试重新连接
  • 设置重新连接次数，超过最大尝试次数之后，不再尝试重新连接

基础 WebSocket

前端的基础就是这些，大概的效果是这样的

请添加图片描述

<body>
  <button onclick="reConnect()">1. 重建连接</button>
  <button onclick="sendMessage()">2. 发消息</button>
  <button onclick="stopConnect()">3. 断开连接</button>
</body>
<script>
  let ws = null // 使用null来标记当前没有活动的 WebSocket 连接

  function createNewWebSocket() {
    if (ws && ws.readyState !== WebSocket.CLOSED) {
      ws.close() // 确保关闭旧的连接
    }
    ws = new WebSocket('ws://localhost:8080')

    ws.onopen = function (evt) {
      console.log('Connection open ...')
    }

    ws.onmessage = function (evt) {
      console.log('Received Message: ' + evt.data)
    }

    ws.onclose = function (evt) {
      console.log('Connection closed.')
    }
  }

  function sendMessage() {
    if (ws) ws.send(`前端发送:>> ${new Date()}`)
  }

  function stopConnect() {
    if (ws) ws.close()
  }

  function reConnect() {
    createNewWebSocket()
  }
</script>

后端的代码基本不变，所以我直接把心跳也做好
后端的心跳就是：拿到前端的值，如果是 ping 的话，就返回一个 pong，其他逻辑保持不变

const http = require('http')
const WebSocket = require('ws')
const server = http.createServer()
const wss = new WebSocket.Server({ server })

wss.on('connection', (socket) => {
  console.log('webSocket 连接成功')

  socket.on('message', (message) => {
    // 将 Buffer 转换为字符串
    const messageStr = message.toString()
    const currentRandom = Math.random()
    const isSendPong = currentRandom < 0.5
    console.log('后端收到消息:>>' + messageStr)
    // 检查是否为心跳请求
    if (messageStr === 'ping') {
      socket.send(`当前随机值为 ${currentRandom}, 是否发送心跳：${isSendPong}`)
      //  50%的概率发送 "pong"
      if (isSendPong) {
        socket.send('pong') // 心跳响应
      }
    } else {
      const message = `后端发送消息:>> 你好前端~ ${new Date().toLocaleString()}`
      socket.send(message)
    }
  })

  socket.on('close', () => {
    console.log('websocket 已经关闭')
  })
})

server.on('request', (request, response) => {
  response.writeHead(200, { 'Content-Type': 'text/plain' })
  response.end('Hello, World')
})

server.listen(8080, () => {
  console.log('服务器已启动，端口号为 8080')
})

前端: 添加心跳机制

思路：前端写一个定时器，用于隔一段时间发送一个 ping 值
效果如下图所示请添加图片描述

好吧，false 的概率有点高，不顾可以看历史记录

我在后端设置了随机逻辑，模拟一下出错的场景，百分之50的概率回应前端的心跳，如果 true 的话，后端就回应前端的心跳，返回 pong

前端 代码如下

<body>
  <button onclick="reConnect()">1. 重建连接</button>
  <button onclick="sendMessage()">2. 发消息</button>
  <button onclick="stopConnect()">3. 断开连接</button>
</body>
<script>
  let ws = null // 使用null来标记当前没有活动的 WebSocket 连接
  let heartbeatTimer = null // 心跳定时器
  const HEARTBEAT_INTERVAL = 5000 // 每隔 5 秒发送一次心跳

  function createNewWebSocket() {
    if (ws && ws.readyState !== WebSocket.CLOSED) {
      ws.close() // 确保关闭旧的连接
    }
    ws = new WebSocket('ws://localhost:8080')

    ws.onopen = function (evt) {
      console.log('Connection open ...')
      startHeartbeat()
    }

    ws.onmessage = function (evt) {
      console.log('Received Message: ' + evt.data)
      handleHeartbeatResponse(evt.data)
    }

    ws.onclose = function (evt) {
      console.log('Connection closed.')
      stopHeartbeat()
    }
  }

  function sendMessage() {
    if (ws) ws.send(`前端发送:>> ${new Date().toLocaleString()}`)
  }

  function stopConnect() {
    if (ws) ws.close()
    stopHeartbeat()
  }

  function reConnect() {
    createNewWebSocket()
  }

  function startHeartbeat() {
    heartbeatTimer = setInterval(() => {
      ws.send('ping')
    }, HEARTBEAT_INTERVAL)
  }

  function stopHeartbeat() {
    clearInterval(heartbeatTimer)
    heartbeatTimer = null
  }

  function handleHeartbeatResponse(message) {
    if (message === 'heartbeat') {
      console.log('Heartbeat received.')
      clearTimeout(heartbeatTimer) // 清除超时定时器
      startHeartbeat() // 重新启动心跳
    }
  }
</script>

前端: 尝试重新连接

设置一个场景: 前端发送三个心跳包，如果都没有反应，那么就判断为断开连接了，就去重新连接

历史代码

前端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">发消息</button>
    <button id="stop">断链</button>
    <button id="reconnect">重新连接</button>
  </body>
  <script>
    const btn = document.querySelector('#btn')
    const stop = document.querySelector('#stop')
    const reconnect = document.querySelector('#reconnect')
    let ws = null // 使用null来标记当前没有活动的WebSocket连接
    let heartbeatInterval = null // 存储心跳定时器
    let timeoutId = null // 存储超时定时器
    let reconnectAttempts = 0 // 重连尝试次数
    const maxReconnectAttempts = 3 // 最大重连次数

    function createNewWebSocket() {
      if (ws && ws.readyState !== WebSocket.CLOSED) {
        ws.close() // 确保关闭旧的连接
      }
      ws = new WebSocket('ws://localhost:8080')

      ws.onopen = function (evt) {
        console.log('Connection open ...')
        startHeartbeat() // 开始发送心跳
      }

      ws.onmessage = function (evt) {
        console.log('Received Message: ' + evt.data)

        // 检查是否为心跳响应
        if (evt.data === 'pong') {
          clearTimeout(timeoutId) // 清除超时定时器
          resetHeartbeatTimer() // 重置心跳定时器
        }
      }

      ws.onclose = function (evt) {
        console.log('Connection closed.')
        clearInterval(heartbeatInterval) // 清除心跳定时器
        reconnectWebSocket() // 尝试重新连接
      }
    }

    // 发送心跳包
    function sendHeartbeat() {
      if (ws) {
        ws.send('ping')
        timeoutId = setTimeout(() => {
          // 如果在超时时间内没有收到 "pong" 响应，则关闭当前连接
          console.log('超时，关闭连接')
          ws.close()
        }, 15000) // 设置超时时间为 15 秒
      }
    }

    // 启动心跳
    function startHeartbeat() {
      sendHeartbeat() // 立即发送第一个心跳包
      heartbeatInterval = setInterval(sendHeartbeat, 30000) // 每30秒发送一次
    }

    // 重置心跳定时器
    function resetHeartbeatTimer() {
      clearInterval(heartbeatInterval)
      heartbeatInterval = setInterval(sendHeartbeat, 30000) // 重新设置定时器
    }

    // 重新连接
    function reconnectWebSocket() {
      console.log('尝试重新连接', reconnectAttempts)

      // 检查是否超过最大重连次数
      if (reconnectAttempts < maxReconnectAttempts) {
        reconnectAttempts++
        createNewWebSocket()
      } else {
        console.log('超过最大重连次数，不再尝试连接')
      }
    }

    btn.addEventListener('click', () => {
      if (ws) {
        ws.send(`前端发送:>> ${new Date()}`)
      }
    })

    stop.addEventListener('click', () => {
      if (ws) {
        ws.close()
      }
    })

    reconnect.addEventListener('click', () => {
      createNewWebSocket()
    })
  </script>
</html>

后端

const http = require('http')
const WebSocket = require('ws')
const server = http.createServer()
const wss = new WebSocket.Server({ server })

wss.on('connection', (socket) => {
  console.log('webSocket 连接成功')

  socket.on('message', (message) => {
    // 将 Buffer 转换为字符串
    const messageStr = message.toString();

    console.log('后端收到消息:>>' + messageStr);

    // 检查是否为心跳请求
    if (messageStr === 'ping') {
      socket.send('pong'); // 心跳响应
    } else {
      socket.send('后端发送消息:>> hello 我是 socket.send');
    }
  })

  socket.on('close', () => {
    console.log('websocket 已经关闭');
  })
})

server.on('request', (request, response) => {
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Hello, World');
})

server.listen(8080, () => {
  console.log('服务器已启动，端口号为 8080');
})
Lovely Ruby
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
netty+websocket实现心跳和断线重连
03-06
在本文中，我们将深入探讨如何利用 Netty 和 WebSocket 实现心跳检测和断线重连机制。 首先，我们需要理解 WebSocket 协议。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它为客户端和服务器提供了低...
websocket++库
03-05
WebSocket++库是一个开源的C++库，专门用于实现WebSocket协议，该协议允许在Web浏览器和其他服务器之间进行全双工通信。WebSocket++库的设计目标是提供一个轻量级、高效且易于使用的WebSocket客户端和服务器实现，它...
websocket的基础使用，心跳机制，断线重连
weixin_43239880的博客
05-23 8017
websocket的基础使用，心跳机制，断线重连。传统的http请求只能是由前端向后台发送一个请求，然后后台把结果返回给前端，前端再进行展示。这里就暴露了一个问题，就是通信只能由前端发起，而后台无法主动与前端通信。而websoket的出现就是为了解决这个问题，让前端可以主动联系后台，后台也可以主动联系前台。相信大家都知道websoket的应用场景主要是用于即时通讯，比如QQ、微信即时通讯软件，同时在一些实时监控，需要即时暴露问题的地方也需要用到websoket，比如大屏可视化，需要及时的展现商品的成交数量。
WebSocket的心跳机制和断线重连
热门推荐
weixin_45313351的博客
12-12 2万+
心跳机制的实现，在客户端连接成功的回调中即开启心跳。心跳处理函数内部使用定时器延时触发向服务端发送消息的方法，待服务器将消息返回证明是连线成功状态下，继续调用心跳检测方法。如果客户端给服务端发送心跳消息，在定义的超时时间后客户端没有收到回复，则说明和服务端断线了,此时会触发到客户端连接关闭的回调函数，在此回调中发起重新连接websocket。
【自用笔记】webSocket 心跳机制、断线重连
Lin_javascript的博客
01-15 1923
注意：我在开发过程中发现，当我主动关闭连接后，在重连时间内会自动重新开启连接，这是因为websocket连接关闭会又走一次重连机制，所以 如果你是使用的定时器，可以直接清除定时器，或者定义一个变量控制是组件销毁关闭的websocket还是心跳监测重连时关闭的websocket，如果是像我一样，可以判断this.heartBeat.time，关闭后置空，判断return就可以了；在业务中需要使用webSocket定时给后台上传位置，防止以后忘记，在这里进行记录，直接在代码中写入笔记；
websocket断线重连&&心跳检测
weixin_39530121的博客
11-14 2930
封装websocket 实现断线重连跟心态检测，使用的typeScript去封装。
websocket:心跳机制与断线重连
qq1319504645的博客
07-19 313
连接成功事件：当WebSocket连接成功建立时，onopen事件被触发，此时会执行指定的回调函数。socket.io 是一个基于 WebSocket 的 CS（客户端-服务端）的实时通信库，使用它可以在后端提供一个即时通讯服务，它提供的也有一个 JS 库，在前端可以去链接后端 socket.io 创建的服务。关闭连接事件：当WebSocket连接关闭时，onclose事件被触发，执行指定的回调函数。接收消息事件：当接收到服务器发送的消息时，onmessage事件被触发，执行指定的回调函数。
websocket++的客户端&服务端demo
03-01
WebSocket++是C++实现的一个WebSocket协议库，它提供了一个轻量级、高性能的框架，用于在客户端和服务端之间建立实时的、双向通信的连接。WebSocket协议是HTML5的一部分，允许Web应用绕过HTTP的限制，直接与服务器...
websocket+Mse视频流播放器
05-22
WebSocket+MSE（Media Source Extensions）视频流播放器是一种先进的技术解决方案，用于实现实时、低延迟的在线视频播放。这种技术结合了WebSocket协议和MSE标准，为开发者提供了更高效、灵活的方法来处理视频流数据...
websocket封装使用心跳检测+断线重连
01-16
websocket封装基于 1.websocket四大基础事件 2.扩展心跳检测与断线重连功能 3.核心对象封装，生成与销毁不需要客户端控制
【网络通信】websocket如何断线重连
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
08-31 8483
由于网络波动造成用户间歇性的断开与服务器的连接，待网络恢复之后服务器尝试将用户连接到上次断开时的状态和数据。
js实现websocket断线重连功能
最新发布
扣丁曼
04-02 2520
在项目开发中我们可能经常要使用websocket技术，当连接发生断线后，如果不进行页面刷新将不能正常接收来自服务端的推送消息。为了有效避免这种问题，我们需要在客户端做断线重连处理。当网络或服务出现问题后，客户端会不断检测网络状态，如果服务恢复，客户端则会自动重新连接，并断开本地检测网络的定时器。
如何通过websoket实现即时通讯+断线重连?
i-cat的博客
03-08 3347
通过express搭建本地服务器,实现websoket即时通讯,并解决断线重连问题
WebSocket使用及优化（心跳机制与断线重连）
学而不思则罔
06-29 843
与http不同，websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接。于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。然而，这么做无疑会对服务端造成资源消耗，因为HTTP请求包含较长的头文件，只传递了少许的有用信息，十分消耗资源。WebSocket在2008年被提出，其通信协议于2011被制定为标准。
websocket 断线重连
weixin_52103939的博客
12-18 9121
//1.创建websocket客户端 var wsServer = 'ws://ip/'; var limitConnect = 3; // 断线重连次数 var timeConnect =0; webSocketInit(wsServer); //socket初始化 function webSocketInit(service){ var ws = new WebSocket(service); ws.onopen = function () { c
websocket断线重新连接
walaw11的博客
12-08 690
【代码】websocket断线重新连接。
webSocket的基本使用以及心跳检测、断线重连
m0_64227118的博客
02-20 4823
为了获取实时数据，前端需要和后端保持通信，HTTP 协议只能是客户端向服务器发出请求，服务器返回查询结果。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。
setup 语法糖 封装websocket + 心跳机制
06-08
好的，我理解你的问题是关于使用 `setup` 语法糖封装 WebSocket 和心跳机制的方法。首先， `setup` 是 Vue 3 中引入的新特性，它可以在组件实例化之前执行一些操作，比如初始化状态、订阅事件、创建 WebSocket 连接等。下面是一个使用 `setup` 语法糖封装 WebSocket 和心跳机制的示例代码： ```vue <template> <div>{{ message }}</div> </template> <script> import { ref, onMounted, onUnmounted } from 'vue' export default { setup() { const message = ref('') let socket = null const connectWebSocket = () => { socket = new WebSocket('wss://example.com/ws') socket.onopen = () => { console.log('WebSocket connected') socket.send('Hello, WebSocket') } socket.onmessage = event => { message.value = event.data } socket.onclose = () => { console.log('WebSocket disconnected') setTimeout(() => { connectWebSocket() }, 5000) } } const startHeartbeat = () => { setInterval(() => { if (socket.readyState === WebSocket.OPEN) { socket.send('Heartbeat') } }, 3000) } onMounted(() => { connectWebSocket() startHeartbeat() }) onUnmounted(() => { socket.close() }) return { message } } } </script> ``` 上面的代码中，我们使用了 `ref` 创建了一个响应式的 `message` 变量，将其绑定到模板中的 `<div>` 元素上。在 `setup` 函数中，我们声明了一个 `socket` 变量，用于存储 WebSocket 连接对象。然后，我们定义了 `connectWebSocket` 函数，用于创建 WebSocket 连接，并在连接打开、收到消息、连接关闭时分别执行对应的操作。接着，我们定义了 `startHeartbeat` 函数，用于定时发送心跳包。在 `onMounted` 生命周期钩子中，我们调用了 `connectWebSocket` 和 `startHeartbeat` 函数。在 `onUnmounted` 生命周期钩子中，我们关闭了 WebSocket 连接。最后，我们将 `message` 变量返回给模板使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值