Node.js SSE 模块推送空数据坑点

介绍

Server-Sent Events(SSE)是一种现代化的 Web 技术,通过 HTTP 连接被动地推送数据到客户端,也是一种单向传输的技术。Node.js 的 SSE 模块也极为方便,通过无阻塞(非阻塞 I/O)推送数据,具有实时性和高效性。但是,Node.js SSE 模块推送空数据时存在浏览器超时的问题。本文主要介绍如何防止此问题的发生。

原因分析

客户端使用 EventSource 对象连接服务器,当没有数据发送时,EventSource 对象设置的超时时间到达后,将立即断开请求并触发浏览器超时。如果每次推送都检查数据是否为空,这样的处理方式将大大降低效率。

解决方案

心跳数据

解决方案一是每隔一段时间生成一条心跳数据用于向客户端推送,以保证连接持续性。例如,下面代码中,setTimeout 中 5 秒间隔生成心跳数据:

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

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

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

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

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

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

该示例每隔 5 秒钟发送一条字符串“heartbeat”。但这种方式会占用带宽,所以我们需要进行第二方案修改。

切断连接

解决方案二是在前一个事件发送完数据之后,检查新事件的数据是否为空。如果为空,就关闭和客户端的连接,以防触发浏览器超时。例如,下面代码中,当没有数据时,关闭链接:

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

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

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

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

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

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

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

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

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

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

该示例在每次推送事件时,先检查数据是否为空,如果是空,则直接结束 SSE 连接,以此达到防止触发浏览器超时的目的。

总结

在使用 Node.js SSE 模块时,需要注意空数据问题,否则将会引发浏览器超时问题。通过第一种方案实现心跳机制或第二种方案关闭不合规的连接,可以避免此类问题的发生。

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


