在今天的 web 应用中，实时性很重要。最近几年，使用 WebSocket 替代 HTTP 请求和响应获取数据和完成交互变得越来越流行。在前端架构中， WebSockets 已经成为构建实时应用的必要选择。而 Deno 是最近出现的一个新的运行时环境，主要用于在浏览器外部运行 JavaScript，它的长处在于安全、模块化、开放性等等，同时还能够很好地支持 WebSocket。
WebSocket
WebSocket 是一种双向通信协议。它在建立连接后实现一个长时间保持开放状态的双向数据通道。与传统的 HTTP 请求和响应交互方式不同，WebSocket 可以在客户端和服务器之间建立一个实时的通信渠道。因此，它是构建实时的 web 应用的重要选择。WebSocket 采用配置简单、低延迟、高效的协议，不仅能够传递文本和二进制数据，还能够支持精细的错误处理和连接状态的维护。
Deno
Deno 是一种基于 V8 引擎的 JavaScript 和 TypeScript 运行时环境，由 Rust 编写，用于在浏览器外部运行 JavaScript。Deno 安全、支持模块化和开放性，支持 TypeScript 无需额外配置就可以运行，并且内置 HTTP 和 WebSocket 模块。
WebSocket 和 Deno 的结合
WebSocket 可以很好地支持实时的通信，而 Deno 可以便捷地编写 WebSocket 在客户端实现的脚本。使用 Deno 开发 WebSocket 客户端，我们需要了解以下最佳实践：
1. 使用标准 API
Deno 内置了 WebSocket 模块，我们可以通过 import 语句引进并使用。比如以下示例：
import { WebSocket } from "https://deno.land/std/ws/mod.ts";这个标准 API 可以很方便地实现 WebSocket 客户端和服务器的连接和通信。因此，我们应该尽可能地使用标准 API，而不是自己编写 WebSocket 的相关代码。
2. 保持连接
由于 WebSocket 是一个长连接，保持连接是很重要的。可以通过在客户端实现心跳机制，使连接保持稳定一段时间。另外，服务器端能够及时向客户端发送状态信息，在通信中查找错误，也是保持连接需要考虑的一个因素。
3. 回退机制
回退机制是指在网络连接没有启动或连接失败时，我们能够有一个简单的方法回退到另一个连接通道。这个机制是很重要的，因为网络连接不稳定或者其他问题都有可能导致 WebSocket 连接失败。大多数 WebSocket 库都提供了回调方法来处理这种情况。
4. 错误处理
WebSocket 易于出现一些错误，如连接断开、连接超时和数据处理错误。我们需要在开发中适时处理错误，如捕捉异常等等，并且记录日志，以便定位问题。
示例代码
下面是一个典型的 Deno WebSocket 客户端示例。该示例实现了 WebSocket 的创建和处理功能，确保了与服务器的长连接，以及处理了当连接出现异常时的情况。
-- -------------------- ---- -------
------ - --------- - ---- ----------------------------------
----- ---------- - --- ---------------------------------
--- --------- - ------
----------------- - -- -- -
---------------------- ------------
--------- - -----
--
-------------------- - --------- -- -
--------------------------
--
------------------ - -- -- -
---------------------- ---------------
--------- - ------
------------- -- ------------------- -------
--
------------------ - ----- -- -
------------------------ ------ -----------------
-------------------
--
----- -------- ------------------ -
--- -
----------------------- -- --------- ---------
----- -----------
- ----- ----- -
------------------------ ------ -----------------
-
-
-------------------在上面的示例中，我们创建了一个包含 URL 的 WebSocket 实例。在实例通过 onopen 回调函数与服务器建立连接后，创建信号变量 connected 来追踪连接状态，并打印一条日志。处理消息的 onmessage 函数被设置为打印消息内容。当连接断开时，onclose 函数将标记连接断开，并在 10 秒后再次尝试连接。类似地，WebSocket 连接发生错误时，onerror 函数将在控制台上记录错误并关闭 WebSocket 连接。
错误处理的实例代码
下面是一个实例代码，展示如何在 WebSocket 发送和接收数据时，处理错误。
-- -------------------- ---- -------
------ - --------- - ---- ----------------------------------
----- ---------- - --- ---------------------------------
--- --------- - ------
----------------- - -- -- -
---------------------- ------------
--------- - -----
--
-------------------- - --------- -- -
--- -
----- ---- - -------------------------
------------------
- ----- ----- -
---------------------- ---- ---- ---------- -----
-
--
------------------ - -- -- -
---------------------- ---------------
--------- - ------
------------- -- ------------------- -------
--
------------------ - ----- -- -
------------------------ ------ -----------------
-------------------
--
----- -------- ------------------ -
--- -
----------------------- -- --------- ---------
----- -----------
- ----- ----- -
------------------------ ------ -----------------
-
-
-------------------
-------- -------------- -
-- ------------ -
---------------- --------- -- --------- ---------
-------
-
--- -
--------------------------------------
- ----- ----- -
-------------------- ------- ---- -- --------- -------- -----
-
-在上面的代码中，我们定义了一个名为 sendData 的函数来发送 JSON 格式的数据。如果连接处于离线状态，该函数将打印一条消息，并返回，否则将发送数据。在接收消息时，我们使用 try .. catch 块来捕获 JSON 格式错误，并记录错误。在连接断开或错误发生时，我们使用标准回调函数来处理它们。
总结
WebSocket 是现代 web 应用必需的双向通信协议，并且在前端架构中使用得非常广泛。Deno 是一个新的运行时环境，支持 WebSocket 相关的可移植性和类型安全性。本文提出了 Deno 开发 WebSocket 客户端的最佳实践，这些实践应该帮助您提高开发 WebSocket 客户端的效率、减少错误和异常，并确保在长时间的连接中正确处理与服务器之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b752eaadd4f0e0fffe3728