当前位置： 首页 > article >正文

node.js-WebScoket心跳机制（服务器定时发送数据，检测连接状态，重连）

article 2026/3/13 12:00:05

1.WebScoket心跳机制是？

        基于上一篇文章，WebScoket在浏览器和服务器间完成一次握手，两者间创建持久性连接，并进行双向数据连接。node.js-node.js作为服务器，前端使用WebSocket（单个TCP连接上进行全双工通讯的协议）-CSDN博客文章浏览阅读645次，点赞17次，收藏11次。node.js作为服务器，前端使用WebSocket（单个TCP连接上进行全双工通讯的协议） https://blog.csdn.net/2301_76671906/article/details/146199752?fromshare=blogdetail&sharetype=blogdetail&sharerId=146199752&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link        心跳机制简单的来说，就是(1)客户端向服务器利用定时（setInterval）发送消息（心跳包）。(2)前端监听WebScoket的关闭连接（onclose()事件）时重新创建连接。

  •         客户端定时向服务器发送心跳数据包，保持持久性连接。
  •         服务器定时向客户端发送心跳数据包，检测客户端连接是否正常。

2.WebScoket心跳机制的必要性？

        必要的，心跳机制通过检测服务器与客户端连接状态，处理连接失败后重连或其他的异常情况。

3.WebScoket心跳机制的缺点？

  •         不断地定时发送心跳数据包，会消耗服务器的资源。
  •         检测到连接失败后，重新连接会导致部分的数据丢失。

4.例子

<!DOCTYPE html>
<html>
<head><title>WebSocket测试</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><input v-model="inputMessage" @input="sendMessage" placeholder="输入消息"><p>收到的消息: {{ receivedMessage }}</p></div><script>// 创建WebSocket实例，连接到本地的8080端口const ws = new WebSocket('ws://localhost:8080');const app = new Vue({el: '#app',data: {inputMessage: '',receivedMessage: ''},methods: {sendMessage() {// 如果WebSocket连接已打开if (ws.readyState === WebSocket.OPEN) {// 发送输入框中的内容ws.send(this.inputMessage);}}}});// 当WebSocket连接成功时触发ws.onopen = function() {console.log('已连接到服务器');// 1.连接成功后开始心跳startHeartbeat();};// 2.当收到服务器发送的消息时触发ws.onmessage = function(event) {console.log('收到消息: ' + event.data);// 更新Vue实例中的receivedMessage变量app.receivedMessage = event.data;//重置心跳计时器resetHeartbeat();};// 3.当WebSocket连接关闭时触发ws.onclose = function() {console.log('连接已关闭');// 停止心跳计时器stopHeartbeat();// 添加重新连接逻辑};// 4.心跳相关发送心跳消息和重置心跳计时器let heartbeatIntervalId;const heartbeatInterval = 30000; // 心跳间隔，单位为毫秒function startHeartbeat() {heartbeatIntervalId = setInterval(() => {if (ws.readyState === WebSocket.OPEN) {ws.send('heartbeat'); // 发送心跳消息console.log('发送心跳消息');} else {stopHeartbeat(); // 如果连接关闭，停止心跳}}, heartbeatInterval);}// 心跳重置定时器function resetHeartbeat() {clearInterval(heartbeatIntervalId); // 清除心跳计时器startHeartbeat(); // 重新开始心跳计时器}// 停止心跳计时器 function stopHeartbeat() {clearInterval(heartbeatIntervalId); }</script>
</body>
</html>

node.js作为服务器进行对应的接受相关的代码在上一篇文章。

主要实现思路：

  •         WebScoket连接成功时开启心跳
  •         当服务器发送消息时，重置心跳，开启心跳
  •         监听连接关闭时，停止心跳
  •         重连服务器未涉及，待学习

相关文章：

node.js-WebScoket心跳机制（服务器定时发送数据，检测连接状态，重连）

1.WebScoket心跳机制是&#xff1f; 基于上一篇文章&#xff0c;WebScoket在浏览器和服务器间完成一次握手&#xff0c;两者间创建持久性连接&#xff0c;并进行双向数据连接。node.js-node.js作为服务器&#xff0c;前端使用WebSocket&#xff08;单个TCP连接上进行全双工通讯…...

编程日记 2026/3/4 8:56:26

【蓝桥杯—单片机】第十五届省赛真题代码题解析 | 思路整理

