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

news2025/3/14 17:44:33

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作为服务器进行对应的接受相关的代码在上一篇文章。

主要实现思路：