Deno 中使用 WebSocket 实现聊天室-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种在 Web 应用程序中实现双向通信的技术，它允许客户端和服务器之间进行实时的数据传输。在 Deno 中，我们可以使用标准库中的 WebSocket 模块来实现 WebSocket 通信。在本文中，我们将介绍如何使用 Deno 中的 WebSocket 模块实现一个简单的聊天室。

准备工作

在开始之前，你需要确保已经安装了 Deno。如果没有安装，请访问 Deno 官网下载并安装最新版本的 Deno。

创建 WebSocket 服务器

首先，我们需要创建一个 WebSocket 服务器。在 Deno 中，我们可以使用 WebSocket 模块中的 serve() 函数来创建一个 WebSocket 服务器。以下是创建 WebSocket 服务器的示例代码：

// javascriptcn.com 代码示例
import { serve } from "https://deno.land/std/http/server.ts";
import { acceptWebSocket, acceptable } from "https://deno.land/std/ws/mod.ts";

const server = serve({ port: 8080 });
console.log("WebSocket server started on port 8080");

for await (const req of server) {
  if (req.method === "GET" && acceptable(req)) {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    }).then(handleWebSocket);
  }
}

async function handleWebSocket(ws: WebSocket) {
  console.log("WebSocket connected");

  for await (const event of ws) {
    if (typeof event === "string") {
      console.log(`Received message: ${event}`);
      broadcastMessage(event);
    }
  }
}

function broadcastMessage(message: string) {
  for (const client of clients) {
    client.send(message);
  }
}

在上面的示例代码中，我们首先使用 serve() 函数创建一个 HTTP 服务器，然后检查每个传入的请求是否是一个 WebSocket 连接请求。如果是，我们就使用 acceptWebSocket() 函数来接受这个 WebSocket 连接，并将其传递给 handleWebSocket() 函数进行处理。

在 handleWebSocket() 函数中，我们可以监听来自客户端的消息，并将其广播给所有连接到服务器的客户端。在本例中，我们使用一个简单的数组来存储所有连接到服务器的客户端。

现在，我们已经成功创建了一个 WebSocket 服务器，可以接受来自客户端的连接，并可以广播客户端发送的消息。

创建 WebSocket 客户端

在本例中，我们将使用 JavaScript 来创建 WebSocket 客户端。以下是创建 WebSocket 客户端的示例代码：

// javascriptcn.com 代码示例
const ws = new WebSocket("ws://localhost:8080");

ws.onopen = function () {
  console.log("WebSocket connected");
};

ws.onmessage = function (event) {
  console.log(`Received message: ${event.data}`);
};

document.getElementById("sendButton").onclick = function () {
  const message = document.getElementById("messageInput").value;
  ws.send(message);
};

在上面的示例代码中，我们首先创建一个 WebSocket 实例，并将其连接到我们之前创建的 WebSocket 服务器。然后，我们监听 WebSocket 的 onopen 和 onmessage 事件，分别在 WebSocket 连接建立和接收到消息时进行处理。最后，我们在发送按钮的点击事件中使用 send() 方法来向服务器发送消息。

创建聊天室界面

最后，我们需要创建一个简单的聊天室界面来展示我们的聊天室。以下是一个简单的聊天室界面示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>

<head>
  <title>Deno Chat Room</title>
</head>

<body>
  <div id="messageList"></div>
  <input id="messageInput" type="text" />
  <button id="sendButton">Send</button>

  <script type="module" src="./chat.js"></script>
</body>

</html>

在上面的示例代码中，我们创建了一个包含消息列表、消息输入框和发送按钮的简单聊天室界面，并将其连接到我们之前创建的 WebSocket 客户端。

总结

在本文中，我们介绍了如何使用 Deno 中的 WebSocket 模块来创建一个简单的聊天室。我们首先创建了一个 WebSocket 服务器，然后使用 JavaScript 创建了一个 WebSocket 客户端，并最后创建了一个简单的聊天室界面来展示我们的聊天室。通过本文的学习，你可以了解 WebSocket 的基本原理，并掌握 Deno 中使用 WebSocket 实现实时通信的方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650bf84095b1f8cacd60a5f0