使用 Node.js 创建基于 SSE 的聊天应用

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在现代的 Web 开发中,聊天应用已经成为非常普遍的需求。在这篇文章中,我们将介绍如何使用 Node.js 创建一款基于 SSE(Server-Sent Events)的聊天应用。SSE 是一种能够使服务器实时向客户端发送数据的 Web 技术,相比于 WebSocket,SSE 更加轻量级。

准备工作

在开始本教程之前,您需要先安装并配置好 Node.js 和 npm。如果您还没有安装它们,请参照 Node.js 官方网站上的指南进行安装。

创建 Node.js 项目

首先,我们需要创建一个新的 Node.js 项目。在终端中输入以下命令:

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

这将会创建一个新的 Node.js 项目并在项目根目录下创建一个 package.json 文件。接下来,我们需要安装一些依赖项:

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

在这里,我们使用 Express 框架作为聊天应用的服务器,nodemon 包用于监听文件变化并自动重启服务器。

创建服务器端代码

在项目根目录下,创建一个名为 index.js 的服务器端代码文件。将以下代码添加到 index.js 文件中:

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

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

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

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

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

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

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

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

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

这段代码定义了一个使用 Express 构建的服务器,该服务器将监听 3000 端口进行连接。我们向 /events 路径注册了一个 GET 请求,从而创建了一个 SSE 流。我们还向 /messages 路径注册了一个 POST 请求,该请求用于向 messages 数组中添加新的消息。

在上面的代码中,res.write() 方法用于向 SSE 流中发送消息,其格式如下:

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

其中,message 是一个 JSON 对象,表示一条聊天消息。需要注意的是,在每条消息后面必须添加两个换行符,以便将其与下一条消息分隔开。

创建客户端代码

客户端代码将 SSEE 流与聊天应用 UI 进行连接。在项目根目录下,创建一个名为 index.html 的文件,并将以下代码添加到文件中:

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

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

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

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

此代码将会向 /events 路径发起带有 EventSource 实例的 GET 请求,以便与服务器上的 SSE 流建立连接。当有新消息到达时,我们将它们解析成 JSON 对象并将它们添加到聊天 UI 中。我们还需要在 form 元素上对 submit 事件进行监听,以便在用户提交新消息后将其发送到服务器。

运行代码

现在,我们已经成功创建了一个基于 SSE 的聊天应用!我们可以打开新的终端窗口并输入以下命令以启动服务器:

--- --- -----

在另一个终端窗口中,我们可以使用以下命令启动客户端并在浏览器中打开页面:

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

现在,我们可以在浏览器中体验基于 SSE 的聊天功能了!

结论

本文介绍了如何使用 Node.js 创建基于 SSE 的聊天应用。我们使用 Express 构建了一个服务器,该服务器创建了一个 SSE 流,并允许客户端向 messages 数组中添加新的消息。我们还创建了基本的客户端 UI,以便我们可以查看和发送聊天消息。

SSE 虽然没有 WebSocket 那么流行,但通过了解 SSE 的工作原理,可以让我们更好地理解与实现实时 Web 应用的相关技术。

示例代码

完整的示例代码可以在我的 GitHub 上找到:

https://github.com/yumoL/chat-app-sse

建议您下载并运行代码,以便更好地理解本文中的代码实现。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67146956ad1e889fe213af31


