WEB通讯交互的几种方式

WEB通信交互的几种方式

WEB通讯交互的几种方式

WEB通信交互的几种方式 - 实时通信发展过程简介

 简单介绍一下现在的WEB通信有以下几种方式:最基本的http请求方式,Ajax轮询,Ajax长轮询,HTML5推送事件,HTML5的WebSocket。

最基本的http请求方式:

  1. 客户端向服务器端发起一个请求

  2. 服务器端接收到请求后会在服务器端进行业务逻辑处理运算

  3. 服务器端返回结果到客户端

WEB通讯交互的几种方式

一个很实在的例子就是当你打开这个页面是,浏览器根据网址向网站服务器发送请求,服务器端返回这个页面的内容,然后你开始浏览这篇文章,在你阅读这 篇文章的时候服务器端,如果作者更新了这篇文章,你不重新F5刷新页面,那你是不知道这篇文章已经被更新了的,而且刷新一个页面所耗费的资源是比较多的。 这是比较原始的一直更新内容的方式,当然像这样的技术文章也不需要实现实时的更新。

AJAX 轮询:

  1. 客户端向服务器端发起请求,和上面最基本的请求原理是一样

  2. 不同的是请求方式是通过Ajax实现,设定一定的间隔时间对服务器发送请求(比如0.5 秒)

  3. 服务器端返回结果到客户端

WEB通讯交互的几种方式

这种方式的区别是其实就是在于Ajax异步调用和设置间隔时间,根据间隔时间请求服务器端,但是这个间隔时间到底该设多少,这个不好定。太长可能信息更新不及时,太短可能服务器鸭梨山大,浪费资源。

AJAX 长轮询:

  1. 客户端向服务器端发起请求,和上面最基本的请求原理是一样

  2. 还是通过Ajax异步通信,设定一定的间隔时间对服务器发送请求

  3. 服务器端在收到客户端请求后,不是马上对客户端响应查询结果,保持连接,不断的在服务器端调客户端请求的那个查询业务,直到查到新的信息

  4. 一点查询到新信息,服务器端立即返回结果给客户端,断开与客户端的连接

  5. 客户端收到新的信息后,会再次向服务器端发出请求

WEB通讯交互的几种方式

这种方式的有点大家也看到了,能减少客服端和服务器端连接/断开的频率,但是服务器端要维护长连接也需要耗费相应的资源。对轮询和长轮询的更多介绍,大家可以参考Long Polling (长轮询) 原理及PHP代码的实现

HTML5 Server Sent Events (SSE) / EventSource:

  1. 客户端向服务器端发起请求,和上面最基本的请求原理是一样

  2. 在浏览器端JavaScript 使用的 EventSource 对象发送请求和服务器端建立连接,服务器端的响应的内容类型是“text/event-stream”

  3. 一旦服务器端有新的信息就会推送到客户端

WEB通讯交互的几种方式

相对来说是实现了实时信息更新(服务器端到客户端),但是服务器端需要实现对服务器端事件的轮询。具体SSE例子,请查看http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/

HTML5 Websockets:

  1. 客户端向服务器端发起请求,和上面最基本的请求原理是一样

  2. 在浏览器端JavaScript使用的 WebSocket对象和服务器端建立连接

  3. 一旦连接建立,服务器端和客户端可以相互交互数据,而不是单纯的服务端向客户端发送信息

WEB通讯交互的几种方式

WebSocket是HTML5新引入的技术,允许后台随时向前端发送文本或者二进制消息,WebSocket是一种全新的协议,不属于http无 状态协议,协议名为”ws”,这意味着ws不是http,所以传统的web服务器不一定支持,需要服务器与浏览器同时支持, WebSocket才能正常运行,目前的支持还不普遍,需要特别的web服务器和目前比较新的浏览器。关于WebSocket的例子大家可以参考 Tomcat提供的Example,下载Tomcat7以上版本,运行服务器,然后就可以在http://localhost:8080 /examples/websocket/drawboard.xhtml上面实现多人绘画,大家都能及时的看到画板的更新。

Comet:

Comet 是一种新的Web 应用架构。基于这种架构开发的应用中,服务器端会主动以异步的方式向客户端程序推送数据,而不需要客户端显式的发出请求。Comet 架构非常适合事件驱动的 Web 应用,以及对交互性和实时性要求很强的应用,如股票交易行情分析、聊天室和 Web 版在线游戏等。它的主要不同之处就在于它会客户端保持一种长连接状态,直到消息被传递后才释放。其实到这里这才是真正的算得上实时通讯了。更多信息请查看 APE框架,http://ape-project.org/