如何使用 Deno 的 WebSocket API 来实现在线聊天室？-FunTeaLearn Online Web Tutorials

前言

Web 前端开发的快速发展，推动了 WebSocket 技术的应用。WebSocket 技术可以使 Web 应用程序实现双向实时通信，使得在线聊天室的实现成为可能。而 Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境，它提供了支持 WebSocket API 的标准库。本文将介绍如何使用 Deno 的 WebSocket API 实现在线聊天室。

实现思路

为了实现在线聊天室，我们需要使用 WebSocket 技术建立客户端和服务器之间的实时双向通信。客户端通过 WebSocket 连接服务器，向服务器发送消息，服务器接收消息后进行处理，并将处理结果通过 WebSocket 返回给客户端。为了实现多个客户端之间的聊天，我们需要在服务器端维护一个消息队列，并将消息转发给所有已连接的客户端。

准备工作

在开始正式的代码实现之前，我们需要先安装 Deno 运行时环境。Deno 的安装非常简单，只需要在终端中运行以下命令即可：

$ curl -fsSL https://deno.land/x/install/install.sh | sh

安装完成之后，我们可以在终端中输入以下命令，检查是否安装成功：

$ deno --version

如果成功输出了 Deno 的版本号，则表示安装成功。

代码实现

服务器端代码

首先，我们需要编写服务器端的代码。服务器端需要维护一个消息队列，用于存储客户端发送的消息。在这里，我们采用 Map 结构来实现消息队列，其中键为客户端的 WebSocket 连接，值为一个数组，用于存储该客户端发送的消息。

// www.javascriptcn.com code example
// 导入依赖库
import { serve } from "https://deno.land/std/http/server.ts";
import { acceptable, acceptWebSocket } from "https://deno.land/std/ws/mod.ts";

// 定义消息队列
const messages = new Map();

// 创建 HTTP 服务器
const app = serve({ port: 3000 });
console.log("Server has started on port 3000");

// 处理客户端连接请求
for await (const req of app) {
  if (acceptable(req)) {
    acceptWebSocket({
      conn: req.conn,
      bufReader: req.r,
      bufWriter: req.w,
      headers: req.headers,
    }).then(handleWebSocket);
  }
}

// 处理 WebSocket 连接请求
async function handleWebSocket(ws) {
  console.log("New client connected");

  // 将客户端 WebSocket 连接添加到消息队列中
  messages.set(ws, []);

  // 监听客户端 WebSocket 连接
  for await (const message of ws) {
    console.log(`Received message: ${message}`);

    // 将消息添加到该客户端的消息队列中
    messages.get(ws).push(message);

    // 将消息转发给所有客户端
    for (const client of messages.keys()) {
      if (client !== ws && client.readyState === client.OPEN) {
        client.send(message);
      }
    }
  }

  // 将客户端 WebSocket 连接从消息队列中移除
  messages.delete(ws);
  console.log("Client disconnected");
}

代码解释：

import 语句用于导入需要使用的依赖库。
serve 函数用于创建一个 HTTP 服务器，并监听指定端口。在这里，我们监听了 3000 端口。
acceptable 函数用于判断是否为 WebSocket 连接请求。如果是 WebSocket 连接请求，则通过 acceptWebSocket 函数创建 WebSocket 连接。
在 handleWebSocket 函数中，首先将客户端 WebSocket 连接添加到消息队列中，然后监听客户端 WebSocket 连接。当接收到客户端发送的消息时，将消息添加到该客户端的消息队列中，并将消息转发给所有客户端。最后，将客户端 WebSocket 连接从消息队列中移除。

客户端代码

接下来，我们需要编写客户端的代码。客户端需要通过 WebSocket 连接服务器，向服务器发送消息，接收服务器返回的消息。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>Online Chat</title>
  </head>
  <body>
    <h1>Online Chat Room</h1>
    <div>
      <label for="username">Username:</label>
      <input type="text" id="username" />
    </div>
    <div>
      <label for="message">Message:</label>
      <input type="text" id="message" />
      <button id="send-btn">Send</button>
    </div>
    <div id="chat-box"></div>

    <script>
      const ws = new WebSocket("ws://localhost:3000");

      ws.onmessage = (event) => {
        const messageDiv = document.createElement("div");
        messageDiv.innerText = event.data;
        document.querySelector("#chat-box").appendChild(messageDiv);
      };

      document.querySelector("#send-btn").addEventListener("click", () => {
        const username = document.querySelector("#username").value;
        const message = document.querySelector("#message").value;
        const data = `${username}: ${message}`;
        ws.send(data);
      });
    </script>
  </body>
</html>

代码解释：

首先，我们通过 WebSocket 构造函数创建一个 WebSocket 对象，并指定连接的服务器地址和端口号。
在 ws.onmessage 函数中，当接收到服务器发送的消息时，创建一个 div 元素用于显示该消息，并将其添加到聊天框中。
在发送消息时，首先获取用户名和消息内容，然后将它们拼接成一个字符串，并通过 ws.send 方法发送给服务器。

运行程序

在终端中运行以下命令启动服务器端代码：

$ deno run --allow-net server.ts

在浏览器中打开以下地址，即可访问客户端界面：

http://localhost:3000/client.html

在客户端界面中输入用户名和消息内容，并点击发送按钮即可发送消息给其他客户端。在成功连接服务器后，即可和其他客户端进行实时聊天。

总结

本篇文章介绍了如何使用 Deno 的 WebSocket API 实现在线聊天室。我们首先介绍了实现思路，然后分别编写了服务器端代码和客户端代码，并最终运行程序测试程序是否正常运行。WebSocket 技术广泛应用于实现在线聊天室、实时数据传输等场景，掌握 WebSocket 技术可以为前端开发人员带来更多的开发可能性。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64cec334b5eee0b5256686ec

如何使用 Deno 的 WebSocket API 来实现在线聊天室？

前言