Server-sent Events 和 Comet：哪一个更适合 Web 应用程序？

面试官：小伙子，你的代码为什么这么丝滑？

随着 Web 技术的不断发展，前端开发变得越来越重要。在这个时代中，对于 Web 应用程序来说，数据的实时推送和服务端的持久连接变得越来越重要。这两个问题可以通过两种技术实现：Server-sent Events 和 Comet。那么，哪一个更适合 Web 应用程序呢？本文将对这两个技术进行介绍、讨论、比较，并附上实例代码。

Server-sent Events

Server-sent Events（服务器推送事件）是 HTML5 标准中的一种特殊的事件源类型。它是一种基于 HTTP 协议的轻量级技术，用于从服务器向客户端推送数据。

Server-sent Events 的工作原理很简单。客户端与服务器之间建立一个持久化连接。服务器通过这个连接向客户端发送数据。这些数据都是以事件的形式发送的，因此客户端需要为每种事件类型注册一个事件侦听器。当事件发生时，客户端侦听器就会收到这个事件的相关信息。

Server-sent Events 的一些优点：

  • 最简单和最适合处理非常频繁更新的数据
  • 基于纯 JavaScript，不需要额外的库或框架
  • 支持浏览器检测连接是否中断，以及自动重新连接

Comet

Comet 是一种技术，用于在 Web 应用程序中实现服务器端的推送。它是一种基于长时间轮询（long-polling）或 iframe 流（iframe streaming）的技术。这种技术常常用于多人在线游戏、在线聊天、以及其他需要实时信息推送的场景。

Comet 的工作原理有一些复杂。在长时间轮询中，客户端向服务器发送一个长连接的请求，服务器一直保持这个连接开启，直到有数据可以返回给客户端。在 iframe 流中，服务器使用一些特定的技术将一个 iframe 自动更新为一个流源（stream source），以向客户端推送数据。

Comet 的一些优点：

  • 可以用于各种 Web 应用程序配置
  • 可以很好地处理异步请求（异步数据获取）
  • 可用于维护多个连接

对比

在比较 Server-sent Events 和 Comet 之前，让我们简要地总结一下它们之间的区别：

  • Server-sent Events 是基于 HTTP 和事件驱动模型的，而 Comet 利用长连接不断查询服务器是否有新数据
  • 如果你需要实时更新数据，那么 Server-sent Events 是最好的选择；但如果你需要更复杂的服务端实时推送功能，Comet 会更适合你
  • Comet 展示了一些更高级的特性，可以更好地处理多个连接和异步请求，同时能够处理一些更复杂的 Web 应用程序场景

示例代码

Server-sent Events

以下是基于 Server-sent Events 实现的一个简单的实时计数器：

HTML：

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

Node.js：

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

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

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

Comet

以下是基于 Comet 实现的一个简单的基于长连接的聊天：

HTML：

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

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

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

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

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

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

Node.js：

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

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

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

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

总结

Server-sent Events 和 Comet 都是实现 Web 应用程序中实时信息推送和服务端的持久连接的好工具。因此，在选择它们之间时，关键是要考虑你的实际需求。如果你只需要简单的实时数据更新，那么 Server-sent Events 可能会是更好的选择。如果你需要处理异步请求和更高级的情况，那么 Comet 可能会更适合你。

总之，理解 Server-sent Events 和 Comet 的优缺点，以及如何在 Web 应用程序中使用它们，将使你的前端开发更加高效和便捷。

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

阅读全文

