vue中使用WebSocket心跳机制与Linux中的心跳机制

WebSocket心跳机制

 

一、WebSocket简介

WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。

二、WebSocket事件与方法

1、创建WebSocket实例

    var socketObj;if ("WebSocket" in window) {socketObj = new WebSocket(webSocketLink);} else if ("MozWebSocket" in window) {socketObj = new MozWebSocket(webSocketLink);}

 

2、WebSocket 事件

 

3、WebSocket 方法

 

三、WebSocket的心跳重连机制

1、问题

(1)websocket在连接后,如果长时间服务端和客户端不发消息,服务端会把websocket给断开。
(2)存在网络忽然断开的情况,这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息,这些数据会丢失。

2、心跳重连机制

为了解决上面的问题,就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。

⼼跳机制是客户端每隔⼀段时间会向服务端发送⼀个数据包,告诉服务端自己还活着,同时客户端会根据服务端是否会回传⼀个数据包来确定服务端是否还活着。
如果客户端没有收到回复,表示websocket断开连接或者网络出现问题,就需要重连。

四、实际使用

详细代码如下:

<template><div></div>
</template>
<script>
export default {data() {return {// websocket相关socketObj: "", // websocket实例对象//心跳检测heartCheck: {vueThis: this, // vue实例timeout: 10000, // 超时时间timeoutObj: null, // 计时器对象——向后端发送心跳检测serverTimeoutObj: null, // 计时器对象——等待后端心跳检测的回复// 心跳检测重置reset: function () {clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);return this;},// 心跳检测启动start: function () {this.timeoutObj && clearTimeout(this.timeoutObj);this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);this.timeoutObj = setTimeout(() => {// 这里向后端发送一个心跳检测,后端收到后,会返回一个心跳回复this.vueThis.socketObj.send("HeartBeat");console.log("发送心跳检测");this.serverTimeoutObj = setTimeout(() => {// 如果超过一定时间还没重置计时器,说明websocket与后端断开了console.log("未收到心跳检测回复");// 关闭WebSocketthis.vueThis.socketObj.close();}, this.timeout);}, this.timeout);},},socketReconnectTimer: null, // 计时器对象——重连socketReconnectLock: false, // WebSocket重连的锁socketLeaveFlag: false, // 离开标记(解决 退出登录再登录 时出现的 多次相同推送 问题,出现的本质是多次建立了WebSocket连接)};},created() {console.log("离开标记", this.socketLeaveFlag);},mounted() {// websocket启动this.createWebSocket();},destroyed() {// 离开标记this.socketLeaveFlag = true;// 关闭WebSocketthis.socketObj.close();},methods: {// websocket启动createWebSocket() {let webSocketLink = "wss://uat.sssyin.cn/ws-reservation"; // webSocket地址// console.log(webSocketLink);try {if ("WebSocket" in window) {this.socketObj = new WebSocket(webSocketLink);} else if ("MozWebSocket" in window) {this.socketObj = new MozWebSocket(webSocketLink);}// websocket事件绑定this.socketEventBind();} catch (e) {console.log("catch" + e);// websocket重连this.socketReconnect();}},// websocket事件绑定socketEventBind() {// 连接成功建立的回调this.socketObj.onopen = this.onopenCallback;// 连接发生错误的回调this.socketObj.onerror = this.onerrorCallback;// 连接关闭的回调this.socketObj.onclose = this.oncloseCallback;// 向后端发送数据的回调this.socketObj.onsend = this.onsendCallback;// 接收到消息的回调this.socketObj.onmessage = this.getMessageCallback;//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。window.onbeforeunload = () => {this.socketObj.close();};},// websocket重连socketReconnect() {if (this.socketReconnectLock) {return;}this.socketReconnectLock = true;this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);this.socketReconnectTimer = setTimeout(() => {console.log("WebSocket:重连中...");this.socketReconnectLock = false;// websocket启动this.createWebSocket();}, 4000);},// 连接成功建立的回调onopenCallback: function (event) {console.log("WebSocket:已连接");// 心跳检测重置this.heartCheck.reset().start();},// 连接发生错误的回调onerrorCallback: function (event) {console.log("WebSocket:发生错误");// websocket重连this.socketReconnect();},// 连接关闭的回调oncloseCallback: function (event) {console.log("WebSocket:已关闭");// 心跳检测重置this.heartCheck.reset();if (!this.socketLeaveFlag) {// 没有离开——重连// websocket重连this.socketReconnect();}},// 向后端发送数据的回调onsendCallback: function () {console.log("WebSocket:发送信息给后端");},// 接收到消息的回调getMessageCallback: function (msg) {// console.log(msg);console.log(msg.data);if (msg.data.indexOf("HeartBeat") > -1) {// 心跳回复——心跳检测重置// 收到心跳检测回复就说明连接正常console.log("收到心跳检测回复");// 心跳检测重置this.heartCheck.reset().start();} else {// 普通推送——正常处理console.log("收到推送消息");let data = JSON.parse(msg.data);// 相关处理console.log(data);}},},
};
</script>

 

Linux中的心跳机制方案

 

 

心跳机制时,发送心跳包后判断设备是否离线

等待响应

发送心跳包后,需要等待对方设备的响应。可以设置一个合理的超时时间,如果在这个时间内没有收到响应,则可能表明对方设备有问题。

超时处理

如果在设定的超时时间内没有收到响应,应该认为对方设备可能离线或出现故障。这时,可以采取进一步的措施,如重试发送心跳包、记录日志、发送告警、尝试重新建立连接等。

重试机制

在确定对方设备离线之前,可以实施一定的重试机制。例如,连续几次心跳包均未得到响应后才判断为离线。这有助于避免因网络短暂抖动而错误地判断设备离线。

心跳包的响应内容

心跳响应不仅是一个简单的确认,有时可以包含设备的状态信息。通过分析这些信息,可以更准确地判断设备的健康状况。

多点检测

如果应用场景允许,可以从多个节点发送心跳包,以增加检测的可靠性。如果所有节点都无法接收到响应,那么可以更确定地判断设备离线。

整合监控系统

在大型系统中,心跳检测通常与监控系统整合,以实现更全面的状态监控和告警机制。

Netty保活机制

TCP层面的保活机制

TCP 协议本身提供了一个保活机制,通过在长时间未收到数据时向对端发送探测报文,以检测连接的状态。在 Netty 中,可以通过设置 childOption(ChannelOption.SO_KEEPALIVE, true) 来启用 TCP 层面的保活机制。

TCP长连接下,客户端和服务器若长时间无数据交互情况下,若一方出现异常情况关闭连接,抑或是连接中间路由出于某种机制断开连接,而此时另一方不知道对方状态而一直维护连接,浪费系统资源的同时,也会引起下次数据交互时出错。为了解决此问题,引入了TCP KeepAlive机制(并非标准规范,但操作系统一旦实现,默认情况下须为关闭,可以被上层应用开启和关闭)。其基本原理是在此机制开启时,当长连接无数据交互一定时间间隔时,连接的一方会向对方发送保活探测包,如连接仍正常,对方将对此确认回应。

TCP KeepAlive参数

KeepAlive为操作系统层面的参数.
tcp_keepalive_time (integer; default: 7200; since Linux 2.2)
在TCP保活打开的情况下,最后一次数据交换到TCP发送第一个保活探测包的间隔,即允许的持续空闲时长,或者说每次正常发送心跳的周期,默认值为7200s(2h)。

tcp_keepalive_probes (integer; default: 9; since Linux 2.2)
在tcp_keepalive_time之后,最大允许发送保活探测包的次数,到达此次数后直接放弃尝试,并关闭连接,默认值为9(次)。

tcp_keepalive_intvl (integer; default: 75; since Linux 2.4)
在tcp_keepalive_time之后,没有接收到对方确认,继续发送保活探测包的发送频率,默认值为75s。

sysctl net.ipv4.tcp_keepalive_time
sysctl net.ipv4.tcp_keepalive_intvl
sysctl net.ipv4.tcp_keepalive_probes

image

设置keepalive参数

vi /etc/sysctl.conf# 数据交互空闲600秒后发送保活数据
net.ipv4.tcp_keepalive_time=600
# 如果没有收到对方确认,继续发送保活探测包,间隔为60秒
net.ipv4.net.ipv4.tcp_keepalive_intvl=60
# 最大允许发送保活探测包的次数,到达此次数后直接放弃尝试,并关闭连接
net.ipv4.net.ipv4.tcp_keepalive_probes=20cat /etc/sysctl.conf
# 刷新配置
sysctl -p
查看TCP连接
netstat -anutp

参数含义:

-a 显示所有
-n 以ip形式显示当前建立的有效连接和端口
-u 显示UDP协议
-t 显示TCP协议
-p 显示对应PID与程序名

TCP KeepAlive报文格式

TCP KeepAlive探测报文是一种没有任何数据,同时ACK标志被置上的报文,报文中的序列号为上次发生数据交互时TCP报文序列号减1。比如上次本端和对端数据交互的最后时刻,对端回应给本端的ACK报文序列号为 N(即下次本端向对端发送数据,序列号应该为N),则本端向对端发送的保活探测报文序列号应该为 N-1。

TCP KeepAlive机制 的作用 是检测连接的有无(死活),但无法检测连接是否有效,如断网的时候。“连接有效”的定义 = 双方具备发送和接收消息的能力
KeepAlive机制无法代替心跳机制,需要在应用层自己实现心跳机制以检测长连接的有效性,从而高效维持长连接
Keep-Alive机制不会强制切断连接,如果连接存在但是一直不发生数据交互。Keep-Alive不会切断连接。而应用层实现的心跳检测 heartbeat_check 即便连接存在,但不产生数据交互的情况下,依然会强制切断连接。

IdleStateHandler

Netty 提供了一个名为 IdleStateHandler 的处理器,用于在一段时间内没有读取到数据或写入数据时触发事件。你可以通过将 IdleStateHandler 添加到 ChannelPipeline 中来实现自定义的空闲状态处理逻辑。这样就可以及时地检测连接的空闲状态,执行相应的处理操作,比如发送心跳消息或关闭连接。

定时任务

除了 IdleStateHandler 外,你还可以使用 Netty 提供的定时任务功能来实现保活机制。通过定时任务,你可以周期性地向对端发送心跳消息,以检测连接的状态。这种方式更加灵活,可以根据实际需求自定义心跳间隔和心跳消息内容

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/846293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

曝光超1.5亿,迪丽热巴“抖音直播首秀”解锁德施曼智能锁科技革命

作为中国电商行业年中最大的消费狂欢节点&#xff0c;今年的618大促热闹依旧&#xff1b;各大品牌在今年极简的现货模式下展开了周期最长的品牌实力比拼。其中&#xff0c;高端智能锁领军品牌德施曼在618大促期间&#xff0c;携手代言人迪丽热巴&#xff0c;再次掀起智能锁消费…

设计模式(七)结构型模式---组合模式

文章目录 组合模式简介结构UML图具体实现UML图代码实现 组合模式简介 组合模式&#xff08;Composite Pattern&#xff09;又叫整体模式&#xff0c;它创建了对象组的树形结构&#xff0c;将对象组合成树状结构来表示“整体-部分”的层次关系。实际使用点&#xff1a;HashMap中…

Day04 左侧菜单导航实现

一.点击左侧菜单导航到对应的View页面 1.首先在MyToDo项目中,创建出左侧菜单所有的View(视图)及对应的ViewModel(视图逻辑处理类) ViewViewModel首页IndexViewIndexViewModel待办事项ToDoViewToDoViewModel忘备录MemoViewMemoViewModel设置SettingsViewSettingsViewModel

html+CSS+js部分基础运用11

一、改变新闻网页中的字号 1、设计如图1-1所示的界面&#xff0c;要求当网络访问者选择字号中的【大、中、小】时能实现页面字号大小变化&#xff0c;选择“中”时&#xff0c;页面效果如图1所示。 图1 单击前初始状态页面 图2 单击“中”链接后页面 2、div中内容如下&#x…

十大排序 —— 归并排序

十大排序 —— 归并排序 归并排序分治(排序)合归并排序的性能一些小总结 我们今天继续来学习排序算法 —— 归并排序: 归并排序 归并排序&#xff08;Merge Sort&#xff09;是一种高效的、稳定的排序算法&#xff0c;它采用分治法&#xff08;Divide and Conquer&#xff09…

杂项——STM32ZET6要注意的一些问题——高级定时器问题和PB3,PB4引脚问题

ZET6可能会用到定时器&#xff0c;高级定时器要输出PWM要加上这样一行代码&#xff0c;否则无法正常输出PWM波 TIM_CtrlPWMOutputs(TIM8, ENABLE); // 主输出使能&#xff0c;当使用的是通用定时器时&#xff0c;这句不需要 ZET6中PB3,PB4引脚默认功能是JTDO和NJTRST,如果想将…

六一和侄子拼lego颗粒二维画

一、从泥巴到高科技&#xff1a;儿时玩具的变迁 在我童年的记忆里&#xff0c;最快乐的时光往往与简单的玩具和泥巴有关。在那个没有智能手机和电子游戏的年代&#xff0c;泥巴是我们的乐园&#xff0c;而玩具则是我们的伴侣。 小时候&#xff0c;泥巴是我们的创造力的源泉。…

Go跨平台编译

1.编译windows平台运行程序 # windows env GOOSwindows GOARCHamd64 go build main.go2.编译linux平台运行程序 # linux env GOOSlinux GOARCHamd64 go build main.go 3.编译macos平台运行程序 # macos env GOOSdarwin GOARCHamd64 go build main.go 编译结果:

Python3 match-case 语句

前言 本文主要介绍match-case语句与switch-case的区别&#xff0c;及match-case语句的基本用法。 文章目录 前言一、switch-case 和match-case的区别二、match-case的基本用法1、可匹配的数据类型2、多条件匹配3、通配符匹配 一、switch-case 和match-case的区别 C语言里面s…

Git操作笔记

学git已经好多次了。但是还是会忘记很多的东西&#xff0c;一些常用的操作命令和遇到的bug以后在这边记录汇总下 一.github图片展示 图片挂载&#xff0c;我是创建了一个库专门存图片&#xff0c;然后在github的md中用专用命令展示图片&#xff0c;这样你的md就不会全是文字那…

【C语言】文件操作(中卷)

前言 在文件操作&#xff08;上卷&#xff09;中&#xff0c;讲到的主要都是正式文件操作开始之前的前置知识&#xff0c;而这一卷中&#xff0c;我们将开始正式地操作文件。 在上卷中我们已经说到&#xff0c;stdin stdout stderr是三个C语言程序启动时默认打开的流。这三个流…

HarmonyOS应用开发学习历程(1)初识DevEco Studio

1.create project Bundle name&#xff1a;包名&#xff0c;标识应用程序&#xff0c;默认应用ID也使用该名 Compile SDK&#xff1a;编译时API版本 2.工程目录 AppScope&#xff1a;应用全局所需资源 entry&#xff1a;应用的主模块&#xff0c;含代码、资源 hvigor&#…

TimeDao-一篇文章了解清楚Subspace项目

1 项目简介 什么是Subspace网络&#xff1f; Subspace是为下一波加密创建者构建的第四代区块链。旨在实现web3规模扩容。 Subspace允许开发者以互联网规模运行 Web3 应用。它提供了一个简单的接口&#xff0c;用于快速部署按需求自动扩展的多链去中心化应用。Subspace由一个…

神经网络与深度学习——第7章 网络优化与正则化

本文讨论的内容参考自《神经网络与深度学习》https://nndl.github.io/ 第7章 网络优化与正则化 网络优化与正则化 网络优化 网络结构多样性 高维变量的非凸优化 神经网络优化的改善方法 优化算法 小批量梯度下降 批量大小选择 学习率调整 学习率衰减 学习率预热 周期性学习率调…

HCIP-Datacom-ARST自选题库__EBGP【18道题】

一、单选题 1.在排除EBGP邻居关系故障时&#xff0c;你发现两台直连设备使用Loopback口建立连接&#xff0c;故执行display current-configurationconfiguration bgp查看peer ebgp-max-hop hop-count的配置&#xff0c;下列哪项说法是正确的? hop-count必须大于2 hop-count…

8条黄金准则,解决API安全问题

API&#xff08;应用程序编程接口&#xff09;是现代软件开发中不可或缺的一部分。它们允许不同的应用程序之间共享数据和功能&#xff0c;从而促进了软件系统的整合和互操作性。然而&#xff0c;随着API使用的普及&#xff0c;安全性问题也开始浮出水面。 API安全是指保护API免…

Windows 剪映专业版 v5.9.0 解锁VIP、解除限制功能!

介绍 该脚本具备多项高级功能&#xff0c;包括人像抠图、会员专属模板、超清画质以及素材预设。会员可使用的功能均通过此脚本解锁。 解锁剪映软件会员功能&#xff0c;包括人像抠图、会员模板、超清画质以及素材预设等。 在标准操作流程中&#xff0c;用户首先在电脑端启动…

系统架构设计师【第12章】: 信息系统架构设计理论与实践 (核心总结)

文章目录 12.1 信息系统架构基本概念及发展12.1.1 信息系统架构的概述12.1.2 信息系统架构的发展12.1.3 信息系统架构的定义 12.2 信息系统架构12.2.1 架构风格12.2.2 信息系统架构分类12.2.3 信息系统架构的一般原理12.2.4 信息系统常用4种架构模型12.2.5 企业信息系…

大模型应用:Prompt-Engineering优化原则

1.Prompt-Engineering 随着大模型的出现及应用&#xff0c;出现了一门新兴“技术”&#xff0c;该技术被称为Prompt-Enginerring。Prompt Engineering即提示工程&#xff0c;是指在使用大语言模型时&#xff0c;编写高效、准确的Prompt(提示词)的过程。通过不同的表述、细节和…

【JavaEE 进阶(二)】Spring MVC(下)

❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多进阶知识 目录 1.前言2.响应2.1返回静态界面2.2返回数据2.3返回HTML代码 3.综合练习3.1计算器3.2用户登…