websocket超时重连、心跳检测

这篇具有很好参考价值的文章主要介绍了websocket超时重连、心跳检测。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

websocket

在单个TCP连接上进行全双工通信的协议,可以实现服务端和客户端双向推送信息的协议。我们在使用webscoket通信时必须要注意的问题超时重连和心跳检测。
超时重连:当出现错误时客户端尝试重新连接websocket。
心跳检测:客户端长时间没接收到服务端消息,就向服务端发送请求,查看服务端是否还在,如果服务端在规定时间未回复消息则表明服务端由于某种原因中断了,那么客户端也就可以中断连接了。当然下面代码可以通过reconnect再次选择重连。文章来源地址https://www.toymoban.com/news/detail-509456.html

class WebSocketClient {
    #ws = null
    #needReconnect
    #count
    constructor(options) {
        this.url = options.url
        this.#needReconnect = false//是否需要重连
        this.#initWS()//启动ws
        this.watch = options.watch || true//是否开启心跳
        this.reconnectCountLimit = options.reconnectCountLimit ||3 //重连次数
        this.#count = 0 //重连次数计数
        this.reconnectTime = null//重连计时器
        this.reconnectInterval = options.reconnectInterval || 5000//重连时间间隔
        this.lastMessageTime = 0 //记录上次收到信息的时间 ->暂时没使用
        this.heartDeadline = options.heartDeadline || 10000//心跳检测截止时间 每次收到信息后将在该时间后发送心跳消息,在该时间内未收到信息就终端ws连接
        this.heartCloseTime = null //心跳关闭计时器
        this.checkHeartTime = null  //发送心跳消息计时器
    }
    get ws() {
        return this.#ws
    }
    //初始化websocket
    #initWS() {
        this.#ws = new WebSocket(this.url)
        this.#ws.addEventListener('open', (e) => {
            this.initState()
            this.#ws.send(`${JSON.stringify({ name: 'xxx', job: '前端高级工程师', salary: 41000 })}`)
        })
        this.#ws.addEventListener('close', (e) => {
            console.log('链接关闭')
        })
        this.#ws.addEventListener('error', (e) => {
            console.log('ws错误,开启重连')
            this.#needReconnect = true
            this.reconnect()
        })
        this.#ws.addEventListener('message', (e) => {
            this.lastMessageTime = new Date().getTime()
            console.log(e.data, 'I am client。I received your message')
            this.watch && this.heartBeat()//启动心跳检测

        })
    }
    //重连
    reconnect() {
        if (this.#needReconnect && this.#count < this.reconnectCountLimit) {
            this.reconnectTime = setTimeout(() => {
                console.log('重连')
                this.#count++
                this.#initWS()
            }, this.reconnectInterval);
            return
        }
        this.initState()
    }
    //初始化数据
    initState() {
        this.#needReconnect = false
        this.#count = 0
        this.reconnectTime && clearInterval(this.reconnectTime)
    }
    closeCheckHeart() {
        clearTimeout(this.checkHeartTime)
        clearTimeout(this.heartCloseTime)
    }
    send(data) {
       this.#ws.send(data) 
    }
    //心跳检测
    heartBeat() {
        const checkHeart = () => {
            return new Promise((resolve) => {
                //心跳检测 当上一次交换信息时间和现在间隔heartLimit时3s后开启心跳检测
                console.log(new Date(this.lastMessageTime).toLocaleString(),'上次收到时间');
                this.closeCheckHeart()
                this.checkHeartTime = setTimeout(() => {
                    if (this.#ws.readyState === 1) {
                        console.log('检测心跳');
                        this.#ws.send(JSON.stringify({
                            type: 'heart'
                        }))
                        this.heartCloseTime = setTimeout(() => {
                            console.log('超时关闭')
                            this.#ws.close()
                        }, this.heartDeadline)
                        resolve()
                    } else {
                        checkHeart()
                    }
                }, this.heartDeadline)
            })
        }
        checkHeart()
    }
}
const ws = new WebSocketClient({ url:'ws://localhost:8888'})


import { WebSocketServer } from 'ws';
const wss = new WebSocketServer({ port: 8888 });

