Server-sent Events 和轮询:你更喜欢哪一个?

在 Web 应用程序中,实时性对于用户体验来说非常重要。为了实现实时性,常常使用轮询和 Server-sent Events 技术。本文将详细介绍这两种技术的优缺点,以及如何在前端中使用它们。

轮询

轮询是一种常见的技术,用于定期向服务器发送请求以获取最新数据。在轮询中,浏览器定期向服务器发送 HTTP 请求,服务器返回最新数据。这种技术的优点是它可以在所有浏览器上运行,因为它只使用标准的 HTTP 请求和响应。

下面是一个使用轮询的示例代码:

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

轮询的缺点是它会消耗大量的网络带宽和服务器资源,因为浏览器需要定期发送请求以获取最新数据。此外,轮询的实时性也不是很好,因为它只能在特定的时间间隔内获取数据,而无法即时获取数据。

Server-sent Events

Server-sent Events 是一种新的技术,用于在浏览器和服务器之间建立长连接,以便服务器可以向浏览器发送实时数据。在 Server-sent Events 中,浏览器向服务器发送一个 HTTP 请求,服务器将响应保持打开状态,并在有新数据时向浏览器发送数据。这种技术的优点是它可以实现即时通信,并且不需要浏览器定期发送请求。

下面是一个使用 Server-sent Events 的示例代码:

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

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

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

Server-sent Events 的缺点是它不是所有浏览器都支持,特别是旧版浏览器。此外,它需要服务器支持长连接,并且需要使用特殊的事件流协议来发送数据。

总结

轮询和 Server-sent Events 都是实现实时通信的有效技术,但它们各有优缺点。如果您需要在所有浏览器上运行,并且对实时性要求不高,则可以使用轮询。如果您需要实现即时通信,并且可以放弃对旧版浏览器的支持,则可以使用 Server-sent Events。

无论您选择哪种技术,都需要注意网络带宽和服务器资源的使用情况,以确保应用程序的性能和稳定性。希望本文可以帮助您选择合适的技术,并且能够在实际开发中应用它们。

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


