WebSocket 是一种基于 TCP 协议的协议，用于实现客户端和服务器之间的双向通信。在前端开发中，WebSocket 被广泛应用于实时聊天、实时监控等场景。在本文中，将介绍如何在 Deno 中使用 WebSocket 实现一个简单的聊天室应用。
准备工作
在开始本教程之前，需要先了解 Deno 的基础知识。如果您还不熟悉 Deno，可以先从官方文档开始学习。
本教程使用了第三方模块 ws 来实现 WebSocket 功能，因此还需要使用 Deno 的包管理工具 deno 来安装该模块：
deno install --allow-net --allow-read https://deno.land/x/ws/mod.ts
以上命令将会在本地安装 ws 模块并使其可被引用。
编写服务器端代码
首先，我们需要编写服务器端代码来实现 WebSocket 的初始化和消息的发送和接收。下面是一个最简单的 WebSocket 服务器示例：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------- ------ - ---------------- --------- - ---- ---------------------------------- ----- ------ - ------- ----- ---- --- ------------------- ------- -- ------------------------ --- ----- ------ --- -- ------- - -- ------- ------- -- --------- ----- - ----- -- ---------- -- ---------- ------- - - ---- ----- -- - ----- ----------------- ----- ---------- ---------- -------- --- -- ------ --- -------- -------- --- ----- ------ ------- -- --- - -------------------- --------- ------------- - -展开代码
以上代码从 std 模块中导入了 http/server 和 ws/mod 两个模块，并创建了一个 HTTP 服务器监听端口 8080。当有请求到达时，它会先升级该请求到 WebSocket，并将 WebSocket 实例返回到客户端，之后便可以通过该实例进行消息的发送和接收了。
接下来，我们需要对代码进行改进，以便实现聊天室功能。我们可以为每个聊天室定义一个唯一标识符，并将聊天室信息保存在一个全局变量中。当有新的连接打开时，将其加入到指定的聊天室中。当有聊天信息发送时，服务器将其广播给该聊天室中的所有连接。代码如下：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------- ------ - ---------------- --------- - ---- ---------------------------------- ----- ------ - ------- ----- ---- --- ------------------- ------- -- ------------------------ ---- ---- - - --- ------- ------------ ------------ -- ----- ------ ------ - --- -------- ---------------- -------- ---- - --------- - ------ ----------------- -- ------- --- ---- - -------- -------------- -------- ---- - ----- ----- ---- - - --- ------------ -- -- ----------------- ------ ----- - -------- ------------ ------- --- ----------- ---- - --- ---- - ----------------- -- ------- - ---- - --------------- - -------------------------- ------ ----- - ----- -------- --------------- ----- -------- -------- ------------- - ----- -------------------------------------- ---- -- ----- ------------------- - --- ----- ------ --- -- ------- - -- ------- ------- -- --------- ----- - ----- -- ---------- -- ---------- ------- - - ---- ----- -- - ----- ----------------- ----- ---------- ---------- -------- --- -- ----- ---- -- ---- --- ---- ----- ---- - ------------------- ----- ------ - ---------------- - --- ----- ---- - ---------------- ---- ----------------------- ------ ---- ------------- -- ------ --- -------- -------- --- ----- ------ ------- -- --- - -------------------- -------- ---- ---- ----------- ------------- ----- --------------- --------- - -- ------ ---------- ---- ---- ---------------- - ---------------------------- -- -- --- ---- ----------------------- ---- ---- ------------- -展开代码
以上代码实现了以下几个功能：
- 定义
Room类型来表示聊天室信息，包括唯一标识符id和连接实例数组connections。 - 定义
rooms变量来保存所有聊天室信息，并实现了findRoomById和createRoom函数来查找和创建指定标识符的聊天室。 - 实现
joinRoom函数来将连接加入指定聊天室，并返回该聊天室实例。 - 实现
broadcast函数来向指定聊天室中所有连接广播消息。 - 在主循环中，将连接加入指定聊天室，并监听消息的接收和发送。当连接断开时，将其从对应聊天室中删除。
编写客户端代码
现在，我们已经完成了服务器端的实现，接下来可以编写客户端代码来测试聊天室功能。虽然 WebSocket 可以在浏览器中使用，但在本文中，我们将使用 Deno 自带的 WebSocket 客户端模块来模拟客户端。
下面是一个最简单的 WebSocket 客户端示例：
-- -------------------- ---- ------- ------ - ---------------- - ---- ---------------------------------- ----- -- - ----- ---------------------------------------------- ---------------------- -- --------- --------------- --------- --- ----- ------ ------- -- --- - -------------------- --------- ------------- -展开代码
以上代码从 std 模块中导入了 ws/mod 模块，并使用 connectWebSocket 函数来建立与服务器的连接。注意，与服务器的地址必须是 WebSocket 协议，即以 ws:// 或 wss:// 开头。
接下来，我们需要对代码进行改进，以便实现聊天室功能。我们可以在浏览器中使用 WebSocket 的 onmessage 和 send 方法来接收和发送消息。代码如下：
-- -------------------- ---- ------- ----- ------ - -------- ----- -- - --- ------------------------------------------- --------- - -- -- - ---------------------- -- --------- -- ------------ - -- ---- -- -- - -------------------- --------- ---------- -- ----- ------------ - ---------------------------------- -- ----------------- ---------------------- - ------- -- - -- ---------- --- -------- - ----- ------- - ------------------- ----------------- ------------------ - --- - --展开代码
以上代码实现了以下几个功能：
- 使用
WebSocket构造函数创建 WebSocket 实例，并指定房间标识符。 - 监听连接的建立和消息的接收，并在控制台中输出。
- 监听消息输入框的键盘事件，并在用户按下回车键时将消息发送给服务器。
测试聊天室功能
终于到了测试聊天室功能的时候了。启动服务器和客户端之后，可以打开几个不同的客户端，进入同一个聊天室，并尝试发送消息，测试广播功能。
打开三个终端，分别执行以下命令：
deno run --allow-net server.ts
deno run --allow-net client.ts
deno run --allow-net client.ts
在客户端1中输入消息并按下回车键：
Hello, world!
可以看到在其他客户端的控制台中都输出了该消息。
到这里为止，我们已经成功地实现了一个基于 Deno 和 WebSocket 的简单聊天室应用，尝试对代码进行调整或改进，以实现更为复杂的应用场景吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c252f2314edc2684b78747
