WebSocket 是一种实时通信协议，可以在客户端和服务器之间建立双向通信通道，使得数据可以在两个端点之间实时交换。在前端开发中，WebSocket 经常用于实时推送数据、实时聊天等场景。而在 Deno 中，也可以很方便地使用 WebSocket 进行实时通信。本文将详细介绍如何在 Deno 中使用 WebSocket 进行实时通信，并给出完整的示例代码。
什么是 Deno
Deno 是一种基于 TypeScript 和 V8 引擎的 JavaScript 运行环境，它旨在提供更加安全、更加可靠的环境进行 JavaScript 开发。与 Node.js 相比，Deno 具有以下特点：
- 支持 TypeScript，不需要额外的编译步骤。
- 默认开启安全模式，禁止读写文件、网络访问等操作，需要显式授权才能执行。
- 原生支持 ES6+，不需要额外的 polyfill 或模块打包工具。
Deno 是一个相对较新的技术，但是由于它的特点，在未来可能会逐渐取代 Node.js 成为前端开发的标准环境。
如何在 Deno 中使用 WebSocket
在 Deno 中，使用 WebSocket 非常容易。我们只需要使用 WebSocket 类创建一个 WebSocket 服务器，并使用 listen 方法监听端口，即可启动一个 WebSocket 服务器。
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------
----- -------- -------------- ---------- -
--- ----- ------ -- -- ----- -
----------------
-
-
----- -------- ------ -
----- ------ - ------- ----- ---- ---
--------------------------------------
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
----- ---- - ----- -----------------
-----
----------
----------
--------
---
------------------- -------------
---------------
-
-
-
-------在上面的代码中，我们使用 serve 方法创建了一个 HTTP 服务器，监听 8080 端口。当客户端连接到 /ws 路径时，我们使用 acceptWebSocket 方法接受 WebSocket 连接，并使用 handleWs 方法来处理收到的数据。
acceptWebSocket 方法返回一个 WebSocket 对象，我们可以通过 for await (const ev of sock) 的方式来监听数据事件。在示例代码中，我们只是将收到的事件日志打印到控制台，因为我们还没有编写其他代码来处理这些事件。
客户端如何连接 WebSocket
在前端中，我们可以使用 WebSocket 类来创建一个 WebSocket 对象，连接到服务器。在 Deno 中，我们可以使用 ws 包中的 connectWebSocket 方法来建立 WebSocket 连接。
-- -------------------- ---- ------- ------ - ---------------- - ---- ---------------------------------- ----- -------- ------ - ----- ---- - ----- ------------------------------------------- -------------------------- ----------------- ------------- ------------- -------------- -- ----- - -------
在上面的代码中，我们使用 connectWebSocket 方法来连接到 ws://localhost:8080/ws 这个路径，即我们在服务器中设置的 WebSocket 路径。连接成功后，我们可以使用 send 方法向服务器发送数据。这里我们发送了一个字符串和一个字节数组。
如何进行实时通信
WebSocket 是一种双向通信协议，因此我们可以使用 send 方法向客户端或服务器发送数据。在实际应用中，我们一般会编写更加复杂的处理逻辑来处理 WebSocket 数据。
下面是一个简单的聊天室示例：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------
--------- ------- -
----- -------
----- -------
-
----- -------- ----------- - ---
-------- --------------- -------- -------- ---------- -
--- ------ ---- -- -------- -
-- ----- --- ------- -
--------------------------------
-
-
-
----- -------- -------------- ---------- -
-------------------
--- ----- ------ -- -- ----- -
-- ------- -- --- --------- -
----- ---- - ---------------
--------------- ------
-
-
----- ----- - ----------------------
-- ------ - --- -
--------------------- ---
-
-
----- -------- ------ -
----- ------ - ------- ----- ---- ---
--------------------------------------
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
----- ---- - ----- -----------------
-----
----------
----------
--------
---
------------------- -------------
---------------
-
-
-
-------在上面的代码中，我们首先定义了一个 Message 接口，表示发送的数据。然后定义了一个 sockets 数组，用来保存所有连接到服务器的 WebSocket 对象。在 handleWs 方法中，我们首先将当前的 WebSocket 对象加入到 sockets 数组中。然后监听 WebSocket 收到的数据，如果接收到了字符串，我们将其解析成 Message 对象，并调用 broadcast 方法将消息发送给所有其他客户端。
broadcast 方法会遍历 sockets 数组，将消息发送给所有连接到服务器的客户端。注意，在发送消息时，我们要判断发送者是否为接收者本身，避免自己收到自己的消息。
在客户端中，我们可以使用以下代码向服务器发送消息，并处理服务器发送的消息：
-- -------------------- ---- -------
------ - ---------------- - ---- ----------------------------------
--------- ------- -
----- -------
----- -------
-
----- -------- ------ -
----- ---- - ----- -------------------------------------------
-------------- - ---- ------------- -- -
----- ---- - --------------------
------------------------ ------
--
----- ----- - --------------------------------
---------- - -------
---------------------------------
--------------- - ---- -------------- -- -
-- ------- --- -------- -
----- ----- ------- - -
----- -------
----- ------------
--
--------------------------------
----------- - ---
-
--
-
-------在客户端代码中，我们首先使用 onmessage 方法来监听服务器发送的消息，并解析成 Message 对象。然后创建一个输入框用于输入消息，监听输入框的 onkeydown 事件，当用户按下 Enter 键时，将输入的消息转换为 Message 对象，并使用 send 方法发送给服务器。
通过上面的代码，我们可以实现一个简单的聊天室，实现客户端和服务器之间的实时通信。
总结
WebSocket 在前端开发中是一种非常常用的技术，可以实现很多实时通信功能。在 Deno 中，使用 WebSocket 也非常方便，我们只需要使用 WebSocket 类创建一个 WebSocket 服务器，并使用 listen 方法监听端口，就可以启动一个 WebSocket 服务器。在客户端中，我们可以使用 WebSocket 类或 ws 包中的 connectWebSocket 方法来连接 WebSocket。
本文还给出了一个简单的聊天室示例，实现客户端和服务器之间的实时通信。读者可以通过该示例了解如何进行 WebSocket 数据处理，以及如何将 WebSocket 应用于实际场景中。
如果你学习过 Deno，并且想尝试使用 Deno 进行前端开发，那么使用 WebSocket 应该是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64619fc9968c7c53b02f9d52