第十五届省赛真题代码题解析 前言赛题代码思路笔记竞赛板配置建立模板明确基本要求显示功能部分频率界面正常显示高位熄灭 参数界面基础写法&#xff1a;两个界面分开来写优化写法&#xff1a;两个界面合一起写 时间界面回显界面校准校准过程校准错误显示 DAC输出部分按键功能部…...

编程日记 2026/3/5 15:42:40

神经网络的数据集处理

离不开这个库torch.utils.data&#xff0c;这个库有两个类一个Dataset和Dataloader Dataset&#xff08;对单个样本处理&#xff09; Dataset 是一个非常重要的概念&#xff0c;它主要用于管理和组织数据&#xff0c;方便后续的数据加载和处理。以下以 PyTorch 为例&#xff…...

编程日记 2026/2/17 0:39:08

深入解析 JVM —— 从基础概念到实战调优的全链路学习指南

文章目录 一、为什么要学习 JVM&#xff1f;1. 面试必备与技能提升2. 性能优化与问题诊断3. 编写高质量代码 二、JVM 基础概念与体系结构1. JVM 简介2. JDK、JRE 与 JVM 三、JVM 内存模型1. 线程私有区2. 线程共享区 四、类加载机制与双亲委派1. 类加载过程2. 双亲委派模型3. 动…...

编程日记 2026/2/15 2:54:54

VLAN和Trunk实验

VLAN和Trunk实验 实验拓扑 实验需求 1.按照图示给所有路由器&#xff08;此处充当pc机&#xff09;配置IP地址 2.SW1和SW2上分别创建vlan10和vlan20&#xff0c;要求R1和R3属于vlan10&#xff0c;R2和R4属于vlan20 3.SW1和SW2相连的接口配置类型为trunk类型&#xff0c;允许…...

编程日记 2026/3/11 17:05:10

MongoDB 数据导出与导入实战指南（附完整命令）

1. 场景说明 在 MongoDB 运维中&#xff0c;数据备份与恢复是核心操作。本文使用 mongodump 和 mongorestore 工具&#xff0c;演示如何通过命令行导出和导入数据&#xff0c;解决副本集连接、路径指定等关键问题。 2. 数据导出&#xff08;mongodump&#xff09; 2.1 导出命…...

编程日记 2026/2/15 2:42:32

鸿蒙开发-一多开发之媒体查询功能

在HarmonyOS中&#xff0c;使用ArkTS语法实现响应式布局的媒体查询是一个强大的功能&#xff0c;它允许开发者根据不同的设备特征&#xff08;如屏幕尺寸、屏幕方向等&#xff09;动态地调整UI布局和样式。以下是一个使用媒体查询实现响应式布局的实例&#xff1a; 1. 导入必要…...

编程日记 2026/3/10 23:07:01

Spring Boot集成Spring Statemachine

Spring Statemachine 是 Spring 框架下的一个模块&#xff0c;用于简化状态机的创建和管理&#xff0c;它允许开发者使用 Spring 的特性&#xff08;如依赖注入、AOP 等&#xff09;来构建复杂的状态机应用。以下是关于 Spring Statemachine 的详细介绍&#xff1a; 主要特性 …...

编程日记 2025/6/26 7:32:13

【Go学习】04-1-Gin框架-路由请求响应参数

【Go学习】04-1-Gin框架 初识框架go流行的web框架GinirisBeegofiber Gin介绍Gin快速入门 路由RESTful API规范请求方法URI静态url路径参数模糊匹配 处理函数分组路由 请求参数GET请求参数普通参数数组参数map参数 POST请求参数表单参数JSON参数 路径参数文件参数 响应字符串方式…...

编程日记 2026/2/26 6:14:36

数据类设计_图片类设计之5_不规则类图形混合算法(前端架构)

前言 学的东西多了,要想办法用出来.C和C是偏向底层的语言,直接与数据打交道.尝试做一些和数据方面相关的内容 引入 接续上一篇,讨论图片类型设计出来后在场景中如何表达,以及不规则图片的混合算法. 图片示意图 图片是怎样表示的,这里把前面的补上 这里的数字1是不规则数据类对…...

编程日记 2026/3/12 23:40:06

零信任架构实战手册-企业安全升级

🔐 开篇痛点暴击： “又被黑客钓鱼了？VPN漏洞补到心累？😫” 传统边界安全像纸糊的墙，内鬼渗透、APT攻击防不胜防！ 别慌！零信任架构（Zero Trust）用「永不信任，持续验证」原则，让安全等级飙升10倍！ 🚦 零信任3大核心武器（附实操步骤）： 1. 🌟 身份即边界！抛…...

