如何在 Deno 中使用 WebSockets 进行群聊-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，实时通信成为了越来越重要的一环。WebSockets 是一种实现实时通信的技术，它能够建立一种持久的连接，允许客户端和服务器之间进行双向的数据传输。Deno 是一个新兴的 JavaScript 运行环境，它提供了原生支持 WebSockets 的能力，让我们能够更加轻松地实现实时通信功能。在本文中，我们将会详细介绍如何在 Deno 中使用 WebSockets 进行群聊。

前置知识

在阅读本文之前，你需要掌握以下基础知识：

基本的 JavaScript 和 TypeScript 语法
HTTP 协议和 WebSocket 协议的基本概念

实现群聊功能

在 Deno 中实现群聊功能，我们需要使用到 WebSockets。代码的基本思路是，建立一个 WebSocket 服务器，接收客户端的连接请求，并为每个用户分配一个唯一的标识符。每当有客户端发送一条消息时，服务器会将该消息广播给所有在线用户。以下是实现群聊功能的代码：

import { serve } from 'https://deno.land/std/http/server.ts';
import { acceptWebSocket, isWebSocketCloseEvent } from 'https://deno.land/std/ws/mod.ts';

const PORT = 3000;

let clients = new Map<string, WebSocket>();

async function handleWs(sock: WebSocket) {
  console.log('socket connected!');

  // Generate unique identifier for this client
  const id = Math.random().toString(36).slice(2);

  // Store client
  clients.set(id, sock);

  try {
    for await (const ev of sock) {
      if (typeof ev === 'string') {
        // Received message
        console.log('Received message:', ev);

        // Broadcast message to all clients
        for (const client of clients.values()) {
          await client.send(`[${id}]: ${ev}`);
        }
      } else if (isWebSocketCloseEvent(ev)) {
        // Client disconnected
        console.log(`Socket closed: code=${ev.code}, reason=${ev.reason}`);
        clients.delete(id);
        break;
      }
    }
  } catch (err) {
    console.error(`Failed to receive frame: ${err}`);
    if (!sock.isClosed) {
      await sock.close(1000).catch(console.error);
    }
  }
}

async function startServer() {
  console.log(`WebSocket server running on :${PORT}`);
  for await (const req of serve(`:${PORT}`)) {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    })
      .then(handleWs)
      .catch(async (err) => {
        console.error(`Failed to accept websocket: ${err}`);
        await req.respond({ status: 400 });
      });
  }
}

await startServer();

这段代码首先创建了一个 Map 对象 clients 来存储所有连接到服务器的客户端，其键为每个客户端分配的唯一标识符，值为对应客户端的 WebSocket 对象。当有新的客户端连接到服务器时，生成一个唯一标识符，并且将其和该客户端的 WebSocket 对象存储到 clients 中。

然后，代码进入一个无限循环中，接收客户端发送的消息。如果有新的消息，我们就将其格式化为 [唯一标识符]: 消息内容 的形式，并且广播给所有当前在线的客户端。如果收到一个 WebSocket 连接关闭的事件，我们就需要将该客户端从 clients 中删除。

最后，我们创建一个 HTTP 服务器，监听特定的端口，当有 WebSocket 连接请求到达时，调用 acceptWebSocket 函数处理该请求。如果有多个客户端连接到服务器，服务器的实际运行效果如下图所示：

总结

本文介绍了如何在 Deno 中使用 WebSockets 实现群聊功能，并且提供了详细的代码实现和运行效果。通过学习本文，我们可以更加深入地了解 WebSockets 的使用方法，并且掌握在 Deno 中使用 WebSockets 实现实时通信的技巧。如果你正在学习 Deno 或者实时通信技术，本文将会是一个非常有价值和有用的参考。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65916032eb4cecbf2d68c0a8