《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.3 Web实时交互方式——轮询、长轮询、长连接及推送

1.3 Web实时交互方式——轮询、长轮询、长连接及推送

如何实时获取服务器端的最新数据,是Web实时交互关注的内容。在介绍Web实时交互方式前,先来具体了解HTTP的通信机制,为之后概念的精准定义做铺垫。HTTP通信过程可分为4步。

第1步:HTTP是基于传输层的TCP协议,在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器在TCP层建立连接。在TCP层进行“三次握手”之后,建立了TCP连接,此时HTTP就可以进行传输了(注意,由于HTTP为无连接、无状态的协议,在本书之后的章节内容中,若提到打开、保持或关闭连接时,其中的“连接”均指TCP层的连接)。

第2步:建立连接后,客户端发送一个请求给服务器。

第3步:服务器接到请求后,给予相应的响应信息。

第4步:客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上,然后客户端与服务器断开连接。

需要注意的是,在第4步服务器响应请求后是否断开连接,要看协议版本(HTTP 1.0协议在服务器响应后,会关闭连接;HTTP 1.1协议在服务器响应后,默认会保持连接,直到超时或出错),要看是否客户端主动请求断开连接、要看是否服务器端主动断开连接,要看是否出错或是否连接超时等对连接进行断开。

在很多情况下,保持住连接,有以下两点好处。

(1)客户端和服务器可以继续通过保持住的连接发送请求及响应,节省了为每个请求建立新连接所需的时间、资源。这在客户端内存、CPU等资源比较有限,或服务器端需要处理大量并发请求时,保持连接,重用该连接的传输通道是非常有必要的技术手段。

(2)当客户端向服务器端发送请求后,服务器端若无需要响应给客户端的最新信息时,阻塞该请求不进行响应,并保持住连接;等到服务器端有信息需要响应该客户端时,使用保持住的连接进行响应。该技术手段属于实时Web交互技术,可以有效解决1.1节问题(3)中实时更新服务器端信息的需求。

基于上述基础知识,在大量分析相关Web实时交互技术的基础上,总结并清晰定义4种Web交互技术,即轮询、长轮询、长连接及推送。

轮询:客户端定时发送请求,服务器端接收到客户端请求后,马上进行响应,并关闭连接。

长轮询:客户端发送请求,服务器端接收到客户端请求后进行阻塞,并保持连接;当服务器端有数据需要响应时,使用保持住的连接进行响应,并关闭连接。

长连接:客户端发送请求,服务器端接收到客户端请求后进行阻塞,并保持连接;当服务器端有数据需要响应时,使用保持住的连接进行响应,并保持住连接。

推送:客户端与服务器端建立连接后,服务器端可以直接将数据推送给客户端。

其中,轮询是不断、循环使用基于HTTP协议的传统Web交互方式对服务器端数据进行获取,但正如1.1节所述,其在满足实时更新服务器端信息时有一定延迟。除此之外,长轮询、长连接及推送都可以满足实时更新服务器端信息,属于实时Web交互技术的范畴。

本节中介绍的iframe、AJAX和WebSocket是三项Web异步交互技术,可使用轮询、长轮询、长连接及推送4种Web实时交互方式,与服务器进行交互。

时间: 2024-11-05 12:09:26

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.3 Web实时交互方式——轮询、长轮询、长连接及推送的相关文章

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 导读

前言 Web异步与实时交互--iframe AJAX WebSocket开发实战 本书思路及意义 异步交互.实时交互作为Web交互技术中的热点和难点,越来越多地被研究和使用. 在Web异步交互方面,AJAX作为当今非常热门和流行的异步传输技术,已被行业广泛采用.但在AJAX这种真正的异步传输技术出现之前,一般使用iframe模拟实现异步传输,目的是保证网页在不刷新的情况下进行数据传输更新网页内容,从而提高用户的体验.目前,iframe实现模拟异步传输这一技术,仍然经常被程序员使用. 而WebSo

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 第1章 Web交互开发相关技术概述

第1章 Web交互开发相关技术概述 Web异步与实时交互--iframe AJAX WebSocket开发实战Web交互开发中的异步.实时Web交互技术,是当前Web应用技术研究领域的新热点之一.本章首先对传统Web交互技术进行了简单介绍,进一步从Web异步交互技术和Web实时交互方式两个角度,对Web交互开发中的异步.实时等系列技术进行了概要介绍.分析,并给出了本书的思路及内容安排.

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 第2章 iframe实现模拟异步交互