猜你喜欢

  • 解决 Koa 应用中缺失响应的问题

    在进行 Koa 应用的开发中,我们经常会遇到请求没有响应的情况,而这种情况在大多数情况下是由于程序中缺少正确的响应所导致的。在本文中,我们将深入探讨如何诊断和解决这种问题,并提供一些指导性建议。

    19 天前
  • Redux 如何处理异常及错误

    Redux 是一个流行的 JavaScript 数据库,它可以帮助前端开发者轻松管理应用程序的状态。它具有易于使用、模块化、可测试性、可扩展性、时间旅行调试等特点。

    19 天前
  • 使用 enzyme 来描写测试 React 组件的行为

    React 是一个流行的前端框架,它允许开发者构建高效、可重用和易于维护的组件化界面。然而,随着 React 应用程序的不断增加,测试成为确保代码质量的关键因素之一。

    19 天前
  • 如何在 TypeScript 应用程序中使用 Babel 和 webpack

    本文将介绍如何在 TypeScript 应用程序中使用 Babel 和 webpack 来获得更高的代码兼容性和更好的性能。 为什么需要 Babel 和 webpack 随着 JavaScript 生...

    19 天前
  • Material Design 中使用 ProgressBar 和 TextView 实现进度条带百分比效果

    在移动端开发中,进度条是一个经常用到的组件,能够显示任务完成的状态以及剩余时间。本文将介绍如何使用 Material Design 中的 ProgressBar 和 TextView 实现有百分比效果...

    19 天前
  • 使用 PM2 实现 Node.js 应用的性能测试

    Node.js 是一种优秀的服务器端 JavaScript 运行环境,它以事件驱动和非阻塞 I/O 模型为特点,使得它在 Web 开发中具有很大的优势。使用 Node.js 进行 Web 开发是越来越...

    19 天前
  • 使用 Jest 构建测试环境的最佳实践

    Jest 是一个开源的 JavaScript 测试框架,它旨在提供快速的、零配置的测试环境。使用 Jest 可以轻松编写、运行和维护测试用例,并提供了丰富的 API 和插件,可针对不同的测试场景进行配...

    19 天前
  • 运用 Custom Elements 探讨 Web Components 在企业级前端开发中的应用

    前言 随着 Web 技术的日益发展,企业级前端开发中越来越多地需要应对复杂性、可维护性和可复用性等挑战。目前市场上的前端框架很多,比如 Angular、React、Vue 等,它们各自有着很多优缺点。

    19 天前
  • PWA 中如何处理用户许可请求

    PWA 中如何处理用户许可请求 PWA(Progressive Web Application)是一种新型的 Web 应用程序,可以通过使用现代 Web 技术建立高效、响应式和可靠的应用程序。

    19 天前
  • 解决 Express.js 应用发生未捕获异常崩溃问题

    在 Express.js 应用开发过程中,经常会遇到应用因为未捕获异常而崩溃的问题。这样一来,应用所有正在处理的请求和响应都将被挂起,直到应用被重启。如果这种情况频繁发生,将对应用的可用性和稳定性产生...

    19 天前
  • ECMAScript 2018 中的可选链操作符解决 undefined 访问错误

    在 JavaScript 编码中,避免访问未定义的变量是一个常见的问题。通常,当我们试图访问一个未定义的变量或属性时,程序会抛出一个异常。这种错误非常容易发生,特别是在处理嵌套数据结构时。

    19 天前
  • RESTful API 中的 HATEOAS(Hypermedia as the Engine of Application State)详解

    在开发 Web 应用程序时,RESTful API 已经成为了 Web 应用程序开发的基础。RESTful API 可以用于构建可扩展的 Web 应用程序和服务,它使得不同的 Web 应用程序能够互相...

    19 天前
  • SASS vs. React:哪一个更好?

    在前端开发中,SASS和React都是非常流行的工具。SASS可以使CSS更加方便,而React则是一个强大的JavaScript库,可以帮助我们构建动态的用户界面。

    19 天前
  • 在 VSCode 中配置 ESLint + Prettier(超详细)

    随着前端开发迅猛发展,代码质量已经变得越来越重要。对于团队开发来说,我们希望代码在满足项目需求的同时,仍然保持统一、规范,易于维护。 这就是 ESLint 和 Prettier 的目的。

    19 天前
  • Jest 测试中断言 styles 的使用技巧

    在前端开发中,我们常常需要进行样式测试。这时候,Jest 是一个非常好用的测试框架,它提供了一系列的测试工具,包括断言工具,可以用来方便地编写测试代码。在这篇文章中,我们将讲解如何在 Jest 测试中...

    19 天前
  • 如何在 PWA 中实现自适应布局

    随着移动设备的普及,网页已经不再是只在桌面设备上浏览的东西,而是在不同尺寸、不同分辨率的设备上使用。这就需要我们为不同设备提供适配性的布局,即响应式设计。但是要在 PWA 中实现自适应布局,我们需要考...

    19 天前
  • Web Components 的开发与调试技巧

    Web Components 是一种前端开发技术,能够让你创建可重用的自定义 HTML 标签和元素。当这些元素需要在多个页面中重复使用时,Web Components 提供了一种优雅的解决方案。

    19 天前
  • 使用 Mocha 测试 React 组件的最佳实践

    在使用 React 构建应用程序时,测试是至关重要的一部分。Mocha 是一个流行的 JavaScript 测试框架,它可以用于测试 React 组件。在本文中,我们将介绍 Mocha 的最佳实践,以...

    19 天前
  • 高效的优化:JavaScript 性能的顶级实践

    JavaScript 是现代 Web 开发的基础之一,我们需要用它来实现复杂的交互逻辑和动态效果。但是,随着应用的复杂度和数据量的增加,JavaScript 性能问题也逐渐变得更加突出。

    19 天前
  • 用 GraphQL 时如何在后端对查询进行验证?

    GraphQL 是一个强类型的数据查询语言,通过定义查询和返回的类型来使得 API 更加精确和可预测。在前端开发过程中,我们常常会使用 GraphQL 来进行数据查询和操作。

    19 天前

相关推荐

    暂无文章