在前端开发中，WebSocket 是一种常用的 HTTP 协议扩展，它可以以全双工方式在客户端和服务器之间建立持久连接，实现实时通讯和数据交换。但是，由于网络不可靠和异常情况的发生，WebSocket 连接经常会出现断开和异常问题。为了避免这种情况的发生，我们需要实现 WebSocket 的心跳机制。本文将介绍如何使用 Express.js 实现 WebSocket 的心跳机制，帮助开发者更好地使用 WebSocket。
什么是 WebSocket 的心跳机制
WebSocket 的心跳机制是指在 WebSocket 连接建立后通过定时发送特定的数据包来保持连接状态的机制。这种特定的数据包我们称之为“心跳包”，通常是一个长度为 0 的数据包。通过发送心跳包来维持 WebSocket 连接的状态，如果超过一定时间没有接收到心跳包，则认为连接断开，需要重新建立连接。
Express.js 实现 WebSocket 的心跳机制
安装依赖
首先，我们需要安装 Express 和 ws 依赖。
npm install express ws --save
其中，ws 是 WebSocket 的第三方库，在后续的代码中会用到。
实现代码
以下是使用 Express 实现 WebSocket 的心跳机制的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------------
----- --------- - --------------
-- ----
----- ----------------- - ------
-- -----
----- ------- - --- ------
-- --------- ---
----- --- - --- ------------------ ------ ---
-- --------- ----
-------------------- -------- -------------- -
---------------------- --------
----------------
-- --------- --
-------------- -------- ------- -
---------------------- --------
-------------------
---
-- --------- ----
---------------- -------- -------------- -
---------------------- ---------- ------
---
-- -------
----- --------- - -- -- -
-- -------------- --- --------------- -
------------
-
--
----- ------------------- - ---------------------- -------------------
---
-- -----
------------------- -------- -- -
--------------------------------------------
---在代码中，我们首先声明了一个心跳间隔的常量，并创建了一个客户端列表存储所有连接的客户端。然后创建了一个 WebSocket 服务器，并监听连接事件。在连接事件中，我们添加了新的客户端到客户端列表中，在服务器接收到心跳包后会发送一个空的消息给客户端，客户端接收到空的消息后会忽略。同时，在客户端关闭事件中，我们将客户端从客户端列表中删除。
测试
为了测试我们的 WebSocket 能否正常发送心跳包，我们需要编写一个简单的页面，连接到我们的 WebSocket 服务器。以下是使用 WebSocket API 实现的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- --------------
--------
----- -- - --- ---------------------------------
-- --------- ----
------------ - -------- ------- -
---------------------- ------- - ------------
-
-- -------
----- ------------- - -- -- -
-- -------------- --- --------------- -
------------
-
-
-------------------------- -------
---------
-------
------
-------
-------打开以上 HTML 文件，在浏览器的开发者工具中可以看到 WebSocket 客户端每 10 秒钟发送一个心跳包到服务器。我们可以通过改变服务器端发送心跳包的时间间隔（heartbeatInterval）来测试 WebSocket 的心跳机制。
总结
本文介绍了如何使用 Express.js 实现 WebSocket 的心跳机制，帮助开发者更好地使用 WebSocket。通过以上示例代码，可以很好地理解 WebSocket 的心跳机制的原理和实现方式。在实际开发中，WebSocket 的心跳机制非常重要，能够有效避免由于网络不稳定和异常等原因导致的连接丢失问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4c46148841e98941253de