猜你喜欢

  • 关于 Webpack 构建打包优化的经验总结

    近年来,Webpack 已成为前端开发中最受欢迎的构建打包工具之一,它的高度可配置性、良好的扩展性以及强大的功能使得我们可以在前端项目中高效地管理、打包和分发代码。

    1 年前
  • 在 React SPA 应用中如何使用 React-loadable 实现异步组件的按需加载?

    React是现在最流行、最受欢迎的JavaScript库之一。它是一个用于构建用户界面的库。大多数现代Web应用程序都是使用React构建的。但是,随着Web应用的不断增长和复杂性的增加,当我们使用R...

    1 年前
  • PWA 服务支持:如何在 Express 中开发 Service Worker

    前言 智能手机已成为我们日常生活不可分割的一部分,而 APP 应用成为我们工作学习、娱乐消遣的必需品。为了优化用户体验,Google 提出 PWA(Progressive Web App,渐进式 We...

    1 年前
  • Express.js 中使用 EJS 模板引擎的详细教程

    在前端开发中,模板引擎是一个很有用的工具,它能够以动态的方式将数据渲染到 HTML 页面中。在 Node.js 的世界里,Express.js 是一个广泛使用的 Web 框架,而 EJS 模板引擎则是...

    1 年前
  • TypeScript+Node 开发后端服务教程

    介绍 TypeScript 是微软开发的一种编程语言,是建立在 JavaScript 之上的一套语法规范和编译工具集。它可以在编译时进行类型检查和语法检查等操作,减少开发过程中的错误和提高代码质量。

    1 年前
  • 手把手教你部署 Serverless

    随着云计算和前端技术的发展,Serverless 成为了一个备受关注的计算模型。Serverless 架构的特点是基于事件驱动和无服务器的计算方式,让开发者无需关注服务器管理和维护,将更多精力放在应用...

    1 年前
  • ES10 之最新的正则表达式功能

    正则表达式是前端开发中非常重要的一环,它可以用来处理字符串、验证表单等多个方面。ECMAScript 2019 (也就是 ES10)为我们提供了一些新的正则表达式功能,让我们更加高效地进行开发。

    1 年前
  • Kubernetes Ingress Controller 的设计和实现

    Kubernetes Ingress Controller 是负责处理集群中 Ingress 资源的 Controller,它提供了一种标准化和扩展性的方法来描述 HTTP 和 HTTPS 流量路由。

    1 年前
  • Sequelize 事务:如何处理未处理的错误

    在前端开发中,Sequelize 是一个常用的 ORM(Object-Relational Mapping)库,用于将 Node.js 应用程序连接到关系型数据库。

    1 年前
  • 如何在 Jest 中使用 Sinon 进行 Stub 与 Spy

    在前端开发中,单元测试是一个非常重要的环节。在进行单元测试时,我们需要使用一些工具来模拟数据、拦截请求以及验证函数的调用情况。其中,Sinon.js 是一个非常流行的 JavaScript 测试框架,...

    1 年前
  • Next.js 的生命周期方法以及如何使用它们

    Next.js 的生命周期方法以及如何使用它们 Next.js 是一款流行的服务器端渲染框架。它使用 React 和 Webpack,可以快速构建出具有异步数据加载和 SEO 优化的 Web 应用程序...

    1 年前
  • 在 Hapi 框架中使用 Redis 实现会话共享

    随着web应用的日渐复杂,会话管理也变得越来越重要,其中一种解决方式就是通过 Redis 存储会话数据。Hapi 是一款流行的 Node.js 框架,支持多种插件和功能,同时方便扩展和定制,比较适合用...

    1 年前
  • JavaScript ES11 对 BigInts 的新支持

    在 JavaScript 的新版本 ES11 中,新增加了对 BigInts 的支持。这使得 JavaScript 可以处理超出 Number 类型最大值的大整数运算,这对于那些需要进行精确计算的应用...

    1 年前
  • 使用 ES12 中的 BigInt64Array 和 BigUint64Array 处理大整数

    在传统的 JavaScript 中,处理大整数的能力受到了限制。当数字超出了 JavaScript 的 Number 类型的最大值时,我们就需要借助一些工具或外部库来进行处理。

    1 年前
  • 使用 Mongoose 分页:优化网络传输效率

    随着互联网的快速发展,前端开发的需求也越来越高。而对于开发中的数据传输效率问题,Mongoose 分页是一种可以优化传输效率的解决方案。 Mongoose 分页介绍 Mongoose 是 Node.j...

    1 年前
  • ECMAScript 2015:如何降低 JavaScript 闭包的绑定

    JavaScript 的闭包是一种非常有用的功能,它可以让函数捕获作用域中的变量,这些变量在函数被调用后仍然可以被访问。然而,如果不小心使用闭包,它们可能会导致内存泄漏和性能问题。

    1 年前
  • Angular6 项目使用 Sass

    Sass (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器,它可以帮助前端开发人员编写更加高效、简洁和易于维护的样式表。

    1 年前
  • Redux异步流操作方案

    前言 Redux是一种可预测的状态管理模式,被广泛应用于React应用程序的开发中。但是,Redux仅定义同步数据流,而异步流操作在实际应用中也非常常见。那么,如何在Redux中处理异步流操作呢?接下...

    1 年前
  • 在 Webpack 中使用 ESLint 检查代码错误

    前言 如果你是一名前端工程师,就一定知道代码的品质有多么重要。每一行代码都可能会影响运行性能、稳定性和安全性等多种因素。而对于复杂的项目,代码的品质掌控更加困难。这就需要一些辅助工具来帮助我们维护代码...

    1 年前
  • 如何使用 Koa2 实现多语言支持

    在前端开发中,多语言支持是一个非常常见的需求。在 Koa2 框架下,我们可以使用 koa-i18n 中间件来实现多语言支持。本文将详细介绍如何在 Koa2 中使用 koa-i18n 实现多语言支持。

    1 年前

相关推荐

    暂无文章