WebSocket实战之六心跳重连机制

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

一、前言

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

二、PingPong

关于心跳包的格式,WebSocket协议RFC6455中有定义控制帧的格式.

Ping帧包含一个操作码  0x9,Pong帧包含一个操作码 0xA。

客户端发送Ping帧,服务端收到Ping帧后回一个响应Pong帧。

但是JavaScript 并没有API支持Ping、Pong帧,而后端JavaEE是有PingPong的支持,这是很奇怪的事情,那我们就通过自定义消息来定义心跳包。

三、一个包含心跳包服务端推送较完整的例子

1、SpringBoot端代码

对 WebSocket实战之五JSR356 这篇文章WebSocketServer类进行修改,配置一个定时器,每隔10秒定时发送当前时间,并且在onMessage事件中加上接收心跳包以及发送心跳包的代码,服务端对心跳处理相对简单。

WebSocket实战之六心跳重连机制,通讯协议,websocket,网络协议,网络

WebSocket实战之六心跳重连机制,通讯协议,websocket,网络协议,网络

注:需要使用一个容器将请求的Session保存起来并且使用static,否则在发送信息时拿不到原来的那个session对象。

2、前端JavaScript代码

WebSocket实战之六心跳重连机制,通讯协议,websocket,网络协议,网络

WebSocket实战之六心跳重连机制,通讯协议,websocket,网络协议,网络

说明:

1、所有异常都加上重连代码,包含创建WebSocket连接、onClose事件、onError事件。

2、在onOpen和onMessage启动心跳包发送。

3、心跳包发送方法设置两个延迟器一个用于发送心跳包,另外一个用于当服务端超时(如果服务端未超时会发送响应心跳包然后重新调用heartCheck将两个延迟器清空)关闭WebSocket连接。

4、重连代码时序:当服务端Down掉或网络断开超过一定时间serverTimeoutObj这个延迟器会执行,然后调用ws.close()关闭连接并且触发onClose事件,在onClose事件中会调用reconnect方法,而reconnect又会调用createWebSocket方法,createWebSocket去创建WebSocket连接,当创建异常时又会再调用reconnect,一直到能连接得上。文章来源地址https://www.toymoban.com/news/detail-729320.html

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

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

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

相关文章

  • websocket的基础使用,心跳机制,断线重连

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

    2024年02月06日
    浏览(47)
  • 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)
  • uniapp使用WebSocket断线,心跳重连机制

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

    2024年04月12日
    浏览(41)
  • websocket断线重连&&心跳检测

    封装websocket 实现断线重连跟心态检测,使用的typeScript去封装 在nodejs 安装ws库 代码如下(示例):  服务端实现ws 创建一个server.js 文件 运行ws服务   node .server.js  客户端实现websocket 创建一个socket.ts 文件 vue 页面使用 断开ws服务 断线  启动服务后 自动重连

    2024年01月19日
    浏览(39)
  • websocket超时重连、心跳检测

    在单个TCP连接上进行全双工通信的协议,可以实现服务端和客户端双向推送信息的协议。我们在使用webscoket通信时必须要注意的问题超时重连和心跳检测。 超时重连:当出现错误时客户端尝试重新连接websocket。 心跳检测:客户端长时间没接收到服务端消息,就向服务端发送

    2024年02月11日
    浏览(41)
  • Vue 2 中 WebSocket 模块实现与应用(包含心跳检测、自动重连)

    WebSocket 技术是一种在 Web 开发中常用的实时通信方式,它允许客户端和服务器之间建立持久性的双向连接,以便实时地传输数据。在 Vue.js 项目中,使用 WebSocket 可以轻松实现实时消息推送、即时通讯等功能。在这篇博客中,我们将介绍一个基于 Vue.js 的 WebSocket 模块的实现,

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

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

    2024年03月18日
    浏览(53)
  • mosquitto心跳和网络重连机制(基于MQTT协议)

    在网络通信中,心跳(Heartbeat)指的是一种周期性的消息,用于维持通信连接的活动状态。心跳包的主要作用是检测连接是否处于活动状态,及时发现连接异常并重新恢复连接,维护网络通信的稳定性和可靠性。 MQTT(Message Queuing Telemetry Transport)是一种轻量级、开放式的消息

    2024年02月03日
    浏览(44)
  • WebSocket心跳机制

    WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。 1、创建webSocket 2、websocket事件 事件 事件处理程序 描述 open Socket.onopen 连接建立时触发

    2024年02月15日
    浏览(58)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包