如何在 Deno 中构建 WebSockets 聊天应用程序？

前言

WebSockets 聊天应用程序是一个常见的 Web 开发项目。它使用 WebSocket 协议来实现实时通信，具有很多优点，例如协议简单、实时性好、可以节省带宽等等。在本文中，您将学习如何在 Deno 中构建一个简单的聊天应用程序，该应用程序将使用 WebSocket 实现实时聊天功能。

前提知识

为了理解本文，您需要具备以下知识：

  • TypeScript：本文中代码示例均使用 TypeScript 编写。如果您不熟悉 TypeScript，可以先阅读 TypeScript 入门 文档。
  • Deno：本文将使用 Deno 运行环境来构建应用程序。如果您还不了解 Deno，请先查看 Deno 入门 文档。

步骤

在本节中，我们将按照以下步骤构建聊天应用程序：

  1. 创建 WebSocket 服务器。
  2. 处理 WebSocket 连接请求。
  3. 处理 WebSocket 发送的消息。
  4. 处理 WebSocket 连接断开。

1. 创建 WebSocket 服务器

在 Deno 中，我们可以使用标准库中的 WebSocketServer 类创建 WebSocket 服务器。为此，我们需要导入 ws 模块并创建 WebSocketServer 实例，如下所示：

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

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

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

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

在上述代码中，我们创建了一个 HTTP 服务器并将其绑定到了指定的端口上。然后，我们创建了一个 WebSocketServer 实例并开始监听连接请求。当收到连接请求时，我们调用上面的 acceptWebSocket() 方法来接受连接请求，然后调用 handleWebSocket() 方法来处理 WebSocket 连接。

2. 处理 WebSocket 连接请求

在本节中，我们将实现 handleWebSocket() 方法来处理 WebSocket 连接请求。当连接建立时，我们将对连接进行身份验证，然后向客户端发送欢迎消息。

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

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

在上述代码中，我们调用 authenticate() 方法来对 WebSocket 连接进行身份验证。如果验证失败，我们将立即关闭连接。否则，我们向客户端发送欢迎消息，并广播有新用户加入的信息。然后我们开始处理 WebSocket 发送的消息，并在关闭连接前从用户列表中移除该用户。

3. 处理 WebSocket 发送的消息

在本节中，我们将实现 handleWebSocketMessages() 方法来处理 WebSocket 发送的消息。当客户端发送消息时，我们将对其进行解析并广播该消息给所有连接的客户端。

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

在上述代码中，我们将消息解析为 JSON 对象，并根据 type 属性决定广播的方式。如果 type 为 "message"，则我们将广播文本消息。否则，我们将忽略该消息。

4. 处理 WebSocket 连接断开

在本节中，我们将实现 broadcastMessage() 方法来广播消息给所有连接的客户端。该方法将遍历所有连接的 WebSocket 实例并向它们发送消息。

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

在上述代码中，我们将遍历 WebSocket 服务器中的所有客户端实例。如果客户端已经关闭，则我们将从用户列表中移除该用户。否则，我们将检查客户端的 userId 属性是否与 to 参数匹配。如果客户端与目标用户不匹配，则我们将向其发送消息。

完整代码示例

下面是完整的代码示例：

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

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

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

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

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

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

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

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

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

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

总结

在本文中，我们介绍了如何在 Deno 中使用 WebSocket 协议构建实时聊天应用程序。我们使用 WebSocketServer 类创建了 WebSocket 服务器，并通过遍历所有客户端实例来对消息进行广播。虽然本文中的应用程序非常简单，但您可以使用类似的技术来构建更复杂的应用程序，例如多用户游戏、实时通知等等。

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

阅读全文