编程日记 2026/3/4 10:44:39

【Qt】qApp简单介绍

1. 介绍 在Qt中&#xff0c;qApp是一个全局指针&#xff0c;它指向当前的QApplication或QGuiApplication对象。这个全局指针在Qt应用程序中非常有用&#xff0c;因为它可以让你在任何地方访问到应用程序对象。 在C中&#xff0c;全局指针是一个可以在程序的任何地方访问的指针…...

编程日记 2026/2/14 14:24:59

C++11 编译使用 aws-cpp-sdk

一、对sdk的编译前准备 1、软件需求 此文档针对于在Linux系统上使用源码进行编译开发操作系统使用原生的contos7Linux。机器配置建议 内存8G以上，CPU 4个 以上GCC 4.9.0 及以上版本Cmake 3.12以上 3.21以下apt install libcurl-devel openssl-devel libuuid-devel pulseaudio-…...

编程日记 2026/2/16 9:19:37

【模拟CMOS集成电路设计】带隙基准（Bandgap）设计与仿真（基于运放的电流模BGR）

【模拟CMOS集成电路设计】带隙基准&#xff08;Bandgap&#xff09;设计与仿真 前言工程文件&部分参数计算过程&#xff0c;私聊~ 一、 设计指标指标分析&#xff1a; 二、 电路分析三、 仿真3.1仿真电路图3.2仿真结果(1)运放增益(2)基准温度系数仿真(3)瞬态启动仿真(4)静态…...

编程日记 2026/3/12 9:13:56

版本控制器Git(4)

文章目录 前言一、分布式版本控制系统的概念二、克隆远程仓库三、多用户协作与公钥管理四、配置Git忽略特殊文件五、给命令配置别名总结 前言 加油加油&#xff0c;路在脚下&#xff01;&#xff01;&#xff01; 一、分布式版本控制系统的概念 本地操作&#xff1a;所有操作&a…...

编程日记 2026/3/6 8:01:00

Rabbitmq--延迟消息

13.延迟消息 延迟消息&#xff1a;生产者发送消息时指定一个时间&#xff0c;消费者不会立刻收到消息&#xff0c;而是在指定时间之后才会收到消息 延迟任务&#xff1a;一定时间之后才会执行的任务 1.死信交换机 当一个队列中的某条消息满足下列情况之一时&#xff0c;就会…...

编程日记 2026/2/28 18:07:45

springboot436-基于SpringBoot的汽车票网上预订系统(源码+数据库+纯前后端分离+部署讲解等)

&#x1f495;&#x1f495;作者&#xff1a; 爱笑学姐 &#x1f495;&#x1f495;个人简介&#xff1a;十年Java&#xff0c;Python美女程序员一枚&#xff0c;精通计算机专业前后端各类框架。 &#x1f495;&#x1f495;各类成品Java毕设 。javaweb&#xff0c;ssm&#xf…...

编程日记 2026/3/1 20:14:45

宇树ROS1开源模型在ROS2中Gazebo中仿真

以GO1为例 1. CMakelists.txt更新语法 cmake_minimum_required(VERSION 3.8) project(go1_description) if(CMAKE_COMPILER_IS_GNUCXX OR CMAKE_CXX_COMPILER_ID MATCHES "Clang")add_compile_options(-Wall -Wextra -Wpedantic) endif() # find dependencies find…...

编程日记 2026/2/21 12:00:24

Web网页制作之爱家居的设计（静态网页）

一、使用的是PyCharm来敲写的代码&#xff08;布局&#xff09; 二、主要的html代码的介绍 这段代码展示了如何使用HTML和CSS创建一个结构化的网页&#xff0c;包含导航栏、新闻内容、图片展示和页脚信息。通过引入外部CSS文件&#xff0c;可以进一步美化和布局这些元素。 HTM…...

编程日记 2026/2/19 15:01:01

Linux云计算SRE-第二十周

完成ELK综合案例里面的实验&#xff0c;搭建完整的环境 一、 1、安装nginx和filebeat&#xff0c;配置node0(10.0.0.100)&#xff0c;node1(10.0.0.110)&#xff0c;node2(10.0.0.120)&#xff0c;采用filebeat收集nignx日志。 #node0、node1、node2采用以下相同方式收集ngin…...

