WebSocket 是一种基于 TCP 协议实现的全双工通信通道，可在客户端和服务器之间实现实时通信功能，广泛应用于聊天室、在线游戏等场景。Deno 是一个新兴的 JavaScript（TypeScript）运行时，与 Node.js 相比具有安全、可维护性更好的优点，同时内置了异步 IO 和 ES 模块支持。
本文将介绍如何使用 Deno 和 WebSocket API 开发一个简单的聊天室应用程序，包括前端页面和后台服务器代码。
前置知识
在阅读本文之前，你需要掌握以下技能：
- 基本的 HTML、CSS、JavaScript 编程知识
- TypeScript 语言基础
- Deno 运行时的基本使用方式
- WebSocket API 的基本概念和使用方式
实现步骤
1. 创建前端页面
首先，我们需要创建一个简单的 HTML 页面，用于输入用户名、聊天消息和发送消息的按钮。我们将使用 Bootstrap 样式框架来美化页面。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----------- --------- -----------
----- ---------------- --------------------------------------------------------------------------------
-------
------
---- ---------------- ------
-------- --------- --------
---- ---------- ------
---- ---------------------------
---- -----------------
------ ----------- -------------------- --------------
------
------
---- ---------- ------
---- ----------------------------
---- -----------------
------ ----------- -------------------- -------------
------
---- -----------------
------- ---------- ------------ ---------------------
------
------
---- ---------- ------
---- ----------------------------
---- -----------------
--- ------------------ -------------------
------
------
------
------- -------------------------
-------
-------上面的代码定义了一个输入框和一个发送按钮，以及一个用于显示聊天记录的列表。我们将使用 JavaScript 代码来监听按钮点击事件，并将输入的消息发送给服务器。
2. 创建 WebSocket 服务器
现在，我们需要编写一个 Deno 脚本来启动 WebSocket 服务器。具体步骤如下：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- ---------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
---------------------- -----------------------
--- ----- ------ --- -- ------- -
-- ----------- --- ----- -- ------- --- ---- -
-------------
------- ----
-------- --- ---------
--------------- ------------
---
----- ----- --------------------------
---
- ---- -- ----------- --- ----- -- ------- --- ------ -
-- ----------------- -
-----------------
----- ---------
---------- ------
---------- ------
-------- ------------
-------------------------
-
- ---- -
-------------
------- ----
----- ---- --- -------
---
-
-
----- -------- ------------------- ---------- -
---------------------- ---------------
--- ----- ------ ----- -- --- -
-- ------- ----- --- --------- -
------------------------ -------
-----------------
-
-
-
-------- -------------- ------- -
--- ------ ------ -- -------- -
-----------------
-
-
----- -------- ----------- - ---上面的代码使用 serve 函数创建一个 HTTP 服务器，并监听 8000 端口。当客户端访问 / 路径时，返回用于输入用户名和聊天内容的 HTML 页面。当客户端访问 /ws 路径时，如果是一个符合 WebSocket 协议的请求，就使用 acceptWebSocket 函数创建 WebSocket 连接。handleWebSocket 函数用于处理 WebSocket 连接事件，当接收到一条消息时，将其广播给所有已连接的客户端。
我们还需定义一个全局变量 clients，用于保存所有已连接的 WebSocket 客户端。
3. 编写前端页面 JavaScript 代码
现在我们需要编写一个 JavaScript 脚本文件，用于在前端页面中建立 WebSocket 连接，并向服务器发送和接收消息。
-- -------------------- ---- -------
----- ------ - --- ------------------------------------
----- -------- - ------------------------------------
----- -------- - ------------------------------------
----- ------- - -----------------------------------
----- ---- - --------------------------------
------------- - ------- -- -
---------------------- ----------
--
---------------- - ------- -- -
----- -- - -----------------------------
------------ - -----------
-------------------------
--
------------ - -- -- -
-- --------------------- --- --- -
------------------------------- -------------------
------------- - ---
-
--
------------------ - ------- -- -
-- -------------- --- --- -
-------------
-
--上面的代码使用 WebSocket 的构造函数创建一个 WebSocket 连接，设置其地址为 ws://127.0.0.1:8000/ws，即服务器的地址和路径。当连接建立成功时，服务器会自动调用 handleWebSocket 函数。当接收到一条消息时，页面将其添加到聊天记录列表中。
同时，我们还编写了 send 按钮的点击事件和 message 输入框的键盘事件，当用户输入一条消息并点击发送按钮或按下回车键时，页面将其发送给服务器。
4. 运行应用程序
现在，我们需要在命令行中使用以下命令来运行应用程序：
deno run --allow-net --allow-read app.ts
其中 app.ts 是包含上述服务器代码的文件路径。
现在，我们可以在浏览器中访问 http://localhost:8000，输入用户名和聊天消息，点击发送按钮即可向服务器发送消息并接收其他客户端的消息。
总结
本文介绍了如何使用 Deno 和 WebSocket API 开发一个简单的聊天室应用程序。我们讲解了前端页面和后台服务器的实现步骤，并提供了示例代码和运行命令。希望本文对你了解 Deno 和 WebSocket 技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458ba65968c7c53b0b0b6f1