最近一段时间，Deno 原生支持的 WebSocket 功能越来越受开发者的欢迎，但是在使用中也遇到了一些问题，比如 WebSocket 连接经常断开。在本文中，我们将探讨如何解决 Deno 中 WebSocket 连接断开的问题。
问题分析
在 Deno 中使用 WebSocket，经常会出现 WebSocket 连接断开的情况。出现这种情况的原因有很多，比如网络问题，服务器端关闭连接，在一些场景下可能是其他原因引起的，但是我们在这里不去讨论这些情况。针对 WebSocket 连接断开的情况，我们该怎么办呢？
当 WebSocket 连接断开时，我们需要重新建立 WebSocket 连接。但是直接重新创建一个 WebSocket 对象是没有用的，因为服务器端已经关闭了之前的连接，如果我们这样做，它会变成新的连接，但超时时间仍然是之前连接的超时时间，如果超时，则仍然会自动断开连接，这并不符合我们的预期。
因此，我们需要一种方法，可以让我们在连接断开后能够及时发现，然后重新建立连接。
解决方案
要解决 WebSocket 连接断开的问题，我们需要在客户端（也就是浏览器或 Deno 应用程序中）实现一些新的功能。这些功能可以大概分为以下三个方面：
- 检测 WebSocket 连接是否断开
- 当连接断开时及时发现并重新建立连接
- 避免因 WebSocket 连接断开而无法收到服务器发送的消息
接下来，我们将分别讨论这些方面的解决方案。
检测 WebSocket 连接是否断开
要检测 WebSocket 连接是否断开，我们可以使用 WebSocket 对象的 readyState 属性。readyState 属性表示当前 WebSocket 连接的状态，它有以下四种取值：
CONNECTING：WebSocket 对象正在建立连接；OPEN：WebSocket 连接已经建立；CLOSING：WebSocket 连接正在关闭；CLOSED：WebSocket 连接已经关闭。
因此，我们可以通过监听 WebSocket 对象的 onclose 事件，然后检查其 readyState 属性来判断 WebSocket 连接是否断开，如果连接已经断开，则我们需要调用一个函数来重新建立连接。
const ws = new WebSocket('wss://localhost:3000');
ws.onclose = () => {
if (ws.readyState === WebSocket.CLOSED) {
// 连接已经断开，进行重新连接
}
};当连接断开时及时发现并重新建立连接
如果我们要使在连接断开时及时发现并重新建立连接，我们需要编写一个类来管理 WebSocket 连接。这个类应该有以下功能：
- 管理 WebSocket 连接的创建、关闭、重连等行为；
- 在连接断开时及时发现，并执行重连；
- 避免重复创建 WebSocket 连接。
下面是一个简单的 WebSocket 管理类的示例代码：
-- -------------------- ---- -------
----- ---------------- -
------- ---- -------
------- --- ----------
------- ------- --------
---------------- ------- -
-------- - ----
----------- - ------
------------
-
------ ---------- ----- ---- -
-- -------------- -
---------------------- -- --- -------------
-------
-
-------------------
-
------- ------- ---- -
------- - --- --------------------
-------------- - -- -- -
----------- - -----
---------------------- -------------
--
--------------- - -- -- -
----------- - ------
---------------------- ------------- -------- -- - -------------
------------- -- ----------------------- ------
--
----------------- - ------- ----------------------- -- -
---------------------- ----- ----------------
--
-
-在上面的代码中，我们创建了一个 WebSocketManager 类，它负责 WebSocket 连接的管理。在 constructor 中，我们首先尝试建立 WebSocket 连接。如果连接成功，我们将 isOpen 属性设置为 true，表示 WebSocket 已连接。如果连接失败，我们将 isOpen 属性设置为 false，并计划5秒后重试连接。
在 send 方法中，我们检查 isOpen 属性是否为 true。如果为 true，则发送数据。否则，我们记录错误，然后返回。
在 open 方法中，我们创建了 WebSocket 连接，并为其设置 onopen、onclose 和 onmessage 事件的监听器。当连接断开时，我们设置 isOpen 属性为 false，并调用 setTimeout，使5秒钟后自动重连。
避免因 WebSocket 连接断开而无法收到服务器发送的消息
我们已经实现了 WebSocket 连接的自动重连，但是当连接断开时，我们可能会错过服务器发送的一些消息。为了避免这种情况，我们可以在连接断开时缓存服务器发送的消息，并在重新连接后进行发送。
-- -------------------- ---- -------
----- ---------------- -
-- ---
------- ------------- ----- - ---
------- ------------------ ----- ---- -
-----------------------------
-
------- -------------------- ---- -
----- ------------------------- - -- -
----- ---- - --------------------------
----------------
-
-
------- ---------------- ------------------------ ---- -
-- -------------- -
------------------------------
-------
-
---------------------- ----- ----------------
-
------- ------- ---- -
-- ---
----------------- - --------------------------
-
-在上面的代码中，我们创建了一个 messageQueue 数组来缓存服务器发送的消息。在 cacheMessage 方法中，我们将消息推入 messageQueue 数组中。在 flushMessageQueue 方法中，我们使用 while 循环获取并发送所有缓存的消息。
在 onMessage 方法中，我们检查 isOpen 属性是否为 true。如果为 true，则表示 WebSocket 连接已经建立。我们记录消息，然后将其打印到控制台。否则，我们调用 cacheMessage 方法来缓存消息。
最后，在 open 方法中，我们将 onmessage 事件的监听器设置为 onMessage 方法。
结论
在这篇文章中，我们根据需求分析，提出了解决 Deno 中 WebSocket 连接断开的问题的解决方案，并使用 TypeScript 语言提供了代码示例。通过使用这个解决方案，我们可以在 Deno 中更稳定地建立和维护 WebSocket 连接，从而更好地解决 WebSocket 连接断开的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff3e69cff928eb268c8e83