猜你喜欢

  • 配置 ESLint 的妙用方法,让 JavaScript 更加规范

    什么是 ESLint? ESLint 是一个开源的 JavaScript 代码检查工具,它可以帮助我们发现代码中的潜在问题并提供修复建议,从而让我们的代码更加规范和易于维护。

    1 年前
  • LESS 中采用 Guard 能打破循环依赖

    在前端开发中,我们经常会遇到 CSS 的循环依赖问题。循环依赖指的是两个或多个样式文件之间互相依赖,导致在编译时出现错误。这种情况通常会导致样式表无法正确渲染,甚至导致页面崩溃。

    1 年前
  • ES8 为什么称之为 ES2017,还有哪些新特性我们可以使用?

    JavaScript 是一门动态语言,它的发展历程中经历了多个版本的更新与迭代。其中,ECMAScript(简称 ES)是 JavaScript 的语言标准,它定义了 JavaScript 语言的规范...

    1 年前
  • 快速入门:使用 Enzyme 进行 React 单元测试

    前言 在前端开发中,单元测试是非常重要的一环,它可以帮助我们发现代码中的问题,并提高代码质量。对于 React 开发来说,Enzyme 是一个非常好用的测试工具,它提供了一系列 API,可以方便地对 ...

    1 年前
  • Chai 和 Appium 结合使用进行移动端自动化测试及常见问题解决方法

    随着移动应用的普及,移动端自动化测试成为了一个必要的环节。在进行移动端自动化测试时,Chai 和 Appium 是两个非常常用的工具。本文将介绍如何结合使用 Chai 和 Appium 进行移动端自动...

    1 年前
  • Web Components 中的 Custom Elements 实现过程总结

    Web Components 是一种新兴的 Web 技术,它允许开发者创建可重用、独立的组件,这些组件可以在任何 Web 站点上使用,而不需要考虑与其他组件之间的冲突问题。

    1 年前
  • SASS 中的样式表插值和操作符技巧

    SASS 是一种 CSS 预处理器,它为我们提供了一些强大的工具和语法,使得我们能够更加高效地编写 CSS 样式表。其中,样式表插值和操作符技巧是 SASS 中非常重要的一部分,掌握它们对于我们编写高...

    1 年前
  • 基于 Kubernetes 实现多租户应用的最佳实践

    在云原生时代,Kubernetes 已经成为了容器编排和管理的事实标准。但是,对于企业级应用,单个 Kubernetes 集群可能需要同时支持多个租户,这就需要考虑如何实现多租户应用的部署和管理。

    1 年前
  • Express.js 中如何实现用户权限控制

    在 Web 开发中,用户权限控制是非常重要的一环。在 Express.js 中,实现用户权限控制可以通过多种方式,如使用中间件、自定义路由和使用第三方库等。本文将介绍在 Express.js 中如何实...

    1 年前
  • 解决使用 HTTPS 部署 PWA 出现的问题

    前言 PWA(Progressive Web App)是一种新兴的 Web 应用程序模型,它允许 Web 应用程序以本地应用程序的方式运行,并提供了许多本地应用程序的功能,如离线访问、推送通知、快速加...

    1 年前
  • ES6 中 Math 对象的新方法详解及应用

    在 ES6 中,Math 对象新增了一些方法,这些方法为前端开发提供了更多的数学计算功能。本文将详细介绍这些新方法的用法及其应用场景,并提供示例代码。 1. Math.trunc() Math.tru...

    1 年前
  • Vue.js 中使用 Echarts 实现图表的方法

    简介 Echarts 是一个由百度开发的基于 JavaScript 的可视化图表库,它可以帮助我们快速地创建各种复杂的图表。Vue.js 是一个流行的 JavaScript 框架,它可以帮助我们轻松地...

    1 年前
  • MongoDB 中使用 $regex 操作进行正则匹配的技巧和实践

    在 MongoDB 中,我们可以使用 $regex 操作符来进行正则匹配。正则匹配是一种非常强大的工具,可以帮助我们在数据库中快速地搜索和过滤数据。在本文中,我们将详细介绍在 MongoDB 中使用 ...

    1 年前
  • 无障碍编程指南:如何处理 API 请求中的异常情况?

    在前端开发中,我们经常需要从服务端获取数据,而服务端返回数据时可能会出现各种异常情况,如网络错误、服务端错误、数据格式错误等。如何在前端代码中处理这些异常情况,是我们需要掌握的一项重要技能。

    1 年前
  • 响应式设计中如何处理响应区间之间的过渡问题

    随着移动设备的普及,越来越多的网站和应用程序需要支持不同大小的屏幕和设备。为了解决这个问题,响应式设计应运而生。响应式设计是一种设计方法,可以让网站和应用程序自适应不同的屏幕尺寸和设备,提供更好的用户...

    1 年前
  • Redux 初探 -- 第三步:设计 reducers

    在前两篇文章中,我们已经学习了 Redux 的基本概念和使用方法,以及如何设计 actions。在这篇文章中,我们将深入探讨 Redux 的另一个核心概念:reducers。

    1 年前
  • Node.js:使用 socket.io 构建实时操作

    前言 随着互联网的发展,实时操作(Real-time Operation)的需求越来越大,例如在线聊天、多人协作、实时游戏等,传统的 HTTP 协议已经无法满足这些需求。

    1 年前
  • Jest 测试中遇到的 “ReferenceError: regeneratorRuntime is not defined” 解决方案

    在进行前端单元测试时,我们经常会使用 Jest 这个测试框架。但是,有时候我们会遇到一个问题,就是在测试中会出现 “ReferenceError: regeneratorRuntime is not ...

    1 年前
  • Angular 中的数据可视化技巧

    随着互联网时代的到来,数据的重要性越来越受到人们的关注。在前端开发中,数据可视化也成为了一个重要的技术点。Angular 作为一种流行的前端框架,提供了很多方便的工具和技巧来实现数据可视化。

    1 年前
  • 使用 CSS Reset 锁定网页样式,规范化浏览器表现

    在前端开发中,我们经常会遇到浏览器默认样式的问题。不同浏览器对于 HTML 元素的渲染方式不同,会导致网页在不同浏览器中显示效果不一致。为了解决这个问题,我们可以使用 CSS Reset。

    1 年前

相关推荐

    暂无文章