`
flying188
  • 浏览: 17197 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

WEB 的实时事件

阅读更多
面这些可以实现基于web的实时事件通知的方法.在他们的实验性研究中在一个利用COMET推送方式实现(Dojo的Cometd库,dwr的反向Ajax)的AJAX应用和一个纯拉取方式的应用之间,对数据一致性、服务器性能、网络性能以及数据遗失进行了比较。

  使用Ajax可以开发出基于浏览器的具有高用户交互性和几乎不易觉察到延迟的web应用。实时的动态数据比如新闻标题、证券报价和拍卖行情都需要尽快地发送给用户。然而,AJAX仍然受限于web请求/响应架构的弱点,使得服务器不能推送实时动态的web数据。

  1.HTTP拉取方式:在这种传统的方法中,客户端以用户可定义的时间间隔去检查服务器上的最新数据。这种拉取方式的频率要足够高才能保证很高的数据精确度,但高频率可能会导致多余的检查,从而导致较高的网络流量。而另一方面,低频率则会导致错过更新的数据。理想地,拉取的时间间隔应该等于服务器状态改变的速度。

  2.HTTP流:这种方法由存在于不间断的HTTP连接响应中或某个XMLHttpRequest连接中的服务器数据流所组成。

  3.反转AJAX:服务流应用到AJAX,就是所谓的反转AJAX 或者COMET 。它使得服务器在某事件发生时可以发送消息给客户端,而不需要客户端显式的请求。目标在于达到状态变化的实时更新。COMET使用了HTTP/1.1中的持续连接的特性。通过HTTP/1.1,除非另作说明,服务器和浏览器之间的TCP连接会一直保持连接状态,直到其中一方发送了一条明显的“关闭连接”的消息,或者有超时以及网络错误发生。

  4.长时间轮询:也就是所谓的异步轮询,这种方式是纯服务器端推送方式和客户端拉取方式的混合。它是基于BAYEUX协议的。这个协议遵循基于主题的发布——订阅机制。在订阅了某个频道后,客户端和服务器间的连接会保持打开状态,并保持一段事先定义好的时间。如果服务器端没有事件发生,而发生了超时,服务器端就会请求客户端进行异步重新连接。如果有事件发生,服务器端会发送数据到客户端,然后客户端重新连接。

  =====================================

  基于 WEB 的实时事件通知方式大致有五种方案:HTTP拉取方式(pull),HTTP流,Long Polling,Flash XMLSocket方式,Java Applet。

  首先说下Comet这个词,Comet 这个词是最早由Alex Russell(Dojo Toolkit 的项目 Lead)提出的,称基于 HTTP 长连接、无须在浏览器端安装插件的“服务器推(Push)”技术为“Comet”。

  1.HTTP拉取方式(pull)

  在这种传统的方法中,客户端以用户可定义的时间间隔去检查服务器上的最新数据。这种拉取方式的频率要足够高才能保证很高的数据精确度,但高频率可能会导致多余的检查,从而导致较高的网络流量。而另一方面,低频率则会导致错过更新的数据。理想地,拉取的时间间隔应该等于服务器状态改变的速度。常见的实现如利用 "<meta http-equiv="refresh" c />" tag,当然利用xmlHttpRequest定时取也是一种方法。

  2.HTTP流(Push机制)

  HTTP流有两种形式:

  * Page Stream: 页面上不间断的HTTP连接响应(HTTP 1.1 Keep Alive).

  通过在 HTML 页面里嵌入一个隐蔵帧(iframe),然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。

  * Service Stream: XMLHttpRequest连接中的服务器数据流。

  客户端是在 XMLHttpRequest 的 readystate 为 4(即数据传输结束)时调用回调函数,进行信息处理。当 readystate 为 4 时,数据传输结束,连接已经关闭。Mozilla Firefox 提供了对 Streaming AJAX 的支持,即 readystate 为 3 时(数据仍在传输中),客户端可以读取数据,从而无须关闭连接,就能读取处理服务器端返回的信息。IE 在 readystate 为 3 时,不能读取服务器返回的数据,目前 IE 不支持基于 Streaming AJAX。

  注:使用 Page Stream(iframe) 请求一个长连接有一个很明显的不足之处:IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成,而且 IE 上方的图标会不停的转动,表示加载正在进行。Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题,并将这种方法用到了 gmail+gtalk 产品中。Alex Russell 在“What else is burried down in the depth's of Google's amazing JavaScript?”文章中介绍了这种方法。Zeitoun 网站提供的 comet-iframe.tar.gz,封装了一个基于 iframe 和 htmlfile 的 JavaScript comet 对象,支持 IE、Mozilla Firefox 浏览器,可以作为参考。(http://alex.dojotoolkit.org/?p=538)

  3.长时间轮询(Long Polling)

  也就是所谓的异步轮询(Asynchronous Polling),这种方式是纯服务器端推送方式和客户端拉取方式的混合。它是基于BAYEUX协议(http://svn.xantus.org/shortbus/trunk/bayeux/bayeu x.html)的。这个协议遵循基于主题的发布——订阅机制。在订阅了某个频道后,客户端和服务器间的连接会保持打开状态,并保持一段事先定义好的时间(默认为45秒)。如果服务器端没有事件发生,而发生了超时,服务器端就会请求客户端进行异步重新连接。如果有事件发生,服务器端会发送数据到客户端,然后客户端重新连接。

  1. 服务器端会阻塞请求直到有数据传递或超时才返回。

  2. 客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。

  3. 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。

  4.Flash XMLSocket(push机制)

  如果 Web 应用的用户接受应用只有在安装了Flash 播放器才能正常运行,那么使用 Flash 的 XMLSocket 是一个可行的方案。

  这种方案实现的基础是:

  1. Flash 提供了 XMLSocket 类(Flash 7.0.14以上版本)。

  2. JavaScript 和 Flash 的紧密结合:在 JavaScript 可以直接调用 Flash 程序提供的接口。

  具体实现方法:在 HTML 页面中内嵌入一个使用了 XMLSocket 类的 Flash 程序。JavaScript 通过调用此 Flash 程序提供的套接口接口与服务器端的套接口进行通信。JavaScript 在收到服务器端以 XML 格式传送的信息后可以很容易地控制 HTML 页面的内容显示。

  关于如何去构建充当了 JavaScript 与 Flash XMLSocket 桥梁的 Flash 程序,以及如何在 JavaScript 里调用 Flash 提供的接口,我们可以参考 AFLAX(Asynchronous Flash and XML)项目提供的 Socket Demo 以及 SocketJS(请参见 [http://www.aflax.org/ Asynchronous Flash and XML,提供了强大的 Flash、Javascript 库和很多范例。])。

  Javascript 与 Flash 的紧密结合,极大增强了客户端的处理能力。从 Flash 播放器 V7.0.19 开始,已经取消了 XMLSocket 的端口必须大于 1023 的限制。Linux 平台也支持 Flash XMLSocket 方案。但此方案的缺点在于:

  1. 客户端必须安装 Flash 播放器;

  2. 因为 XMLSocket 没有 HTTP 隧道功能,XMLSocket 类不能自动穿过防火墙;

  3. 因为是使用Socket接口,需要设置一个通信端口,防火墙、代理服务器也可能对非 HTTP 通道端口进行限制;

  4. 必须使用XML格式作为消息格式,数据冗余增大。

  此方案在一些网络聊天室,网络互动游戏中得到广泛使用。

  5. Java Applet(Push机制)

  类似于Flash XMLSocket方式。目前已经很少使用,原因极可能是因在手机等移动终端缺少支持。

  总结和建议:

  如果我们想要高数据一致性和高网络性能,我们就应该选择推送方式。但是,推送会带来一些扩展性问题;服务器应用程序CPU使用率是拉取方式的7倍。根据TUD(http://swerl.tudelft.nl/twiki/pu ... D-SERG-2007-016.pdf)的测试结果,服务器性能会在350-500个用户时趋于饱和。对于更大数量的用户,服务器端需要维护大量并发的长连接。在这种应用背景下,服务器端需要考虑负载均衡和集群技术;或是在服务器端为长连接作一些改进。

  使用拉取方式,要想达到完整的数据一致性以及很高的网络性能是很困难的。如果拉取的时间间隔大于数据更新的时间间隔,就会发生一些数据的遗失。而如果小于数据更新的时间间隔,网络性能就会受到影响。拉取方式只有在拉取时间间隔等同于数据更新时间间隔时,才会恰到好处。但是,为了达到那样的目标,我们就需要提前知道准确的数据更新时间间隔。然而,数据更新的时间间隔很少是静态不变并可以预知的。这使得拉取方式只有在数据是根据某种特定模式发布的情况才有用。

  控制信息与数据信息使用不同的 HTTP 连接

  使用长连接时,存在一个很常见的场景:客户端网页需要关闭,而服务器端还处在读取数据的堵塞状态,客户端需要及时通知服务器端关闭数据连接。服务器在收到关闭请求后首先要从读取数据的阻塞状态唤醒,然后释放为这个客户端分配的资源,再关闭连接。所以在设计上,我们需要使客户端的控制请求和数据请求使用不同的 HTTP 连接,才能使控制请求不会被阻塞。

  在实现上,如果是基于 iframe 流方式的长连接,客户端页面需要使用两个 iframe,一个是控制帧,用于往服务器端发送控制请求,控制请求能很快收到响应,不会被堵塞;一个是显示帧,用于往服务器端发送长连接请求。如果是基于 AJAX 的长轮询方式,客户端可以异步地发出一个 XMLHttpRequest 请求,通知服务器端关闭数据连接。

  在客户和服务器之间保持“心跳”信息

  在浏览器与服务器之间维持一个长连接会为通信带来一些不确定性:因为数据传输是随机的,客户端不知道何时服务器才有数据传送。服务器端需要确保当客户端不再工作时,释放为这个客户端分配的资源,防止内存泄漏。因此需要一种机制使双方知道大家都在正常运行。在实现上:

  1. 服务器端在阻塞读时会设置一个时限,超时后阻塞读调用会返回,同时发给客户端没有新数据到达的心跳信息。此时如果客户端已经关闭,服务器往通道写数据会出现异常,服务器端就会及时释放为这个客户端分配的资源。

  2. 如果客户端使用的是基于 AJAX 的长轮询方式;服务器端返回数据、关闭连接后,经过某个时限没有收到客户端的再次请求,会认为客户端不能正常工作,会释放为这个客户端分配、维护的资源。

  3. 当服务器处理信息出现异常情况,需要发送错误信息通知客户端,同时释放资源、关闭连接。
分享到:
评论

相关推荐

    ASP.NET2.0 WEB实时进度条

    总之,ASP.NET 2.0结合AJAX技术,提供了强大的工具来构建实时反馈的Web应用,使得开发者能够构建更加互动和用户友好的界面。实时进度条是现代Web应用中不可或缺的一部分,它提高了用户的满意度,降低了他们对等待的...

    构建实时Web应用:基于HTML5 WebSocket、PHP和jQuery(对应英文版)

    实时Web应用的核心在于处理实时事件,这就需要编写能够实时响应服务器或客户端变化的代码。jQuery在这里扮演了重要的角色,可以用来触发各种视觉效果或动态内容更新,使得应用界面能够响应后端的数据变化。 ### ...

    web点击按钮事件弹出画板功能的画板插件

    在视频教学场景下,这个画板插件可以用于教师在讲解过程中进行实时标注,增强教学效果。例如,教师可以在画板上绘制示意图、标注关键点,甚至录制画板操作过程,与视频同步播放,提供更加直观的教学体验。为了集成这...

    Web实时推送Demo by SignalR

    本篇文章将围绕“Web实时推送”这一主题,以 SignalR 为例,深入探讨其实现原理和应用。 SignalR 是一个开源库,专门用于简化ASP.NET应用程序中的实时通信。它支持多种传输方式,包括WebSocket、Server-Sent Events...

    HTML5 WebSocket 构建实时 Web 应用

    传统的HTTP协议是基于请求-响应模式的,而WebSocket则提供了一个持久化的连接,允许服务器和客户端进行实时、低延迟的数据交换,极大地优化了实时Web应用的性能。 WebSocket协议的核心特性包括以下几个方面: 1. *...

    浅析Comet技术在Java Web实时系统开发中的应用.pdf

    浅析Comet技术在Java Web实时系统开发中的应用 Comet技术是Java Web实时系统开发中的关键技术之一,它通过实现服务器推送(Server Push)来解决AJAX需要定时频繁发送请求的问题。Comet技术有两种实现方式:长轮询...

    web时间插件.

    在Web开发领域,时间插件是一种非常实用的工具,它能帮助开发者在网页上实现与时间相关的功能,如倒计时、实时时钟、日期选择器等。本篇将深入探讨"web时间插件"这一主题,从其基本概念、用途、实现方式以及常见插件...

    大华摄像头web3.0二次开发webplugin

    【大华摄像头Web3.0二次开发WebPlugin详解】 大华摄像头Web3.0二次开发WebPlugin是一款专为开发者设计的工具,旨在帮助用户利用Web技术进行摄像头的高级功能定制和扩展。它允许开发者通过浏览器插件的方式,接入...

    web端连接大华摄像头demo

    8. **JavaScript和jQuery**:实现Web端交互功能通常会用到JavaScript,可能还会结合jQuery库,它简化了DOM操作、事件处理和AJAX请求等任务。 9. **响应式设计**:为了适应不同设备的屏幕尺寸,Web页面可能需要采用...

    海康威视web 播放,实时,历史,地图

    海康威视作为全球领先的安防产品及解决方案提供商,其在Web播放、实时监控、历史回放和地图集成方面的技术有着深厚的积累。在这个话题中,我们将深入探讨这些关键领域的技术细节和应用场景。 首先,Web播放是现代...

    webUI 4.27版本的插件

    这些API可能涵盖了加载和刷新网页、发送和接收数据、以及触发特定Web事件等功能,大大降低了集成复杂界面的门槛。 在安全性方面,WebUI可能采用了沙盒机制,以防止恶意代码对UE4项目或玩家数据造成威胁。这包括限制...

    web端时间轴插件,兼容移动端

    在Web开发中,时间轴(Timeline)是一种常用的数据可视化工具,它能清晰地展示一系列事件按照时间顺序排列的情况。在给定的标题“web端时间轴插件,兼容移动端”和描述“JS时间轴插件,web端时间轴插件,兼容移动端...

    毕业设计论文参考 Web实时客服系统

    【Web实时客服系统】是一种基于互联网的客户服务解决方案,旨在提供即时、高效的支持,提升客户满意度。在这样的系统中,ActiveX语音控件扮演了关键角色,它是一种可重用的软件组件,基于组件对象模型(COM),能够...

    【虚幻引擎UE】UE5实现WEB和UE通讯方法(基于WEBUI插件)

    虚幻引擎UE5是 Epic Games 推出的最新版本,为游戏开发、影视制作等领域提供了强大的实时渲染和交互能力。本篇文章将详细讲解如何在UE5中实现与Web的通讯,利用WEBUI插件来搭建桥梁,使得游戏或应用能够与网页进行...

    基于HTML5的实时Web数据监测系统的设计与研究.docx

    其中,Node.js因其高效的JavaScript执行环境V8引擎,以及支持事件驱动、非阻塞I/O模型,成为了构建WebSocket服务器的热门选择,特别适合高并发、实时性强的Web应用。 在设计实时Web数据监测系统时,需要注意以下几...

    何佳辰:实时Web的后端架构实践

    3. 事件驱动架构:实时Web后端架构常常需要事件驱动的方式来响应用户的操作或系统的某些事件,这通常依赖于消息队列、事件总线等中间件技术。 4. 负载均衡与扩展性:考虑到实时数据流的高并发特性,后端架构设计应...

    js webflow WEB工作流

    4. **事件驱动编程**:Webflow通常采用事件驱动的编程模型,当某个事件(如用户操作、数据变化)发生时,触发相应的工作流程。这使得系统能够对实时变化做出响应,提高了用户体验和系统效率。 5. **自定义逻辑**:...

    web_socket java版实时聊天室

    "web_socket"标签说明了这个项目与WebSocket技术紧密相关,开发者可以借此学习WebSocket的使用方法、事件处理以及数据交互等。 "java"标签表明后端服务器是用Java语言编写的,Java以其稳定性和跨平台性,是构建此类...

Global site tag (gtag.js) - Google Analytics