当前位置：首页 > JavaScript

js实现心跳

2026-04-06 06:38:55JavaScript

使用 WebSocket 实现心跳机制

WebSocket 本身支持心跳机制，通过定时发送 ping/pong 帧保持连接活跃。

js实现心跳

const socket = new WebSocket('ws://example.com');

// 发送心跳
const heartbeatInterval = setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send('ping');
    }
}, 30000);

// 接收心跳响应
socket.addEventListener('message', (event) => {
    if (event.data === 'pong') {
        console.log('Connection is alive');
    }
});

// 关闭时清除定时器
socket.addEventListener('close', () => {
    clearInterval(heartbeatInterval);
});

使用 AJAX 轮询模拟心跳

在没有 WebSocket 的情况下，可以通过定时 AJAX 请求模拟心跳。

js实现心跳

function sendHeartbeat() {
    fetch('/heartbeat', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Heartbeat failed');
        }
        return response.json();
    })
    .then(data => {
        console.log('Heartbeat response:', data);
    })
    .catch(error => {
        console.error('Heartbeat error:', error);
    });
}

// 每30秒发送一次心跳
const heartbeatInterval = setInterval(sendHeartbeat, 30000);

// 停止心跳
function stopHeartbeat() {
    clearInterval(heartbeatInterval);
}

使用 EventSource 实现心跳

Server-Sent Events (SSE) 也可以用于实现心跳机制。

const eventSource = new EventSource('/events');

eventSource.addEventListener('heartbeat', (event) => {
    console.log('Heartbeat received:', event.data);
});

eventSource.onerror = (error) => {
    console.error('EventSource failed:', error);
    eventSource.close();
};

心跳机制的最佳实践

合理设置心跳间隔：通常 30-60 秒，太短会增加服务器负担，太长可能导致连接超时。
处理断线重连：在心跳失败时实现自动重连机制。
减少数据量：心跳消息应尽量小，通常只需一个简单的字符串。
多协议支持：根据环境选择 WebSocket、AJAX 或 SSE。

断线重连实现示例

let reconnectAttempts = 0;
const maxReconnectAttempts = 5;

function connect() {
    const socket = new WebSocket('ws://example.com');

    socket.addEventListener('open', () => {
        reconnectAttempts = 0;
    });

    socket.addEventListener('close', () => {
        if (reconnectAttempts < maxReconnectAttempts) {
            const delay = Math.min(1000 * (reconnectAttempts + 1), 5000);
            setTimeout(connect, delay);
            reconnectAttempts++;
        }
    });
}

connect();