WebSocket 是一种用于在 Web 应用程序中进行双向通信的协议。它允许服务器向客户端推送数据，而不需要客户端发起请求。在前端开发中，我们经常使用 WebSocket 来构建实时应用程序，例如聊天应用程序等。在本文中，我们将介绍如何在 Deno 中使用 WebSocket 完成一个简单的聊天应用程序。
准备工作
在开始之前，我们需要安装 Deno 运行时环境。可以通过以下命令在命令行中安装 Deno：
$ curl -fsSL https://deno.land/x/install/install.sh | sh
安装完成后，我们可以在命令行中输入 deno 命令来验证安装是否成功：
$ deno --version deno 1.15.2 v8 9.4.146.19 typescript 4.4.3
接下来，我们需要创建一个新的 Deno 项目。可以通过以下命令在命令行中创建一个新的 Deno 项目：
$ mkdir chat-app $ cd chat-app $ touch server.ts
实现 WebSocket 服务器
在 server.ts 文件中，我们需要实现一个 WebSocket 服务器来接收和处理客户端的连接请求。可以使用 Deno 的标准库中的 serve() 函数来创建一个 HTTP 服务器，并使用 WebSocket 模块来处理 WebSocket 连接请求。以下是一个简单的 WebSocket 服务器实现：
-- -------------------- ---- -------
------ - ----- - ---- -----------------
------ - ---------------- --------- - ---- ------------
----- ---- - -----
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ---- ----------
--- ----- ------ --- -- ------- -
----- - ----- -- ---------- -- ---------- ------- - - ----
--- -
----- -- - ----- ----------------- ----- ---------- ---------- ------- ---
------------------- ------------
--- ----- ------ ------- -- --- -
--------------------- -------- -------------
----- ------------ ----- -------------
-
- ----- ----- -
--------------------- -- ------ ---------- ---------
-
-在上面的代码中，我们首先创建了一个 HTTP 服务器，并将其绑定到本地的 8000 端口。然后，我们使用 acceptWebSocket() 函数来处理客户端的 WebSocket 连接请求。在连接建立后，我们可以通过 for await (const message of ws) 循环来接收客户端发送的消息，并使用 await ws.send() 函数将消息发送回客户端。
实现聊天应用
现在我们已经有了一个 WebSocket 服务器，接下来我们需要实现一个简单的聊天应用程序。首先，我们需要在客户端中创建一个 WebSocket 连接，并在连接建立后发送一个欢迎消息。以下是一个简单的客户端实现：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------- -----------
-------
------
---- --------------------
------ ----------- ---------- --
------- -----------------------
--------
----- ------ - --- ---------------------------------
------------- - -- -- -
---------------------- -- --------- ---------
-------------------- -- --- ---- -------
--
---------------- - ------- -- -
--------------------- -------- ----------------
----- -------- - ------------------------------------
----- ------- - ----------------------------
----------------- - -----------
------------------------------
--
----- ---------- - --------------------------------
----- ----- - ---------------------------------
------------------------------------ -- -- -
----- ------- - ------------
---------------------
----------- - ---
---
---------
-------
-------在上面的代码中，我们首先创建了一个 WebSocket 连接，并在连接建立后发送一个欢迎消息。然后，我们通过 socket.onmessage() 函数来接收来自服务器的消息，并将其显示在页面上。最后，我们创建了一个文本输入框和一个发送按钮，并在按钮被点击时将输入框中的文本发送到服务器。
运行聊天应用
现在我们已经完成了聊天应用程序的实现，接下来我们可以通过以下命令在命令行中启动 WebSocket 服务器：
$ deno run --allow-net server.ts
然后，我们可以在浏览器中打开 index.html 文件，并在页面上输入一些文本并点击发送按钮。我们应该能够在控制台中看到来自服务器的消息，并在页面上看到发送的消息被显示出来。
总结
在本文中，我们介绍了如何在 Deno 中使用 WebSocket 完成一个简单的聊天应用程序。我们首先实现了一个 WebSocket 服务器来接收和处理客户端的连接请求，然后在客户端中创建了一个 WebSocket 连接来发送和接收消息。通过本文的学习，我们可以更深入地了解 WebSocket 的工作原理，并掌握如何在 Deno 中使用 WebSocket 构建实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653cb1c77d4982a6eb6bb769