在 Deno 中使用 WebSocket 进行实时聊天室的最佳实践

WebSocket 是一种用于在浏览器和服务器之间建立实时、双向通信的协议。在 Deno 中，我们可以使用标准库提供的 WebSocket 模块来创建 WebSocket 服务器和客户端。

本文将介绍如何在 Deno 中使用 WebSocket 实现一个实时聊天室，包括基本的聊天功能和用户在线状态管理。同时，我们将探讨一些技巧和最佳实践，以帮助开发人员更好地使用 WebSocket。

基本聊天功能

首先，我们需要创建一个 WebSocket 服务器。在 Deno 中，可以使用 serve() 方法创建一个 HTTP 服务器，并将其传递给 WebSocket() 构造函数来创建 WebSocket 服务器。

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

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

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

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

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

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

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

在上面的代码中，我们将 /ws 作为 WebSocket 连接的端点。当客户端连接到该端点时，acceptWebSocket() 将返回一个 WebSocket 实例，并创建一个事件循环来处理来自 WebSocket 的消息。

当我们收到来自客户端的文本消息时，我们需要将消息广播到所有连接的 WebSocket 客户端。为此，我们可以在 handleWebSocketMessage() 方法中使用 ws.send() 方法将消息发送回所有客户端。

接下来，我们需要创建客户端 HTML 页面。该页面将包含一个文本框和一个按钮，以便用户可以向聊天室发送消息。

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

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

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

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

在这个 HTML 页面中，我们通过 new WebSocket("ws://localhost:3000/ws") 创建了一个 WebSocket 客户端，并在收到服务器发送的消息时更新 messages 元素。

现在，我们已经实现了一个基本的实时聊天室。但是，这个聊天室存在一些问题，因为我们并没有考虑多个用户同时连接的情况。接下来，我们将讨论如何管理用户在线状态。

用户在线状态管理

为了管理用户在线状态，我们需要维护一个列表，包含当前所有连接的 WebSocket 客户端的信息。我们可以使用一个对象来存储这些信息，其键为客户端的 ID，值为客户端的 WebSocket 实例和其他信息。

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

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

接下来，我们需要处理新连接的 WebSocket 客户端，并将其添加到客户端列表中。为此，我们可以添加一个 handleWebSocketOpen() 方法，并将其注册为 acceptWebSocket() 的回调函数。

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

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

在上面的代码中，我们生成一个新的随机 ID，将 WebSocket 客户端信息添加到 clients 对象中，并在控制台输出客户端连接消息。

当客户端断开连接时，我们需要从客户端列表中删除它。为此，我们可以添加一个 handleWebSocketClose() 方法，并将其注册为 WebSocket 的 close 事件的回调函数。

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

在上面的代码中，我们从客户端列表中删除客户端信息，并使用 broadcast() 方法将离开消息发送给所有客户端。

现在，我们需要处理来自客户端的聊天消息，并使用 broadcast() 方法将其广播到所有连接的 WebSocket 客户端。在发送消息之前，我们需要检查发送者是否已设置其昵称。如果没有，我们将在发送之前要求他们输入一个昵称。

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

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

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

在上面的代码中，我们添加了 join 类型的消息，用于在客户端连接后设置其昵称。如果客户端尝试发送一个消息而没有设置昵称，则返回一个 "Please set your nickname first" 的错误消息。

最后，我们需要添加一个 broadcast() 方法，以便将消息广播到所有选定的 WebSocket 客户端。

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

现在，我们已经实现了一个功能齐全的实时聊天室。让我们看看如何运行它。

运行实时聊天室

我们可以使用以下命令来启动 Deno 服务器：

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

然后，我们可以在浏览器中打开以下 URL 来访问客户端 HTML 页面：

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

现在，我们可以通过在多个浏览器窗口中打开该 URL，或者使用 curl 或其他 HTTP 工具来模拟多个 WebSocket 客户端，来测试我们的实时聊天室。

结论

WebSocket 是构建实时 web 应用程序的强大工具。在 Deno 中，我们可以使用标准库提供的 WebSocket 模块，轻松地创建 WebSocket 服务器和客户端，以建立实时、双向通信。

本文介绍了在 Deno 中使用 WebSocket 实现实时聊天室的最佳实践。我们讨论了如何管理用户在线状态、发送聊天消息以及广播信息给所有连接的 WebSocket 客户端。

通过本文，我们希望读者可以更好地理解 WebSocket 的工作原理，并能够在 Deno 中使用 WebSocket 构建高效、可伸缩的实时 web 应用程序。

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

阅读全文