wss.on('connection', function connection(ws) {
  ws.on('message', function message(data) {
    const res = data.toString()
    console.log(res)
    if (res.startsWith('{') && JSON.parse(res)?.type === 'heart') {
      // ws.send('{heart:exist}')
    }
  });
  wss.clients.forEach(client => {
    client && client.send('广播信息')
  })
  ws.send('I am service');
  setTimeout(() => {
    ws.send('xxx');
  },10000)
});
wss.onopen = function (e) {
  console.log('服务端链接');
}

到了这里,关于websocket超时重连、心跳检测的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebSocket的心跳机制和断线重连

    在服务器重启或是弱网情况下,前端不能保证一直连接成功。因此在出现被动断开的情况下,需要有 心跳机制 和 断线重连 的功能。 心跳机制 :客户端每隔一段时间向服务端发送一个特有的心跳消息,每次服务端收到消息后只需将消息返回,此时,若二者还保持连接,则客

    2024年01月18日
    浏览(43)
  • Flutter:WebSocket封装-实现心跳、重连机制

    前言Permalink Flutter简介 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Nat

    2024年02月10日
    浏览(49)
  • websocket前端封装代码,心跳机制断线重连

    websocket是一种全双工通信长链接,大多用来实现及时通讯,数据实时性要求较为高的地方,在websoket未出现的时候前端使用的setInterval轮训进行数据更新的,在那些对于数据实时性要求不高地方我们仍可以使用 轮训。 (1)建立在 TCP 协议之上,服务器端的实现比较容易。 (

    2024年02月11日
    浏览(52)
  • websocket的基础使用,心跳机制,断线重连

    websoket出现的原因: 传统的http请求只能是由前端向后台发送一个请求,然后后台把结果返回给前端,前端再进行展示。这里就暴露了一个问题,就是通信只能由前端发起,而后台无法主动与前端通信。而websoket的出现就是为了解决这个问题,让前端可以主动联系后台,后台也

    2024年02月06日
    浏览(48)
  • uniapp使用WebSocket断线,心跳重连机制

    提示:我们在使用WebSocket,经常会遇到有的时候给别人发消息,别人会接收不到,这个时候就有可能是WebSocket断线了,所以这个时候心跳包就出现了 提示:可直接使用,记得把对应地址替换一下

    2024年04月12日
    浏览(41)
  • WebSocket实战之六心跳重连机制

    WebSocket应用部署到生产环境,我们除了会碰到因为经过代理服务器无法连接的问题(注:该问题可以通过搭建WSS来解决,具体配置请看 WebSocket实战之四WSS配置 ),另外一个问题就是外网环境不稳定经常会断开或者服务器重启或者网络中间服务器当发现一个长连接长时间没有

    2024年02月07日
    浏览(47)
  • WebSocket心跳重连在微信小程序中的实现与服务器端

    WebSocket技术是一种在浏览器和服务器之间建立持久化连接的通信协议。在微信小程序中,通过WebSocket可以实现实时的双向通信。然而,由于网络等各种因素的不稳定性,WebSocket连接可能会出现断开的情况。为了保证连接的可靠性,我们可以通过心跳机制和重连机制来处理Web

    2024年03月18日
    浏览(53)
  • websocket实时通讯和socket.io实时通信库的使用;心跳机制与断线重连

    https://zh.javascript.info/websocket WebSocket 是一种网络通信协议,就类似于 HTTP 也是一种通信协议。 为什么需要 WebSocket? 因为 HTTP 协议有一个缺陷:通信只能由客户端发起。 代码解析: 创建WebSocket实例:通过 new WebSocket() 创建一个WebSocket实例。在括号中传入服务器的URL,该URL指定了

    2024年02月16日
    浏览(41)
  • C++ Qt TCP的心跳检测机制,断线重连技术,应用层代码重新实现

    目录 前言: 一、Qt直接启动本身的KeepAlive 二、在应用层自己实现一个心跳检测  三、自定义心跳代码实现: 完整客户端服务端工程下载: 共用的结构体相关头文件:         客户端部分核心代码:         服务端部分核心代码: 运行结果展示: 前两篇关于qt tcp 相关的,

    2024年02月05日
    浏览(43)
  • Qt音视频开发36-超时检测和自动重连的设计

    如果网络环境正常设备正常,视频监控系统一般都是按照正常运行下去,不会出现什么问题,但是实际情况会很不同,奇奇怪怪七七八八的问题都会出现,就比如网络出了问题都有很多情况(交换机故障、网线故障、带宽故障等),所以监控系统在运行过程中,还得做超时检

    2023年04月13日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包