前言
Web 前端开发的快速发展，推动了 WebSocket 技术的应用。WebSocket 技术可以使 Web 应用程序实现双向实时通信，使得在线聊天室的实现成为可能。而 Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境，它提供了支持 WebSocket API 的标准库。本文将介绍如何使用 Deno 的 WebSocket API 实现在线聊天室。
实现思路
为了实现在线聊天室，我们需要使用 WebSocket 技术建立客户端和服务器之间的实时双向通信。客户端通过 WebSocket 连接服务器，向服务器发送消息，服务器接收消息后进行处理，并将处理结果通过 WebSocket 返回给客户端。为了实现多个客户端之间的聊天，我们需要在服务器端维护一个消息队列，并将消息转发给所有已连接的客户端。
准备工作
在开始正式的代码实现之前，我们需要先安装 Deno 运行时环境。Deno 的安装非常简单，只需要在终端中运行以下命令即可：
- ---- ----- -------------------------------------- - --
安装完成之后，我们可以在终端中输入以下命令，检查是否安装成功：
- ---- ---------
如果成功输出了 Deno 的版本号，则表示安装成功。
代码实现
服务器端代码
首先，我们需要编写服务器端的代码。服务器端需要维护一个消息队列，用于存储客户端发送的消息。在这里，我们采用 Map 结构来实现消息队列，其中键为客户端的 WebSocket 连接，值为一个数组，用于存储该客户端发送的消息。
-- -----
------ - ----- - ---- ---------------------------------------
------ - ----------- --------------- - ---- ----------------------------------
-- ------
----- -------- - --- ------
-- -- ---- ---
----- --- - ------- ----- ---- ---
------------------- --- ------- -- ---- -------
-- ---------
--- ----- ------ --- -- ---- -
-- ----------------- -
-----------------
----- ---------
---------- ------
---------- ------
-------- ------------
-------------------------
-
-
-- -- --------- ----
----- -------- ------------------- -
---------------- ------ ------------
-- ---- --------- ----------
---------------- ----
-- ----- --------- --
--- ----- ------ ------- -- --- -
--------------------- -------- -------------
-- ----------------
-------------------------------
-- -----------
--- ------ ------ -- ---------------- -
-- ------- --- -- -- ----------------- --- ------------ -
---------------------
-
-
-
-- ---- --------- ----------
--------------------
------------------- ---------------
-代码解释：
import语句用于导入需要使用的依赖库。serve函数用于创建一个 HTTP 服务器，并监听指定端口。在这里，我们监听了3000端口。acceptable函数用于判断是否为 WebSocket 连接请求。如果是 WebSocket 连接请求，则通过acceptWebSocket函数创建 WebSocket 连接。- 在
handleWebSocket函数中，首先将客户端 WebSocket 连接添加到消息队列中，然后监听客户端 WebSocket 连接。当接收到客户端发送的消息时，将消息添加到该客户端的消息队列中，并将消息转发给所有客户端。最后，将客户端 WebSocket 连接从消息队列中移除。
客户端代码
接下来，我们需要编写客户端的代码。客户端需要通过 WebSocket 连接服务器，向服务器发送消息，接收服务器返回的消息。
--------- -----
------
------
------------- ------------
-------
------
---------- ---- ---------
-----
------ --------------------------------
------ ----------- ------------- --
------
-----
------ ------------------------------
------ ----------- ------------ --
------- ---------------------------
------
---- --------------------
--------
----- -- - --- ---------------------------------
------------ - ------- -- -
----- ---------- - ------------------------------
-------------------- - -----------
------------------------------------------------------------
--
------------------------------------------------------------- -- -- -
----- -------- - ------------------------------------------
----- ------- - -----------------------------------------
----- ---- - ------------- ------------
--------------
---
---------
-------
-------代码解释：
- 首先，我们通过
WebSocket构造函数创建一个 WebSocket 对象，并指定连接的服务器地址和端口号。 - 在
ws.onmessage函数中，当接收到服务器发送的消息时，创建一个div元素用于显示该消息，并将其添加到聊天框中。 - 在发送消息时，首先获取用户名和消息内容，然后将它们拼接成一个字符串，并通过
ws.send方法发送给服务器。
运行程序
在终端中运行以下命令启动服务器端代码：
- ---- --- ----------- ---------
在浏览器中打开以下地址，即可访问客户端界面：
---------------------------------
在客户端界面中输入用户名和消息内容，并点击发送按钮即可发送消息给其他客户端。在成功连接服务器后，即可和其他客户端进行实时聊天。
总结
本篇文章介绍了如何使用 Deno 的 WebSocket API 实现在线聊天室。我们首先介绍了实现思路，然后分别编写了服务器端代码和客户端代码，并最终运行程序测试程序是否正常运行。WebSocket 技术广泛应用于实现在线聊天室、实时数据传输等场景，掌握 WebSocket 技术可以为前端开发人员带来更多的开发可能性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64cec334b5eee0b5256686ec