SSE 使用中的坑：浏览器异常断开请求和 WebSocket 并用等

面试官：小伙子，你的数组去重方式惊艳到我了

简介

SSE（Server-Sent Events）是一种轻量级的服务器推送技术，允许 Web 服务器向浏览器发送数据，实现了服务器与前端的实时数据交互。相较于 WebSocket，SSE 的实现更为简单，且不需要多线程编程技能，可以方便地使用在各种 JavaScript 应用程序中。

但在使用 SSE 技术时，存在一些坑点，常见的问题是浏览器异常断开请求和 WebSocket 并用等。本文将详细介绍这些问题并提供相应的解决方法

浏览器异常断开请求

SSE 可以无限期地发送数据，但是浏览器可能会在某些情况下终止请求，例如网络中断、关闭页面等，SSE 本身无法有效地处理这种情况，因此需要应用特定的机制来应对。

SSE 的心跳机制

SSE 的心跳机制是保证 SSE 持续连接的一种机制，其原理是在服务器端定时发送一个固定内容的消息，用于检查客户端是否需要保持连接。如果客户端一段时间内未收到消息，则认为连接已经断开。

以下是一个 SSE 心跳机制的示例代码：

服务端：

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

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

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

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

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

客户端：

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

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

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

其中，客户端通过 EventSource 构造函数指向服务端的 /sseTest 路径，接收 SSE 事件。服务器定时地向客户端发送固定内容的消息，从而检测连接是否断开，客户端在 onError 事件中处理连接已经断开的情况。

定期重新连接

除了心跳机制以外，定期重新连接也是一种较为常见的处理 SSE 异常断开连接的方法。在客户端连接断开时，重新发送连接请求，实现 SSE 服务的持续连接。

以下是一个定期重新连接的代码示例：

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

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

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

该方法适用于服务器端不强制关闭客户端连接的场景，可以用于实现自动重连，并保持前端页面的实时更新。

WebSocket 并用等

WebSocket 与 SSE 在实现上有很多相似之处，但是其确实是一种双向通信的机制，相较于 SSE 更加灵活，可以用于实现多种不同的服务端应用，例如多人在线游戏等。

但是在实际应用中，我们常常会遇到 WebSocket 与 SSE 的并用场景，包括在不同的浏览器中以及环境中使用 WebSocket 并用 SSE 等。在这种情况下，我们需要将 SSE 与 WebSocket 结合起来，以实现更强大、更可靠的数据推送机制。

SSE 与 WebSocket 并用的优缺点

SSE 和 WebSocket 都可以用于实现服务端与浏览器的实时数据交互，但是两种技术各自存在着优缺点，需要针对具体需求进行选择。

SSE 的优点：

  • SSE 可以被广泛支持，因为它只使用了 HTTP 协议；
  • SSE 可以携带不同的数据流，比 WebSocket 更灵活；
  • SSE 不需要额外的协议解析，因此在处理服务端数据时速度更快；

SSE 的缺点：

  • SSE 只能由服务端向客户端推送数据，不支持双向通信；
  • SSE 可能会遭受到浏览器网络故障或者链接断开的影响。

WebSocket 的优点：

  • WebSocket 是双向的，服务端和浏览器都可以随意地推送和获取数据；
  • WebSocket 通信协议是二进制的，因此与 SSE 相比，速度更快且适合处理大量数据。

WebSocket 的缺点：

  • WebSocket 只能在部分浏览器上使用；
  • WebSocket 的协议需要特定的解析。

SSE 与 WebSocket 并用的示例代码

以下是一个使用 SSE 与 WebSocket 并用的代码实例，该实例使用了 Node.js 和 Express。

服务端：

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

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

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

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

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

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

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

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

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

客户端：

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

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

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

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

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

在该示例中，我们在服务端同时使用了 SSE 和 WebSocket 技术，通过定期向客户端推送数据，实现了 SSE 和 WebSocket 并用的效果，同时在客户端使用了 SSE 和 WebSocket 的不同 API，将两者的数据展示在页面上。

结论

本文介绍了 SSE 的心跳机制和定期重新连接方法，作为 SSE 异常断开连接的解决方案，并介绍了 SSE 与 WebSocket 并用的优缺点和代码示例。掌握这些技术，能大幅度提升服务端与前端实时数据交互的效率，对于前端开发者来说有很高的学习和指导意义。

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

阅读全文

