在现代 Web 应用中，WebSocket 技术被广泛应用于实现客户端与服务器之间的实时双向通信。然而，随着应用的复杂性增加，保持 WebSocket 连接的稳定性成为一个重要的技术挑战。特别是在用户切换浏览器标签页或最小化浏览器窗口时，WebSocket 连接可能会受到影响。为了解决这些问题，心跳检测机制应运而生，而 Web Worker 则为这一机制的实现提供了强有力的支持。本文将深入探讨 Web Worker 在 WebSocket 心跳检测中的应用，并详细解释其实现方式。

一、WebSocket 连接中的挑战

WebSocket 的持久连接特性在实时应用中至关重要，但在维护这些连接时，开发者面临着一些挑战：

连接的稳定性：当 WebSocket 连接在长时间内没有数据传输时，服务器可能会认为连接已经失效，从而关闭连接。浏览器后台状态：当用户将浏览器标签页切换到后台或最小化时，浏览器可能会降低该页面的执行优先级，甚至暂停某些 JavaScript 任务。结果是，心跳检测可能无法按时执行，导致 WebSocket 连接中断。

为了应对这些问题，心跳检测机制被引入。通过定期发送 ping 消息，客户端可以告知服务器连接仍然活跃。然而，主线程执行的心跳检测在页面后台状态下并不可靠，因此需要使用 Web Worker 来保证心跳检测的正常运行。

二、Web Worker 的介绍与应用

Web Worker 是一种运行在浏览器后台的独立线程，专门用于执行可能阻塞主线程的任务。由于 Worker 运行在独立线程中，即使页面处于后台，它也能继续执行，不受主线程状态的影响。使用 Web Worker 执行心跳检测，可以确保 WebSocket 连接的持续性和稳定性。

三、创建 Web Worker 并配置参数

在 WebSocket 心跳检测中，CreateWebSocket 类通过以下代码创建并启动了一个 Web Worker：

this.worker = new Worker('./beat.js', { name: 'Beat Worker' });

1. new Worker('./beat.js')

Worker 构造函数用于创建一个新的 Web Worker 实例，并接受一个 JavaScript 文件路径作为参数。这是 Worker 执行的代码逻辑所在的文件。

2. { name: 'Beat Worker' }

这是传递给 Worker 构造函数的可选配置对象，用于设置 Worker 的属性。

四、heartCheck 方法的实现

CreateWebSocket 类中的 heartCheck 方法负责管理心跳检测的整个过程，包括在需要时创建和使用 Web Worker，并处理页面前后台切换时的不同需求。以下是 heartCheck 方法的实现：

heartCheck() {
    clearTimeout(this.heartCheckTimer);
    if (document.hidden && window.Worker) {
        if (!this.worker) {
            this.worker = new Worker('./beat.js', { name: 'Beat Worker' });
            this.worker.onmessage = () => {
                this.heartCheck();
            };
        }
        this.heartBeat();
    } else {
        if (this.worker) {
            this.worker.terminate();
            this.worker = null;
            this.heartBeat();
        }
        this.heartCheckTimer = setTimeout(() => {
            if (!document.hidden) this.heartBeat();
            this.heartCheck();
        }, this.heartCheckInterval);
    }
}

1. 清理定时器2. 判断页面是否处于后台3. Worker 的启动与消息处理4. 前台状态处理5. 定时器设置五、heartBeat 方法的实现

heartBeat 方法用于在主线程中发送心跳信号，保持 WebSocket 连接的活跃性。以下是一个示例代码，展示了该方法的实现：

heartBeat() {
    this.sendPing('ping', { value: 2 });
    this.pingTime = Date.now();
​
    // 心跳检测回调，检测连接是否正常
    if (this.heartCheckCB) {
        const isConnectionHealthy = 
            this.pongTime !== null && (this.pingTime - this.pongTime < this.heartCheckInterval * 2);        
        this.heartCheckCB(isConnectionHealthy, this);
    }
}

pongTime 变量的更新六、总结

通过在 WebSocket 心跳检测中引入 Web Worker，我们可以有效解决由于页面切换到后台而导致的连接中断问题。CreateWebSocket 类中的 heartCheck 方法通过灵活使用 Worker 和主线程的资源，实现了高效且稳定的心跳检测机制。heartBeat 方法的实现则展示了如何通过定期发送 ping 消息，保持 WebSocket 连接的活跃性，并通过时间戳比较来监控连接的健康状态，这种机制确保了在不同状态下，WebSocket 连接始终保持稳定。