在 Deno 中使用 WebSockets 多人聊天室的实现

面试官：小伙子，你的代码为什么这么丝滑？

概述

WebSocket 是用于在客户端和服务器之间建立双向实时通信通道的协议。Deno 是一个安全的 JavaScript/TypeScript 运行时环境。本文将介绍如何在 Deno 中使用 WebSocket 实现多人聊天室功能。

WebSocket 基础

WebSocket API 包含在 Deno 标准库中。客户端和服务器可以通过以下代码创建一个 WebSocket 连接：

----- -- - --- ---------------------------------

WebSocket 服务器需要监听 connection 事件，并通过该事件在客户端之间传递消息。以下是一个简单的 WebSocket 服务器实现：

------ - ----- - ---- ---------------------------------------
------ - ----------- --------------- - ---- ----------------------------------

----- ------ - ------- ----- ---- ---

------------------- ------- -- ---- -------

--- ----- ------ --- -- ------- -
  -- ----------- --- ----- -- ---------------- -
    -----------------
      ----- ---------
      ---------- ------
      ---------- ------
      -------- ------------
    --
      ----------------------
      ----------------------
  -
-

----- -------- ----------------------- ---------- -
  -- ----
-

在 handleWebSocket 函数中，我们可以处理收到的消息并将其发送回客户端。以下是一个简单的处理函数，将从某个客户端收到的消息广播给其他客户端：

----- -------- ----------- - ---

----- -------- ----------------------- ---------- -
  ---------------------

  --- ----- ------ ----- -- ------- -
    -- ------- ----- --- --------- -
      --- ------ ------ -- -------- -
        -- ------- --- ------ -- ----------------- --- --------------- -
          -------------------
        -
      -
    -
  -

  --------------------------------------- ---
-

以上代码将每个新连接推送到 clients 数组中，并对每个连接上的 string 消息进行广播。在 for await 循环中处理消息，并且在收到一个关闭事件时，从 clients 数组中删除该连接。

实现聊天室

我们使用 ES6 class 语法来实现聊天室类，该类将扩展 WebSocket 类。聊天室需要处理以下事件：

  • connection: 一个新连接时触发，将其推送到 clients 数组中。
  • message: 接收到一个消息时触发，在聊天室中广播该消息。
  • close: 断开连接时触发，将其从 clients 数组中删除。
----- -------- ------- --------- -
  -------- ----------- - ---

  -------------------- ------ - --- - ----------------- -
    ---------------
    ----------------------------------- ----------------------------------
    -------------------------------- -------------------------------
    ------------------------------ -----------------------------
  -

  ----- ----------------------- -------------------------------- -
    ----- - ------ - - ------
    --------------------------
  -

  ----- -------------------- ----------------------------- -
    ----- - ----- ------ - - ------
    -- ------- ---- --- --------- -
      --- ------ ------ -- ------------- -
        -- ------- --- ------ -- ----------------- --- --------------- -
          ------------------
        -
      -
    -
  -

  ----- ------------------ --------------------------- -
    ----- - ------ - - ------
    ------------------------------------------------- ---
  -
-

现在我们可以将此类用作 WebSocket 服务器的事件处理程序。以下是使用 ChatRoom 类的完整服务器实现：

------ - ----- - ---- ---------------------------------------
------ - ---------------- ---------- - ---- ----------------------------------

----- ------ - ------- ----- ---- ---

------------------- ------- -- ---- -------

--- ----- ------ --- -- ------- -
  -- ----------- --- ----- -- ---------------- -
    -----------------
      ----- ---------
      ---------- ------
      ---------- ------
      -------- ------------
    --
      -------------- -- -
        ----- ---- - --- -----------------
      --
      ----------------------
  -
-

----- -------- ------- --------- -
  -------- ----------- - ---

  -------------------- --------- - ----------------- -
    ---------------
    ----------------------------------- ----------------------------------
    -------------------------------- -------------------------------
    ------------------------------ -----------------------------
  -

  ----- ----------------------- -------------------------------- -
    ----- - ------ - - ------
    --------------------------
  -

  ----- -------------------- ----------------------------- -
    ----- - ----- ------ - - ------
    -- ------- ---- --- --------- -
      --- ------ ------ -- ------------- -
        -- ------- --- ------ -- ----------------- --- --------------- -
          ------------------
        -
      -
    -
  -

  ----- ------------------ --------------------------- -
    ----- - ------ - - ------
    ------------------------------------------------- ---
  -
-

结论

在 Deno 中使用 WebSocket 实现多人聊天室非常简单。只需使用 WebSocket API 和我们编写的聊天室类即可。通过使用该示例代码，你可以轻松开始构建自己的实时应用程序，如聊天室、实时评论等。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6706199bd91dce0dc8583c69

阅读全文

