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 服务器实现：
// javascriptcn.com 代码示例
import { serve } from "http/server.ts";
import { acceptWebSocket, WebSocket } from "ws/mod.ts";
const PORT = 8000;
const server = serve({ port: PORT });
console.log(`WebSocket server running on port ${PORT}`);
for await (const req of server) {
const { conn, r: bufReader, w: bufWriter, headers } = req;
try {
const ws = await acceptWebSocket({ conn, bufReader, bufWriter, headers });
console.log("Client connected");
for await (const message of ws) {
console.log(`Received message: ${message}`);
await ws.send(`You said: ${message}`);
}
} catch (err) {
console.error(`Failed to accept WebSocket: ${err}`);
}
}在上面的代码中，我们首先创建了一个 HTTP 服务器，并将其绑定到本地的 8000 端口。然后，我们使用 acceptWebSocket() 函数来处理客户端的 WebSocket 连接请求。在连接建立后，我们可以通过 for await (const message of ws) 循环来接收客户端发送的消息，并使用 await ws.send() 函数将消息发送回客户端。
实现聊天应用
现在我们已经有了一个 WebSocket 服务器，接下来我们需要实现一个简单的聊天应用程序。首先，我们需要在客户端中创建一个 WebSocket 连接，并在连接建立后发送一个欢迎消息。以下是一个简单的客户端实现：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Chat App</title>
</head>
<body>
<div id="messages"></div>
<input type="text" id="input" />
<button id="send">Send</button>
<script>
const socket = new WebSocket("ws://localhost:8000");
socket.onopen = () => {
console.log("Connected to WebSocket server");
socket.send("Welcome to the chat app!");
};
socket.onmessage = (event) => {
console.log(`Received message: ${event.data}`);
const messages = document.getElementById("messages");
const message = document.createElement("p");
message.innerText = event.data;
messages.appendChild(message);
};
const sendButton = document.getElementById("send");
const input = document.getElementById("input");
sendButton.addEventListener("click", () => {
const message = input.value;
socket.send(message);
input.value = "";
});
</script>
</body>
</html>在上面的代码中，我们首先创建了一个 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