猜你喜欢

  • Deno 应用中如何处理 XML 格式数据

    引言 Deno 是一个新兴的 JavaScript 运行时环境，它与 Node.js 类似，但具有许多 Node.js 中缺失的特性，例如 TypeScript 的原生支持、安全的模块加载等等。

    3 小时前
  • React 中的内联样式和外部样式表的区别

    React 是一种广泛使用的 JavaScript 库，用于开发用户界面。React 支持一种特殊的语法，称为 JSX，它使得将 HTML 和 JavaScript 混合使用变得更加简单和直观。

    3 小时前
  • MongoDB 中如何使用 $elemMatch 进行子文档匹配

    简介 在 MongoDB 中，文档可以包含子文档，也就是嵌套文档。如果我们需要在查询中匹配一个文档的子文档，就需要使用 $elemMatch 操作符。$elemMatch 操作符用于在嵌套数组中进行元...

    3 小时前
  • 响应式设计中低延时的图片加载技巧

    随着移动设备的普及，响应式设计已成为了现代网站开发的标配。在响应式设计中，图片的加载速度对用户体验至关重要。本文将介绍一些响应式图片加载的技巧，帮助您在低延时的情况下加载高质量的图片，提升用户体验。

    3 小时前
  • ECMAScript 2019: 新的 Function 特性

    ECMAScript 2019: 新的 Function 特性 ECMAScript 2019（ES2019）是 JavaScript 的最新标准，并且添加了一些新的 Function 特性。

    3 小时前
  • Kubernetes 使用 RBAC 进行权限管理实践

    前言 近年来，随着云原生技术的快速发展，Kubernetes 已成为云原生应用部署和管理的事实标准。而随着集群规模的扩大和业务复杂度的增加，如何对 Kubernetes 群集进行合理的权限管理变得尤为...

    3 小时前
  • 解决在 Express.js 应用程序中使用 MongoDB 时的问题

    解决在 Express.js 应用程序中使用 MongoDB 时的问题 本文将讲解在 Express.js 应用程序中使用 MongoDB 时可能遇到的问题，并给出解决方案。

    3 小时前
  • 如何在 Enzyme 中测试依赖 useContext 和 useReducer 实现的组件

    在 React 中使用 useContext 和 useReducer 处理状态管理逻辑已成为现代前端应用程序开发的一部分。然而，在测试这些组件时，可能会遇到一些挑战。

    3 小时前
  • 关于 Vue SPA 应用 SEO 的一些实践案例

    背景介绍 Vue SPA（Single-Page Application）应用是指通过使用 Vue.js 框架创建的单页 web 应用程序。由于它们通过将内容加载到一个页面上来提供更流畅的用户体验，S...

    3 小时前
  • Android 开发中 Material Design 的 CoordinatorLayout 实现方式

    在 Android 应用的开发中，Material Design 是不可缺少的一部分。Material Design 是一种设计和交互风格，它基于视觉层面的纸质布局与动态效果，而不是那些机械化而无情的...

    3 小时前
  • 如何使用 PM2 检查 Node.js 应用程序的健康状态？

    Node.js 是一种广泛使用的 JavaScript 运行时，可用于构建高性能的网络应用程序和服务。在生产环境中运行 Node.js 应用程序时，我们需要确保它们始终处于健康状态。

    4 小时前
  • ES7 实践：ESLint 常见的代码检查配置

    随着前端技术的不断进步，我们的代码变得越来越复杂，同时也越来越难以维护。为了避免代码质量问题，我们需要使用代码检查工具来确保我们的代码风格一致、符合规范，并且没有潜在的问题。

    4 小时前
  • 使用 Socket.io 实现在线人数统计功能的方法

    前言 在互联网应用中，实时在线人数统计是一个非常常见的需求。今天我们来介绍如何使用 Socket.io 实现在线人数统计功能。 Socket.io 是一个实时通讯库，它基于 WebSockets、HT...

    4 小时前
  • 如何使用 ES9 的 Proxy 实现数据双向绑定

    在前端开发中，数据双向绑定是一个很重要的概念。它可以使界面上的数据和数据模型保持同步，同时也可以提高开发效率和用户体验。在 ES9 中，引入了 Proxy 对象，可以方便地实现数据的双向绑定，本文将深...

    4 小时前
  • TypeScript 中如何优化大型项目的开发和维护？

    前言：TypeScript 是一种 JavaScript 的超集，提供了类型检查和强类型支持，这使得它在大型项目中的开发和维护方面有着巨大的优势。在本文中，将介绍如何在 TypeScript 中使用一...

    4 小时前
  • React 和 Redux 应用的最新工具和技术

    React 和 Redux 是现代 Web 开发的主要技术之一，无论是个人项目还是企业级应用都非常流行。随着技术的不断发展，React 和 Redux 生态系统也在不断演进，推出了许多新的工具和技术，...

    4 小时前
  • 响应式设计中优化文字排版技巧

    随着移动互联网的崛起，响应式设计已成为前端开发中不可或缺的一环。而在响应式设计中，优化文字排版是非常重要的一部分，因为不良的排版会影响用户的阅读体验。因此，本文将深入探讨在响应式设计中，如何优化文字排...

    4 小时前
  • CSS Grid 在实践过程中遇到的问题及解决方法

    CSS Grid 是一个用于布局的强大工具，它可以让开发者更方便地创建现代化且复杂的布局，但在实践过程中，我们可能会遇到一些问题。在这篇文章中，我们将会详细介绍 CSS Grid 在实践中可能会遇到的...

    4 小时前
  • 如何让旅游无障碍设计变成 “普及版”？

    旅游是一项休闲娱乐活动，对于许多人来说，它是一种放松身心的方式。但对于一些残障人士来说，旅游并不是一件容易的事情。缺少无障碍设计的旅游地点可能会阻止他们的参与。因此，在 web 设计中，无障碍设计是十...

    4 小时前
  • Enzyme：如何测试快速重连服务器的 React 组件

    在开发前端应用程序时，经常需要处理网络连接问题。服务器可能会经常出现故障或断开，导致应用程序不得不重新连接。这时候，我们就需要测试这种情况下的 React 组件是否能够快速重连服务器。

    4 小时前

相关推荐