猜你喜欢

  • ES6 特性解析之可迭代协议 (Iterable Protocol)

    引言 JavaScript 一直以来都是前端开发的必备语言，但是随着时代的发展，JavaScript 也在不断地更新和完善自己，其中最具有代表性的就是 ES6。ES6 在同样解决了一些历史问题的同时，...

    10 天前
  • 如何使用 Postman 进行 RESTful API 测试与调试

    在前端开发中，RESTful API 是一个不可或缺的部分。而在测试和调试过程中，Postman 是一个非常强大且流行的工具。在本文中，我将向您介绍如何使用 Postman 进行 RESTful AP...

    10 天前
  • Redis 集群架构设计与实践

    Redis 是一种高性能的 NoSQL 数据库，因其快速读写、数据结构丰富和优秀的扩展性而广受开发者喜爱。在 Redis 的使用中，当数据量过大时，单节点 Redis 就无法满足性能和可靠性的要求，为...

    10 天前
  • Kubernetes 中的链路追踪工具详解

    在现代的云时代，大部分的应用都是以分布式的形式部署在多个不同的节点上，这极大地增加了调试和定位问题的难度。为了更好地管理这些复杂的应用，链路追踪工具成为了必不可少的一部分。

    10 天前
  • 使用 AngularJS 的 SPA 遇到的数据加载问题及解决方案

    单页应用（SPA）是现代前端开发的一种流行方式，它能够在不刷新整个页面的情况下，动态地更新页面，并提升用户体验。然而，在使用 AngularJS 构建 SPA 时，我们常常会面临数据加载方面的一些问题...

    10 天前
  • 使用 Webpack 打包 ES6 项目的正确姿势

    Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包器。它将多个 JavaScript 文件打包成一个或多个捆绑包，从而优化加载时间并提高性能。

    10 天前
  • MongoDB 的数据类型介绍及如何查询每种数据类型？

    前言 MongoDB 是一种非关系型数据库，与传统的关系型数据库不同，MongoDB 支持各种各样的数据类型。为了更好地理解和使用 MongoDB，必须先熟悉这些数据类型以及如何查询这些类型的数据。

    10 天前
  • 无障碍辅助功能的可用性测试思路与方法

    在当今数字化时代，随着智能手机和社交媒体的普及，我们的生活已经离不开互联网，但我们可能忽略了一些使用电脑和移动设备的人面临的困难。像听障、视障、语言障碍等等，这些人们很难使用网站和移动应用程序，因此，...

    10 天前
  • Redux中的错误处理方式

    引言 在前端应用程序中，错误处理一直是一个重要且必要的领域。Redux是一个流行的JavaScript库，可用于管理大型应用程序中的应用程序状态。Redux的目标是使状态更可预测并使其更容易进行错误处...

    10 天前
  • 如何利用 Cypress 测试框架实现 SEO 优化

    搜索引擎优化（SEO）是Web开发中一个常常被忽视的领域。虽然有很多SEO技巧都依赖于后端，但是前端也可以有很多优化的机会。 Cypress 测试框架是一个功能强大的工具，可以用来自动化测试和验证We...

    10 天前
  • Tailwind CSS 框架下如何高效率地开发网站？

    前言 Tailwind CSS 是一个流行的 CSS 框架，它通过使用预定义的 CSS 类，让开发者可以快速地构建响应式和现代化的网站。与其他框架相比，Tailwind 的优点在于其高度可定制性和强大...

    10 天前
  • PWA 应用中的 HTML5 Web storage 技术应用实践

    前言 PWA（Progressive Web App）是一种结合了 Web 和 Native 的应用程序，能够提供类似于原生应用程序的用户体验。这种技术是通过一系列的 Web 技术来实现的，其中 HT...

    10 天前
  • Web Components—— 前端组件化的概念、原理、布道模板

    在前端开发中，组件化一直是一个非常重要的话题。在各种框架的帮助下，前端开发人员可以轻松地构建复杂的应用程序。但是，在某些情况下，框架可能并不是最佳选择。为了解决这个问题， Web Components...

    10 天前
  • Promise 如何解决多个异步操作并行执行的问题？

    引言 在前端开发中，我们常常需要处理异步操作。在我们的代码中，我们常常遇到多个异步操作需要同时执行的情况。这时候，我们需要一种方法来确保这些异步操作可以并行执行，同时我们又需要在所有异步操作执行完成后...

    10 天前
  • 使用 Hapi 框架实现文件上传

    在现代 web 应用程序中，文件上传是常见的需求之一。Hapi 是一个用于构建应用程序和服务的 Node.js 框架，它提供了易于使用的 API 和插件生态系统，可以轻松地实现文件上传功能。

    10 天前
  • 性能优化实战：移动端网页性能优化实践

    在现代网络应用中，好的性能是非常重要的，尤其是在移动设备上。移动端网页性能优化是一个复杂的过程，需要从各个方面进行优化。本文将介绍从页面加载速度、资源压缩、DOM 操作优化、事件委托等多个方面进行移动...

    10 天前
  • Angular 中的 AfterViewInit 生命周期

    在 Angular 中，生命周期函数是非常重要的概念。其中 AfterViewInit 生命周期是在组件视图初始化完成后触发的，通常用于执行一些针对视图层的操作。本文将详细介绍 Angular 中如何...

    10 天前
  • 响应式设计中遇到的断点问题和解决方法

    在移动设备的普及和互联网的不断发展下，响应式设计成为了前端开发中必不可少的一部分。响应式设计的主要目的是通过自适应布局来适应不同屏幕、不同大小的设备，并为用户提供更好的用户体验。

    10 天前
  • Chai 报错 TypeError: Cannot read property 'throw' of undefined 的解决方法

    简介 在前端开发中，单元测试是常见的开发方式，而 Chai 是一个流行的 JavaScript 断言库，它提供了多种语法供开发者进行测试。然而，使用 Chai 进行测试时，有时会出现 TypeErro...

    10 天前
  • 如何将 ESLint 与 Webpack 关联起来 —— 您的代码质量将直接提升

    ESLint 和 Webpack 是前端开发中常用的两个工具。ESLint 用于检查代码是否符合规范，Webpack 用于打包和处理前端资源。将两者结合起来，可以提升代码的可读性和可维护性。

    10 天前

相关推荐

    暂无文章