猜你喜欢

  • 响应式设计下优化网站加载速度的技巧

    在今天的互联网时代，移动设备已经成为了人们生活和工作中不可或缺的一部分。为了保证在不同设备上都能良好地显示网站内容，响应式设计已成为了不可或缺的一部分。然而，响应式设计会带来网站加载速度下降的问题。

    6 天前
  • 在 Hapi.js 中使用 Sequelize 操作 MySQL 数据库

    在现代 Web 开发中，前端和后端已经越来越模糊。前端开发人员必须掌握后端开发技能以便于进行全栈开发。本文将介绍如何在 Hapi.js 中使用 Sequelize 操作 MySQL 数据库。

    6 天前
  • ESLint 的 10 个最佳练习

    介绍 ESLint 是一款用于 JavaScript 代码检查的工具。它可以帮助前端开发者在写代码时发现潜在的问题，提高代码的质量和可维护性。然而，ESLint 本身并不是万能的，在使用时还需要遵循一...

    6 天前
  • Jest 和 Enzyme 结合进行响应式组件测试

    在前端开发中，测试是一个至关重要的部分。Jest 和 Enzyme 是两个非常受欢迎的测试框架之一，它们都能有效地帮助开发人员进行测试。本文将详细介绍 Jest 和 Enzyme 结合进行响应式组件测...

    6 天前
  • 使用 ECMAScript 2020 的 Class Property Declarations 减少代码复杂度

    ECMAScript 2020 带来了许多新功能，其中之一是类属性声明 (Class Property Declarations)。这项新功能为前端开发人员提供了一种简化代码的方式，从而减少代码复杂度...

    6 天前
  • Fastify 帮助解决 CORS 问题的技巧

    CORS 是一种浏览器安全策略，用于防止跨域攻击。 在前端开发中，开发人员通常需要与不同来源的后端 API 进行交互，并且在该过程中可能会遇到 CORS 问题，这将导致浏览器阻止从其他来源加载资源。

    6 天前
  • 如何使用 GraphQL 响应数据的过滤器？

    GraphQL 是一种查询语言，能够更好地应对多种数据需求。在前端开发中，GraphQL 已经变得非常流行，因为它允许开发人员获取所需的数据。GraphQL 通过查询和变异语句使用 schema 的形...

    6 天前
  • 如何在 Mocha 测试框架中测试 Web 应用程序？

    前端开发人员必须始终确保他们的 Web 应用程序在各种情况下都能正常运行，而测试是这个过程中不可或缺的一步。Mocha 是一个流行的 JavaScript 测试框架，它可以帮助开发人员编写可靠的单元测...

    6 天前
  • 如何在 Cypress 中检查 Cookie

    介绍 Cypress 是一个基于 JavaScript 的自动化测试工具，它提供了强大的 API 和一系列内置的功能，使得测试变得简单、快速和可靠。Cookie 是基于浏览器的存储机制，它们可以用于多...

    6 天前
  • 如何使用无障碍技术提高用户交互

    在前端开发中，良好的用户交互体验是非常重要的。然而，我们也需要关注那些有视觉或听觉障碍等残疾人群体的用户。使用无障碍技术可以帮助我们提高这部分用户的体验，并且也有助于提高整个网站的可用性。

    6 天前
  • Flask-RESTful 中使用 Marshmallow 进行数据验证和序列化

    Flask-RESTful 是一个基于 Flask 的构建 Web API 的扩展。在 Flask-RESTful 中，使用 Marshmallow 进行数据验证和序列化是一种很好的方法。

    6 天前
  • Kubernetes 中服务的外部暴露

    在 Kubernetes 中，想要让服务能够被外部访问，需要对服务进行外部暴露。下面将介绍 Kubernetes 中三种常用的服务外部暴露方式，以及它们的使用场景和具体操作方法。

    6 天前
  • Babel 帮你快速学习 ECMAScript | ES6 开发环境设置

    随着 ES6 的推出，前端开发者们开始迎来了一个全新的世界。新的 JavaScript 标准引入了许多新的语法和功能，这些更新显著提高了开发者的效率和代码的可读性。

    6 天前
  • RxJS 中的自定义操作符及其实现方式

    RxJS是一个流式编程的库，它提供了一些强大的操作符（operator），可以用于处理数据流。但是，这些操作符并不能满足所有的需求，这时候就需要使用自定义操作符了。

    6 天前
  • Promise 中 throw 和 reject 的使用区别及注意事项

    Promise 是 JavaScript 中用于异步编程的一个重要工具。在使用 Promise 时，我们经常会用到 throw 和 reject，它们各自有什么区别及使用注意事项呢？本文将介绍这些问题...

    6 天前
  • ES10 中重要的变化：Array.sort() 使用不稳定排序算法

    ES10 中重要的变化：Array.sort() 使用不稳定排序算法 在 JavaScript 中，排序是一个非常重要且常见的操作。在 ES10 中 Array.sort() 方法发生了重大变化。

    6 天前
  • ESLint 支持 ECMAScript 标准的规则配置

    ESLint 是一个非常流行的 JavaScript 代码风格检测工具，它可以方便地检测代码中潜在的问题和提供代码规范建议。与传统的代码检测工具不同的是，ESLint 的规则配置非常灵活，可以根据开发...

    6 天前
  • Tailwind CSS 和 Vue.js 的集成和用法

    Tailwind CSS 是当前比较流行的一款 CSS 框架，它与 Vue.js 结合可以方便我们快速搭建复杂的 frontend。在本文中，我们将详细介绍 Tailwind CSS 和 Vue.js...

    6 天前
  • ECMAScript 2020 中的 Optional Chaining 操作符：如何优雅的处理 undefined 和 null

    在编写前端代码时，经常需要在获取某个对象的属性或方法前进行判断其是否为 null 或 undefined，在过去，我们常常使用繁琐、冗长的代码来实现，而在 ES2020 中引入了 Optional C...

    6 天前
  • 在 Angular 应用中使用 Firebase 进行数据管理的最佳实践

    Firebase 是 Google 推出的一款云数据库工具，提供实时数据同步和云存储等功能，适用于多种场景下的数据管理。而 Angular 是一款流行的前端框架，它提供了与 Firebase 无缝集成...

    6 天前

相关推荐

    暂无文章