编程日记 2026/3/3 18:57:56

【MATLAB例程】AOA（到达角度）法，多个目标定位算法，三维空间、锚点数量自适应（附完整代码）

给出AOA方法下的多目标定位，适用三维空间，锚点数量>3即可，可自定义目标和锚点的数量、坐标等。 文章目录 运行结果源代码代码讲解概述功能代码结构运行结果 10个锚点、4个目标的情况： 100个锚点、10个目标的情况： 修改方便，只需调节下面的两个数字即可： 源代码 …...

编程日记 2026/2/24 23:05:26

Maven 构建 项目测试

Maven 构建 & 项目测试 引言 在当今的软件开发领域，Maven 作为一种流行的项目管理工具，已经得到了广泛的应用。它能够帮助开发者更好地组织和管理项目依赖，简化构建过程。同时，项目测试是确保软件质量的重要环节。本文将详细介绍 Maven 的构建流程以及项目测试的策略…...

编程日记 2026/2/21 4:58:18

Matlab:矩阵运算篇——矩阵数学运算

目录 1.矩阵的加法运算 实例——验证加法法则 实例——矩阵求和 实例——矩阵求差 2.矩阵的乘法运算 1.数乘运算 2.乘运算 3.点乘运算 实例——矩阵乘法运算 3.矩阵的除法运算 1.左除运算 实例——验证矩阵的除法 2.右除运算 实例——矩阵的除法 ヾ(&#xffe3;…...

编程日记 2026/3/9 16:56:31

MinIO问题总结（持续更新）

目录 Q: 之前使用正常&#xff0c;突然使用空间为0B&#xff0c;上传文件也是0B&#xff08;部署在k8s中&#xff09;Q: 无法上传大文件参考yaml Q: 之前使用正常&#xff0c;突然使用空间为0B&#xff0c;上传文件也是0B&#xff08;部署在k8s中&#xff09; A: 1、检查pod状态…...

编程日记 2026/2/27 10:34:02

IDE 使用技巧与插件推荐：全面提升开发效率

在软件开发领域&#xff0c;集成开发环境&#xff08;IDE&#xff09;已成为开发者不可或缺的工具。它集代码编辑、编译、调试、版本控制等多种功能于一身&#xff0c;极大地提升了开发效率。然而&#xff0c;许多开发者可能并未充分挖掘 IDE 的潜力。通过掌握一些实用的使用技…...

编程日记 2026/3/8 20:19:22

智算新纪元，腾讯云HAI-CPU助力法律援助

高性能应用服务 1. ChatbotUI ​应用介绍 基于腾讯云 ​DeepSeek 模型的智能化对话界面&#xff0c;支持灵活集成到企业级应用或服务中&#xff0c;提供自然语言交互能力&#xff0c;适用于客服、知识检索、任务自动化等场景。 ​核心功能 ​多轮对话引擎&#xff1a;支持上下…...

编程日记 2026/3/4 21:07:50

android 调用wps打开文档并感知保存事件

需求场景 在项目开发中会碰到需要调用WPS打开Word,Excel,Ppt等Office系列文档的情况&#xff0c;网上目前少有正式介绍如何调用相关API打开文档&#xff0c;并实现文档编辑后回传给三方应用&#xff0c;本人在逛WPS社区时发现 解锁WPS二次开发新世界&#xff1a;Android开发用…...

编程日记 2026/3/10 16:22:53

无人机全景应用解析与技术演进趋势

无人机全景应用解析与技术演进趋势 ——从立体安防到万物互联的空中革命 一、现有应用场景全景解析 &#xff08;一&#xff09;公共安全领域 1. 立体安防体系 空中哨兵&#xff1a;搭载 77 GHz 77\text{GHz} 77GHz毫米波雷达&#xff08;探测距离 5 km 5\text{km} 5km&…...

编程日记 2025/12/25 10:43:16

【fnOS飞牛云NAS本地部署跨平台视频下载工具MediaGo与远程访问下载视频流程】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2026/2/28 11:23:20

PyQt基础——简单的窗口化界面搭建以及槽函数跳转

一、代码实现 import sysfrom PyQt6.QtGui import QPixmap from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QLineEdit, QMessageBox from PyQt6.uic import loadUi from PyQt6.QtCore import Qtclass LoginWindow(QWidget):def __init__(self):sup…...

编程日记 2026/3/9 3:24:22