WebSocket 是一种现代化的浏览器与服务器之间的实时双向通信技术，在现代 Web 应用程序中得到了广泛地应用。Deno 提供了一种简单的方式来使用 WebSocket 实现聊天室，本文将指导读者如何在 Deno 中使用 WebSocket 实现聊天室。
安装和使用 Deno
如果你还没有安装 Deno，可以通过官网提供的方式进行安装。安装完成后，可以使用命令行工具来运行 Deno。
- ---- --- ------
创建 WebSocket 服务器
首先，我们需要创建一个 WebSocket 服务器，以便客户端可以连接到它并与服务器进行通信。在 Deno 中，可以使用标准库中的 WebSocket API 来创建 WebSocket 服务器。
------ - ----- - ---- ---------------------------------------
------ - ---------------- ---------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- ----------- --- ----- -- ---------------- -
-----------------
----- ---------
---------- ------
---------- ------
-------- ------------
--
----------------------
------------ -- --------------------- -- ------ ---------- ----------
-
-
----- -------- ----------------------- ---------- -
------------------- ------------
------------------- ---------
--- ----- ------ ----- -- ------- -
------------------- -------- -------
-- ------- ----- --- --------- -
------------------- ---- ---------- -------
- ---- -- ------ ---------- ----------- -
------------------- ------ ---------- -------
-
-
-这段代码首先创建了一个 HTTP 服务器，并在 3000 端口上开始监听。然后，它迭代了 HTTP 请求，检查每个请求是否符合 WebSocket 的要求，如果是，则通过 acceptWebSocket 来接受 WebSocket 连接，并将处理逻辑交给 handleWebSocket 函数处理。
handleWebSocket 函数非常简单，它发送一个“hello, world！”消息作为初始消息，并在接收到来自客户端的消息时打印该消息。这里需要注意的是，Socket 是在进行迭代（for await）时留给我们使用的异步迭代器。
使用聊天室功能
一旦我们完成了 WebSocket 服务器的初始化和连接，我们就可以开始添加聊天功能了。首先，我们需要对客户端发送的消息进行处理，并将其发送到所有连接的客户端。
---- ------- - -
------- -------
-------- -------
------------ -----
--
----- --------- --------- - ---
----- -------- ----------------------- ---------- -
------------------- ------------
------------
----------------
----- ----------
---------
--
--
--- ----- ------ ----- -- ------- -
------------------- -------- -------
-- ------- ----- --- --------- -
----- -------- ------- - -
------- ----------
-------- ------
------------ --- -------
--
-----------------------
--- ------ ------ -- -------- -
------------
----------------
----- ----------
--------
--
--
-
- ---- -- ------ ---------- ----------- -
------------------- ------ ---------- -------
-
-
-这段代码创建了一个 Message 数据类型，用于表示聊天消息。它还在 handleWebSocket 函数的开头定义了一个数组 messages，用于存储所有聊天消息。当有新的消息到达服务器时，它会解析该消息并添加到 messages 中，并将消息发送到所有连接的客户端。
客户端会收到两种类型的消息：一种是历史消息，用于初始化聊天框；另一种是实时聊天消息，用于在新消息到达时更新聊天框。以下代码演示了如何处理这些不同类型的事件：
----- --- - ----------------------
----- ------ - --- ---------------
------------------------------- ------- -- -
---------------------- ---------- ---------
----- ------------ - ------------------------------------------
----------------------------------------- ------- -- -
-- ---------- --- -------- -
----- ---- - -------------------
------------------ - ---
------------------
-
---
---
---------------------------------- ------- -- -
--- -
----- ---- - -----------------------
------ ----------- -
---- ----------
----- ----------- - -----------------------------------------
------------------------------- -------- -- -
----- -------------- - ------------------------------
------------------------ -
------------------------------------ --------------------
----------------------------------------
---
------
---- ----------
----- ----------- - -----------------------------------------
----- -------------- - ------------------------------
------------------------ -
----------------------------------------- -------------------------
----------------------------------------
------
-
- ----- ----- -
--------------------- -- ----- --------- -------- ---------
-
---这段代码首先创建了一个 WebSocket 实例，并在连接打开时添加了一个事件监听器。在事件监听器中，它创建了一个输入框和一个“按下回车键并发送消息”事件监听器。在消息到达时，它解析了该消息并根据 type 属性执行相应的操作。如果 type 是“history”，它会向聊天框添加历史消息；如果 type 是“message”，它会向聊天框添加实时消息。
总结
本文演示了如何在 Deno 中使用 WebSocket 实现聊天室。我们首先创建了一个简单的 WebSocket 服务器，并将其扩展以支持聊天功能。然后，我们演示了如何在客户端中使用 WebSocket 进行通信。
WebSocket 在实时聊天中被广泛使用，并且是现代化 Web 应用程序的核心技术之一。Denno 提供了一种简洁、高效的方式来使用 WebSocket，并灵活地扩展它以支持任何类型的应用程序。通过使用 WebSocket 实现聊天室，我们可以获得更好的用户体验和更高的客户满意度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66569d7ad3423812e4b799a5