使用 Server-Sent Events 实现实时数据推送

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

引言

在现代 Web 应用程序开发中,实时数据推送变得越来越重要。在过去,开发人员不得不通过 AJAX 长轮询或 WebSockets 来实现实时通信。不过, 这些方法对于实现简单的实时通信来说过于繁琐。Server-Sent Events(SSE)是一种轻量级的技术,可以轻松地实现服务器向客户端发送实时数据。

本文将介绍如何使用 SSE 在前端应用程序中实现实时数据推送。文章将涵盖 SSE 是什么、如何在前端使用 SSE、如何从服务器端进行 SSE 推送以及使用 JavaScript 编写 SSE 示例代码。

什么是 Server-Sent Events(SSE)?

Server-Sent Events(SSE)是一个 HTML5 API,可以在客户端和服务器之间建立单向连接。服务器可以通过这个连接不断地向客户端发送新数据,而无需进行客户端的请求。这使得 SSE 成为一个非常有用的技术,例如,可以在提示框中显示实时更新,获取最新的股票报价,或者在 Web 应用程序中收到及时的通知。

SSE 协议基于 HTTP,因此 SSE 消息可以通过任何 HTTP 服务器和客户端进行传输。SSE 消息采用文本格式(text/event-stream)并具有以下特点:

  • 单向传输,即服务器端向客户端发送信息
  • 所有数据都是文本格式
  • 使用“事件”(event)将消息分组

在 SSE 消息中,多个消息可以使用换行符分隔。每个消息通常由标题和正文组成。标题包括消息标识符、事件类型和可选的超时机制。

下面是一个 SSE 消息示例:

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

在这个示例中,id 是消息标识符,event 是事件类型,data 是消息的正文。\n 表示消息结束。

如何在前端使用 SSE?

使用 SSE 在前端应用程序中实现实时数据推送非常容易。只需要在前端添加一个事件侦听器来监听消息,并且通过 HTTP 请求来创建 SSE 连接即可。下面是一个简单的 ES6 类,用于处理 SSE 连接:

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

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

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

在这个示例中,SseClient 类接受一个 URL,该 URL 指示 SSE 服务器的位置。connect 方法使用 EventSource 类创建一个 SSE 连接,并侦听 message 事件来接收从服务器发送的消息。在接收到消息时,将执行提供的回调函数。

要使用 SseClient,只需在 Vue.js 项目中创建一个全局服务:

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

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

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

在这个示例中,我们将 SseClient 实例作为全局 Vue 服务注入到 Vue.prototype 中。我们还通过混合来销毁 SSE 连接。

最后,只需在 Vue.js 组件中使用 $sse.connect 来侦听 SSE 事件:

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

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

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

在这个例子中,我们将接收到的消息分配给组件实例中的 message 属性。此时,每当从服务器端发送 SSE 消息时,该组件都会接收到消息并在页面上显示。

如何从服务器端实现 SSE 数据推送?

要使用 SSE 在服务器和客户端之间发送实时数据,需要使用一个基于 HTTP 服务器的服务器端脚本。下面是一个 Node.js 脚本来实现 SSE 消息推送:

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

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

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

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

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

在这个例子中,我们创建了一个 Node.js HTTP 服务器,并注册了一个名为 /stream 的 SSE 端点。在 /stream 端点上,我们将响应头设置为 text/event-streamCache-Control 设置为 no-cache,并且Connection 设置为 keep-alive。然后,我们使用 setInterval 函数为客户端推送每秒一个 SSE 消息。当客户端连接断开时,我们清除 setInterval

在主页端点上,我们向客户端呈现了一个简单的 HTML 页面,用于接收来自 SSE 服务器的消息。

结论

Server-Sent Events 是一种轻量级的技术,可以轻松地实现服务器向客户端实时推送数据。在前端应用程序中,使用 SSE 可以通过一个简单的 ES6 类来处理 SSE 连接。在服务器端,任何 HTTP 服务器可以用于发送 SSE 消息。这使得 SSE 成为构建实时应用程序的理想选择。

服务器端 SSE 推送示例代码:https://github.com/dmnsgn/sse-example

前端 SSE 推送示例代码:https://codepen.io/hayden-george/pen/RLaYPp

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


