关键词：
目录
1 WebSocket简介
WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
前后端通信请看以下内容：
使用WebSocket实现服务端和客户端的通信:https://blog.csdn.net/ZGL_cyy/article/details/117845647
WebSocket网页聊天室:https://blog.csdn.net/ZGL_cyy/article/details/118438572
WebSocket区分不同客户端方法:https://blog.csdn.net/ZGL_cyy/article/details/122838063
2 WebSocket事件与方法
2.1 创建WebSocket实例
var socketObj;
if ("WebSocket" in window)
socketObj = new WebSocket(webSocketLink);
else if ("MozWebSocket" in window)
socketObj = new MozWebSocket(webSocketLink);
2.2 WebSocket 事件
2.3 WebSocket 方法
方法.png
3 WebSocket的心跳重连机制
3.1 问题
（1）websocket在连接后，如果长时间服务端和客户端不发消息，服务端会把websocket给断开。
（2）存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。
3.2 心跳重连机制
为了解决上面的问题，就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。
⼼跳机制是客户端每隔⼀段时间会向服务端发送⼀个数据包，告诉服务端自己还活着，同时客户端会根据服务端是否会回传⼀个数据包来确定服务端是否还活着。
如果客户端没有收到回复，表示websocket断开连接或者网络出现问题，就需要重连。
4 实际使用
详细代码如下：
<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("未收到心跳检测回复");
// 关闭WebSocket
this.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;
// 关闭WebSocket
this.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>
uniapp即时聊天websocket封装（建立连接断线重连心跳机制主动关闭）(代码片段)
使用SocketTask的方式去管理webSocket链接，每一条链路的生命周期都更加可控可实现主动建立连接、心跳防断线机制、断线主动重连、提供主动断开的方法一、如何使用(uniappVue3)<template>//...</template><scriptsetup>importWSf... 查看详情
netty中的心跳机制，还有谁不会？(代码片段)
...www.cnblogs.com/rickiyang/p/11074231.html我们知道在TCP长连接或者WebSocket长连接中一般我们都会使用心跳机制–即发送特殊的数据包来通告对方自己的业务还没有办完，不要关闭链接。那么心跳机制可以用来做什么呢？我们知道网络的传... 查看详情
前端网络监控与断网重链(代码片段)
...下展示问题，因此作为专栏进行这两个问题得讲解问题一WebSocket在网络终端和重新联网后自动链接知识点:理解WebSocket心跳及重连机制在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没... 查看详情
websocket心跳检测和重连机制
参考技术A简单地说是为了证明客户端和服务器还活着。websocket在使用过程中，如果遭遇网络问题等，这个时候服务端没有触发onclose事件，这样会产生多余的连接，并且服务端会继续发送消息给客户端，造成数据丢失。因此需要... 查看详情
websocket封装使用心跳检测断线重连(代码片段)
代码如下：/***心跳基类*/classHeartHEART_TIMEOUT=null//心跳计时器SERVER_HEART_TIMEOUT=null//心跳计时器constructor()this.timeout=5000//重置reset()clearTimeout(this.HEART_TIMEOUT)clearTimeout(this.SERVER_H 查看详情
使用websocket实现消息推送（心跳）(代码片段)
...跳的事情，这里再做一个补充。先说我的结论：WebSocket协议已经设计了心跳，这个功能可以到达检测链接是否可用心跳是用来检测链接是否可用的，不一定支持携带数据，可要看具体实现如果非要心跳中带上... 查看详情
uniappwebsocket原生服务（自动重连心跳检测）ba-websocket(代码片段)
简介（下载地址）Ba-Websocket是一款原生websocket服务插件，可在后台运行。支持自动重连、心跳检测；支持常驻通知保活。支持开启服务、停止服务支持发送消息、接收消息支持自动重连、心跳检测支持常驻通知保... 查看详情
netty网络编程实战4，使用netty实现心跳检测机制(代码片段)
目录一、使用Netty实现心跳检测机制二、服务端1、主程序类2、自定义初始化器3、自定义处理器4、通过```curlhttp://localhost:8080```访问Netty服务端Java高并发编程实战系列文章哪吒精品系列文章一、使用Netty实现心跳... 查看详情
uni-app中websocket的使用断开重连、心跳机制
参考技术A最近关于H5和APP的开发中使用到了webSocket，由于web/app有时候会出现网络不稳定或者服务端主动断开，这时候导致消息推送不了的情况，需要客户端进行重连。查阅资料后发现了一个心跳机制，也就是客户端间隔一段时... 查看详情
使用newscheduledthreadpool来模拟心跳机制(代码片段)
（使用newScheduledThreadPool来模拟心跳机制）1publicclassHeartBeat2publicstaticvoidmain(String[]args)3ScheduledExecutorServiceexecutor=Executors.newScheduledThreadPool(5);4Runnabletask=newRunnable()5publicvoidrun()6System.out.println("HeartBeat.........................");78;9executor.sched... 查看详情
关于心跳机制设计，我的一点想法(代码片段)
...c;应用层不会知道的。2、为什么一定要服务端向客户端发心跳包？两年前老师让我们这么写的时候我就提出了疑问，最后我毅然决然的选择了客户端向服务端发心跳。心跳机制对于服务器的意义是什么呢？在我的认知... 查看详情
95-850-020-源码-心跳-jobmaster与taskexecutor之间的心跳检测(代码片段)
文章目录1.概述2.JobMaster与TaskExecutor之间的心跳检测2.1初始化过程2.1.1JobMaster启动2.1.2TaskExecutor2.3.注册过程2.4心跳过程1.概述心跳机制用于检测客户端或者服务端是否存活的一种机制，通过定期向对方发送请求方法，常见的心跳检... 查看详情
netty之心跳机制(代码片段)
目录一、前言二、netty的心跳工具三、IdleStatehandler1、构造方法2、handlerAdded3、定时任务4、读事件空闲5、写事件空闲一、前言心跳机制就是定时的给对端发送特殊的数据包，对端收到后回复特殊的数据包，这一次往返的pin... 查看详情
netty之心跳机制(代码片段)
目录一、前言二、netty的心跳工具三、IdleStatehandler1、构造方法2、handlerAdded3、定时任务4、读事件空闲5、写事件空闲一、前言心跳机制就是定时的给对端发送特殊的数据包，对端收到后回复特殊的数据包，这一次往返的pin... 查看详情
springcloudalibabanacosnacos心跳机制实现快速上下线(代码片段)
...前言Metadata元数据ClassMetadataSpring中常见的一些元注解Nacos心跳时间自定义配置Ribboon的ServerListRefreshInterval总结前言我们都知道SpringCloudAlibabaNacos是通过客户端和服务端的心跳机制，来实现服务的注册和下线的，Nacos的心跳机... 查看详情
cephmon选举-lease机制(代码片段)
众所周知，OSD是通过心跳检测机制，确保OSD是在线的，即OSDPeer之间，其实形成了彼此监控的网络，每6秒（osd_heartbeat_interval向Peer）发送心跳信息，如果超过20秒（osd_heartbeat_grace）时间没收到PeerOSD的心跳信息，则send_failure，状告... 查看详情
hdfs的四大机制和两大核心(代码片段)
四大机制：（1）心跳机制： 介绍：hdfs是主从架构，所有为了实时的得知dataNode是否存活，必须建立心跳机制，在整个hdfs运行过程中，dataNode会定时的向nameNode发送心跳报告已告知nameNode自己的状态。 心跳内容：&... 查看详情
网络i/o编程模型17netty框架实现心跳机制(代码片段)
一心跳机制说明IdleStateHandler是netty提供的处理空闲状态的处理器longreaderIdleTime：表示多长时间没有读，就会发送一个心跳,检测包检测是否连接。longwriteIdleTime：表示多长时间没有写，就会发送一个心跳,检测包检测... 查看详情