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连接成功时开启心跳
- 当服务器发送消息时，重置心跳，开启心跳
- 监听连接关闭时，停止心跳
- 重连服务器未涉及，待学习