websocket 心跳机制

WebSocket 是一种在客户端和服务器之间创建持久连接的技术。为了保持连接的稳定性，就需要通过发送心跳消息来维持 WebSocket 连接。

1、创建一个webscoket基本的使用

// 创建 WebSocket 对象，传入服务器地址
const socket = new WebSocket('ws://url');// 监听 WebSocket 的打开事件
socket.addEventListener('open', (event) => {// 在此处理连接打开时的逻辑
});// 监听 WebSocket 接收到消息的事件
socket.addEventListener('message', (event) => {// 在此处理从服务器接收到的消息的逻辑
});// 监听 WebSocket 关闭事件
socket.addEventListener('close', (event) => {// 在此处理连接关闭时的逻辑
});// 监听 WebSocket 发生错误的事件
socket.addEventListener('error', (event) => {// 在此处理连接发生错误时的逻辑
});// 向服务器发送消息
socket.send('Hello, server!');

2、在客户端连接到 WebSocket 服务器之后，通过 setInterval 方法定时发送心跳消息

let ws = new WebSocket('ws://localhost:8080');
let heartCheck;ws.onopen = function() {heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);  // 发送心跳消息的时间间隔，单位毫秒
}

这边的代码会每隔5秒向服务器发送一个心跳信息

3、在客户端接收到服务器发送的消息时，清除心跳定时器。因为如果服务器一直有推送消息，那么就无需再发送心跳消息

let ws = new WebSocket('ws://url');
let heartCheck;ws.onopen = function() {heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);
}ws.onmessage = function() {clearInterval(heartCheck);heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);
}

在客户端接收到服务器发送的消息时，清除了原来的心跳定时器，并重新创建了一个心跳定时器，从而保证 WebSocket 的连接状态。

4、在客户端检测到 WebSocket 连接关闭时，清除心跳定时器。因为如果 WebSocket 连接关闭了，那么心跳定时器也就没有了意义

let ws = new WebSocket('ws://url');
let heartCheck;ws.onopen = function() {heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);
}ws.onmessage = function() {clearInterval(heartCheck);heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);
}ws.onclose = function() {clearInterval(heartCheck);
}

当检测到 WebSocket 连接关闭时，清除了心跳定时器

websocket 心跳机制相关推荐

WebSocket心跳机制
目录 1 WebSocket简介 2 WebSocket事件与方法 2.1 创建WebSocket实例 2.2 WebSocket 事件 2.3 WebSocket 方法 3 WebSocket的心跳 ...
vue 心跳监控_【笔记】vue中websocket心跳机制
data () { return { ws: null,//建立的连接 lockReconnect: false,//是否真正建立连接 timeout: 28*1000,//30秒一次心跳 timeo ...
【websocket前后端交互】vue-springboot实现websocket前后端交互链接，websocket心跳重连，包含前后端代码，复制即可用【详细解释版本】
前言: 还是老规矩,一步步的教大家如何建立前后端的 websocket 链接,并能完成互相传送数据的简单功能.由于网上找了半天发现很多帖子都是东一句西一句的,要不就是写的没什么注释和解释,导致我这个前 ...
【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
websocket心跳链接代码_WebSocket原理与实践(五)--心跳及重连机制
在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失.所以就需要 ...
springboot心跳检测_springboot websocket 实时刷新添加心跳机制（亲测可用版）
思路在我之前的一篇文章当中写到了websocket的实时刷新,但是有个问题没有解决,就是长时间没有数据的时候,这个连接就会自动断开,然后再次进行连接的话,需要再次进行连接.如果加入心跳机制的话,10 ...
java 心跳断网重连_工作笔记5 - websocket心跳重连机制
心跳重连缘由在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的?onclos ...
socket服务器断开消息,详解JS WebSocket断开原因和心跳机制
1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket ...
Websocket心跳检测、重连机制
前言为了获取实时数据,前端需要和后端保持通信,HTTP 协议只能是客户端向服务器发出请求,服务器返回查询结果.这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦.我们只能使 ...

websocket 心跳机制

websocket 心跳机制相关推荐

最新文章

热门文章