猜你喜欢

  • Angular 中 RxJS 的使用和常见问题解决方案

    在现代前端开发中，数据流和状态管理是非常重要的一个部分。RxJS 是一个流式编程库，可用于处理异步数据流操作。在 Angular 中，RxJS 成为了其主要的异步处理技术。

    1 年前
  • 使用 Jest 测试 React 或 Vue 应用的最佳实践

    前言 在开发前端应用的过程中，我们不可避免地需要面临各种各样的问题，而其中一个重要的问题就是如何测试我们的应用。特别是在大型项目和团队中，测试的重要性不言而喻。Jest 是一种流行的 JavaScri...

    1 年前
  • 如何在 Enzyme 中测试 React 组件与 Redux 的结合使用

    React 是一种流行的前端框架，它被广泛使用于 Web 应用程序的开发中。随着应用程序越来越复杂，使用 Redux 管理应用程序的状态已经成为标准做法。在进行 React 和 Redux 开发的过程...

    1 年前
  • 详解 Sass 编译后源码问题

    在前端开发过程中，CSS 是必不可少的一部分。但是 CSS 的书写方式相对繁琐，难以维护。为了解决这个问题，Sass（Syntactic Awesome StyleSheets）应运而生。

    1 年前
  • ES9 Async 迭代器和生成器详解

    前言 ES9 在异步方面的改进中，最主要的特性就是引入了 Async 迭代器和生成器。 对于每一个 JavaScript 程序员来说，理解迭代器和生成器是非常重要的，因为它们是使用 JavaScrip...

    1 年前
  • Node.js 中如何使用 WebSocket 进行实时通讯

    WebSocket 是一种在网页浏览器和服务器之间进行实时通讯的技术。与传统的 HTTP 请求不同，WebSocket 允许服务器向客户端发送任意数据，而不需要客户端发送请求。

    1 年前
  • Mongoose 中如何使用 $set 和 $addToSet 修改数组

    Mongoose 是一个 Node.js 的 MongoDB 驱动程序和对象模型工具，它为开发者们提供了一些非常便利的 API，可以轻松地对 MongoDB 操作进行抽象和接口封装。

    1 年前
  • 利用 Socket.io 和 Node.js 实现前端实时应用程序

    前言 随着互联网的不断发展，人们对于实时交互的需求也越来越高，对于前端工程师来说需要处理的问题也不再局限于渲染页面和获取数据，而是需要实现更加复杂的实时应用程序。本文将介绍如何利用 Socket.io...

    1 年前
  • 解决 Tailwind CSS 使用步骤中的一些问题

    什么是 Tailwind CSS Tailwind CSS 是一种用于构建现代化网页界面的低级 CSS 框架。它提供了一组命名用法，可以大大缩减开发人员编写 CSS 的时间和工作量。

    1 年前
  • 在 Node.js 和 Express.js 中使用 EJS 模板引擎

    EJS 是一种简单的 JavaScript 模板引擎，用于将数据呈现为 HTML 页面。它易于使用、可扩展，并且与 Node.js 和 Express.js 兼容。

    1 年前
  • 优化 Headless CMS 性能的几种方法

    最近，越来越多的开发者开始使用 Headless CMS 作为他们的站点内容管理器。这种 CMS 在实现多渠道发布的同时，也可以增强站点性能，但如果不注意优化，可能会导致站点性能下降。

    1 年前
  • 使用 ECMAScript 2017 (ES8) 中的 padStart() 和 padEnd() 方法来填充字符串

    在前端开发中，字符串处理是一个必不可少的环节。ECMAScript 2017 (ES8) 中新增了 padStart() 和 padEnd() 方法，它们主要用于填充字符串。

    1 年前
  • Redis 持久化机制及如何避免数据丢失

    Redis 是一个非常流行的高性能 Key-Value 存储数据库，但在数据持久化方面，Redis 有着自己特殊的需求和难点。本文将讨论 Redis 的两种持久化机制以及如何应用它们来避免数据丢失。

    1 年前
  • MongoDB 教程：如何使用 MongoDB Atlas

    介绍 MongoDB是一个基于NoSQL的开源文档型数据库。它具有高度可扩展性、性能优良和灵活的数据模型，支持多种语言和平台。在前端开发中，我们常常会使用MongoDB存储和操作数据。

    1 年前
  • PWA 打开缓慢的问题分析与解决

    前言 PWA（Progressive Web App，渐进式Web应用程序）是一种结合了Web应用程序和原生应用程序的技术，能够将Web应用程序更好地集成到移动设备中，提供更高质量和更原生的用户体验。

    1 年前
  • Babel-runtime 的作用及使用方法

    Babel-runtime 是 Babel 提供的一个工具库，提供了一些在开发过程中常用的函数和对象，能够帮助开发者解决运行时的兼容性问题。在这篇文章中，我们将探讨 Babel-runtime 的作用...

    1 年前
  • Flexbox 解决在 IE11 中子元素宽度超过父元素的 bug

    在前端开发过程中，我们经常会遇到子元素宽度超过父元素的情况。这通常会导致页面元素布局混乱，影响用户体验。特别是在 IE11 中，这个问题经常出现，给开发带来了很多麻烦。

    1 年前
  • ECMAScript 2020 (ES11) 中的 Object.fromEntries() 使用指南

    ECMAScript 2020（简称 ES11）是由 JavaScript 社区制定的一项新的标准，其中包含了许多有用的新特性。其中一个非常有用的新特性是 Object.fromEntries() 方...

    1 年前
  • 在 Deno 中使用 WebSocket 时遇到问题？这些提示可能会有所帮助

    WebSocket 是一种用于客户端和服务器之间进行实时双向通信的协议。在前端领域中，我们经常使用 WebSocket 来开发聊天室、游戏等实时应用。而在 Deno 中使用 WebSocket 也是很...

    1 年前
  • ES6 Generator 异步编程的使用方法及其应用

    随着前端技术的不断发展，异步编程已经成为了一个不可避免的话题。在过去，我们通常使用回调函数来处理异步任务，但是随着项目越来越复杂，回调嵌套的层数也越来越深，代码的可读性和可维护性变得越来越差。

    1 年前

相关推荐

    暂无文章