猜你喜欢

  • 在 Node.js 中用 GraphQL 构建大型 API 系统

    GraphQL 是一种新型的 Web API 查询语言，它允许客户端指定需要获取的数据并精确控制返回的数据结构。相比于传统的 RESTful API，GraphQL 可以极大地简化前后端之间的信息交换...

    9 天前
  • 性能优化：避免在大循环中使用 eval 函数

    在前端开发中，我们经常需要处理大量数据和循环操作。但是，如果在循环中使用 eval 函数，会导致严重的性能问题。本文将介绍 eval 函数的工作原理、使用场景和如何避免在大循环中使用 eval 函数。

    9 天前
  • 使用 ES9 中的 ArrayBuffer.prototype.transfer() 快速传输数据

    什么是 ArrayBuffer？ 在 JavaScript 中，ArrayBuffer 对象是一个固定长度的二进制数据缓冲区。它是通过传递一个整数来创建的，该整数表示所需的缓冲区大小（以字节为单位），...

    9 天前
  • Deno 中常见的编码错误及解决方案

    前言 Deno 是一款基于 JavaScript 和 TypeScript 的运行时环境，它提供了许多现代化的功能和 API，使得它成为前端开发中备受推崇的工具之一。

    9 天前
  • 如何在 Vue.js 的 SPA 中使用 LocalStorage 来存储数据？

    当开发一个 Vue.js 的 SPA 应用程序时，通常需要使用一些技巧来管理数据。其中，使用 LocalStorage 来存储数据是一种很好的选择。在这篇文章中，我们将讨论如何在 Vue.js 的 S...

    9 天前
  • Fastify框架的异常处理机制详解

    Fastify是一种用于构建Web应用程序和API的快速和低开销开源Web框架。其中一个主要的优点是，它的代码质量非常高，并且针对性能进行了优化。在本文中，我们将介绍Fastify框架的异常处理机制，...

    9 天前
  • Linux 下使用 PM2，从部署到监控

    简介 PM2 是一个流行的、跨平台的 Node.js 进程管理工具。它可以帮助开发人员快速部署和管理 Node.js 应用程序，从而提高应用程序的可靠性和可扩展性。

    9 天前
  • 无障碍性能问题的快速定位技巧

    作为前端开发者，我们必须考虑到不同用户的需求和体验，保证我们的网站或应用能够被尽可能多的人所访问和使用。而一个重要的方面就是无障碍性能（Accessibility）。

    10 天前
  • Angular 中的 RxJS 连接

    Web 应用程序中的数据流管理变得越来越重要。RxJS 是一种将异步和事件驱动的程序转化为可观察序列的工具，它有助于编写更清晰、更稳定以及更健壮的代码。在 Angular 中，RxJS 已成为了连接组...

    10 天前
  • 如何让 Babel 的 Class-properties 插件在 React 项目中正常工作？

    现在，React 的开发变得越来越流行，越来越多的开发人员开始使用 ES6 语法或者范式进行面向对象编程。但是，一个棘手的问题是，在许多时候，Babel 的 Class-properties 插件在 ...

    10 天前
  • TypeScript 错误解析：类型 “unknown” 无法分配给类型 “string”

    当使用 TypeScript 开发前端应用时，时常会出现 unknown 类型无法分配给 string 类型的错误。这种错误通常出现在将变量从一个未知类型的值转换为字符串的情况下。

    10 天前
  • 用鉴权模式保护 RESTful API

    什么是 RESTful API 在 WEB 开发中，API 是应用程序编程接口的缩写，是软件系统中不同组件之间的交互的约定。它通过访问数据来执行某些功能，并使用特定的编程语言编写。

    10 天前
  • 在大型单页应用程序中使用 GraphQL 的技巧

    在大型单页应用程序中使用 GraphQL 的技巧 GraphQL 是一种用于构建 API 的查询语言，它可以显著提高前端开发人员处理数据的效率。在大型单页应用程序中使用 GraphQL 可以提供更好的...

    10 天前
  • 如何解决 Cypress 测试框架中的登录鉴权问题？

    在前端开发中，测试是一个重要的环节。而 Cypress 是一个流行的前端自动化测试框架，然而，在使用 Cypress 进行测试时，登录鉴权问题可能会给我们带来困扰。

    10 天前
  • 解决 ES8 版本下使用 Array.values() 方法的问题

    前言 ES8 中新增了一个 Array.values() 方法，该方法会返回一个迭代器对象，包含数组中每个元素的值。虽然该方法在处理数组时十分方便，但是在某些情况下，使用该方法可能会遇到问题。

    10 天前
  • MongoDB 的故障排查方法分享

    前言 在使用 MongoDB 进行前端开发过程中，有可能遇到一些故障。这篇文章将分享一些常见的故障排查方法，以及避免故障的最佳实践。 故障排查方法 连接问题 如果连接 MongoDB 的时候出现问题，...

    10 天前
  • Next.js 如何优化渲染速度？

    前言 Next.js 是一款基于 React 的服务器端渲染框架，它提供了出色的性能和开箱即用的配置。在使用 Next.js 构建应用程序时，优化渲染速度是至关重要的，因为它可以缩短首次加载时间、提高...

    10 天前
  • Webpack 优化技巧：精细化控制代码打包

    随着现代 Web 应用的复杂性不断提高，前端工程师们着重关注的是如何将大量代码组织好并在构建过程中优化它。幸运的是，Webpack 可以帮助我们实现这一点。在本文中，我将介绍一些针对 Webpack ...

    10 天前
  • 如何在 Jest 中测试 Node.js 应用程序

    Jest 是一个流行的 JavaScript 测试框架，用于编写单元测试、集成测试和端到端测试。它广泛用于前端和后端开发，也可以用于测试 Node.js 应用程序。

    10 天前
  • 解决 Express.js 版本冲突问题

    Express.js 是一种流行的 Node.js Web 应用程序框架，它简化了构建 Web 应用程序的过程。然而，在使用 Express.js 时，经常会遇到版本冲突问题，尤其是在使用第三方库时更...

    10 天前

相关推荐

    暂无文章