第2章 iframe实现模拟异步交互 Web异步与实时交互--iframe AJAX WebSocket开发实战最初,客户端只能通过设定自动刷新时间的方式(如使用标签,或通过JavaScript代码进行设定)使浏览器主动刷新,向服务器端发送请求,以轮询的方式获取服务器端的最新信息.通常情况下,用户要获取最新的信息,必须刷新浏览器中的整个页面来获取服务器端的响应数据.但是,在多数情况下页面中需要更新的信息只是很小一部分,其他信息不变.这样,在刷新整个页面时,不仅传送了额外的信息,增加了网络的负担,

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.4 内容安排

1.4 内容安排 本书以介绍iframe.AJAX和WebSocket三项Web异步交互技术为基本主线,在此基础上,进一步对iframe.AJAX和WebSocket分别通过轮询.长轮询.长连接和推送方式,实现对Web交互时的性能进行测试和深入分析. 章节内容安排为,第2章到第7章主要介绍上述三项技术的相关知识.关键代码解析以及案例实现,重点在技术知识讲解.技术上手应用方面:第8章,是以前7章内容为基础,对相关理论.技术细节.不同方案进行进一步深入地测试.分析,目的在于使读者更加清晰.深入地了解

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.2 Web异步交互技术——iframe、AJAX及WebSocket

1.2 Web异步交互技术--iframe.AJAX及WebSocket 随着Web交互技术的发展,出现了使用iframe模拟异步传输,来实现局部刷新页面获取数据的功能,从而解决1.1节中的问题(1)(2).iframe是一种HTML标记,它会创建包含另外一个文档的内联框架,通过iframe框架可以在当前页面中显示其他页面的信息.这时将iframe的src属性设置为对另外一个页面的连接请求,并在当前页面中通过JavaScript动态更新iframe的内容,就可以将服务器端的数据响应到客户端,而不

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.1 基于HTTP协议的Web交互

1.1 基于HTTP协议的Web交互 HTTP协议(Hyper Text Transport Potocol,超文本传输协议),是基于服务器/客户端模式的无连接.无状态的协议.基于HTTP协议的Web应用中,所有的请求是由客户端发起的,服务器处于被动响应的地位.然而,服务器却相当于是信息的发布者,当有新信息产生时,服务器并不能主动将新信息发送给客户端,必须等待客户端主动发起访问请求建立连接后才能发送给客户端. 当遇到实时监控.即时通信.在线互动等的Web交互开发需求(如设备监控.聊天室.股票行情

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.1 简介

2.1 简介 服务器端响应时间是用户体验中关键的一部分.为了解决之前技术更新页面时,服务器端响应时间长.页面刷新速度慢.用户体验度差等问题,使用iframe模拟异步交互技术来实现局部刷新页面获取数据.iframe是一种HTML标签,它会创建包含另外一个文档的内联框架.通过iframe框架可以在当前页面中显示其他页面的信息.这时将iframe的src属性设置为对另外一个页面的长连接请求,并在当前页面中通过JavaScript动态更新iframe的内容,即可将服务器端响应的数据无刷新显示在主页面.

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.2 相关关键技术及工作原理

2.2 相关关键技术及工作原理 2.2.1 DOM DOM(Document Object Model)即文档对象模型.DOM是与系统平台和编程语言无关的W3C官方标准.W3C对DOM的定义是:"一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容.结构和样式进行访问和修改." DOM本质上是一个树形结构模型,它将整个页面映射为一个由层次节点组成的文档.每个节点都有一系列的子节点:每个子节点都有唯一的父节点:节点又分为元素节点和文本节点两种,元素节点中有属性

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.3 示例程序

2.3 示例程序 下面使用iframe模拟异步交互技术,使用轮询的方式,实现数字累加功能. 2.3.1 客户端关键代码客户端代码主要包含3个部分:定时向服务器端发送请求.接收服务器端返回的信息及展示服务器端返回的信息. 关键代码如下所示: <html> <head> <script type="text/javascript"> function addMessage(counts){ //将服务器端发送回的信息更新到文本框 var messageE