猜你喜欢

  • 利用 Web Components 技术优化前端性能的实践经验

    在大型 Web 应用中,前端性能是很重要的一方面。Web Components 技术可以帮助我们有效地优化前端性能。本文将介绍 Web Components 技术的基础知识及其在优化前端性能方面的实践...

    18 天前
  • Serverless 架构中的 API 设计技巧详解

    Serverless 架构越来越流行,它提供了一种新的构建和部署应用程序的方式,它将大部分服务管理和运维的工作交给了云服务商,使开发人员能够更快地开发和部署应用,保持高可扩展性和高可靠性。

    18 天前
  • React Native 中的生命周期方法指南

    React Native 是 Facebook 开源的一个框架,用于构建跨平台移动应用程序。React Native 采用了基于组件的设计模式,其组件可以定义一些生命周期方法来管理组件的状态和行为。

    18 天前
  • Express.js 应用程序的缓存控制和静态资源管理

    Express.js 是一个基于 Node.js 平台的极简、灵活的 Web 应用程序框架,在前端开发中得到广泛应用。本文将介绍在 Express.js 应用程序中如何进行缓存控制和静态资源管理。

    18 天前
  • React + Redux + React Router 集成总结

    React、Redux 和 React Router 是前端开发中非常流行的技术栈。React 作为一个高效的 UI 框架,Redux 作为状态管理库,而 React Router 则是使用 Reac...

    18 天前
  • PWA 的实际应用 —— 篇一

    近年来,PWA 技术越来越受到前端开发者的关注。PWA(Progressive Web App,渐进式 Web 应用)是一种利用 Web 技术开发的符合 PWA 标准的 Web 应用,具有类似原生 A...

    18 天前
  • Cypress 实现网页性能测试的最佳实践和优化技巧

    Cypress 实现网页性能测试的最佳实践和优化技巧 随着互联网的发展,网页性能已经成为了一个非常重要的指标。一些糟糕的网站性能会影响用户的体验,甚至会影响业务的运转。

    18 天前
  • 如何在 Koa2 中使用 WebSocket 实现实时聊天

    随着互联网技术的发展,实时通信在 web 应用中变得越来越重要。实时通信指用户之间的交流,比如聊天、游戏等,这些场景需要实时性较高且消息的传输不可靠,因此需要使用 WebSocket 技术来实现。

    18 天前
  • 如何使用 Hapi 和 Boom 实现 RESTful API 的错误处理

    RESTful API 经常会被开发者用来构建前端应用,因为它可以提供简单、可伸缩的接口,但是当出现错误时,必须要有很好的错误处理机制。在本文中,我们将学习如何使用 Hapi 和 Boom 库来实现 ...

    18 天前
  • Node.js 中的异常处理

    作为一名前端开发人员,在 Node.js 中,异常处理是一项十分重要的技能。Node.js 中的异常处理不仅可以帮助开发人员更好地监控应用程序的健康状况,同时也可以提高代码质量和开发效率。

    18 天前
  • 在 Node.js 中使用 TypeScript 的指南

    TypeScript 是一种强类型的 JavaScript 超集语言,它支持静态类型检查和更好的代码提示,并且能够将 TypeScript 编译成纯 JavaScript 代码以在浏览器中运行。

    18 天前
  • Node.js 中的 Promise 如何使用和处理错误

    简介 在 Node.js 中,Promise 是一种流行的异步编程机制,它可以帮助开发人员更有效地管理异步操作。Promise 提供了一种优雅的方式来组织和处理异步代码,消除了传统的回调嵌套问题。

    18 天前
  • 详解如何在网页中使用 LESS

    前言 LESS 是一种 CSS 预处理器,它能够让 CSS 代码更加优雅和易于管理。相比于原始 CSS,LESS 提供了一些更强大和灵活的语言特性,如变量,函数和嵌套规则等。

    18 天前
  • 在 Jest 中使用 DOM 测试

    什么是 Jest? Jest 是一个由 Facebook 开发的 JavaScript 测试框架,用于编写自动化测试和快照测试。它易于配置、易于使用,并集成了断言库、mock 库和代码覆盖率报告工具,...

    18 天前
  • 使用 GraphQL 创建可扩展的 WebHook 服务

    WebHook 服务是一种使网站、应用和服务之间自动同步的方法。使用 WebHook,当一个特定事件发生时,如发表文章或创建新用户,会自动向另一个应用程序发送 HTTP 请求,通常会包含 JSON 格...

    18 天前
  • ES11-null 性合并操作符和数字互操作性

    ES11-null 合并操作符和数字互操作性 在 ES11 中,一个令人兴奋的新特性是 null 合并操作符(??)。此操作符可以用来处理变量为 null 或 undefined 的情况。

    18 天前
  • 前端类技术文章:支持无障碍功能,让使用体验更优秀

    作为一名前端开发者,我们要始终关注用户体验,特别是那些使用辅助设备的用户。支持无障碍功能,可以让这部分用户也能方便地使用我们的应用程序,这对于用户体验是极其重要的。

    18 天前
  • React Native 中的 Fetch API 教程

    React Native 提供了一个名为 Fetch API 的网络请求服务,可用于获取和发送数据。Fetch API 具有良好的浏览器兼容性,并且是一种功能强大的基于 Promise 的 API,使...

    18 天前
  • 在 Koa 应用程序中使用 Mocha 和 Chai 进行端到端测试

    测试是任何应用程序开发人员的核心工作之一。端到端测试是测试应用程序的最终阶段,以确保应用程序按照预期工作。 在本文中,我将向您介绍如何使用 Mocha 和 Chai 测试框架来编写有效的端到端测试。

    18 天前
  • 使用 PM2 部署多个 Node.js 应用的经验

    在当今互联网发展的快速背景下,Node.js成为了前端领域的不可或缺的一部分,特别是在实时性和高并发需求较高的领域,如Web应用程序、REST APIs、websocket服务、实时数据更新等,Nod...

    18 天前

相关推荐

    暂无文章