Web实时更新客户端数据

@Jan 9, 2014 

1        轮询方式实现客户端数据及时更新

 

在基于Web的即时通信、股票行情这样的系统中，需要客户端能够及时更新内容。由于B/S架构的特性（Http连接是无状态连接, 即服务器处理完客户的请求,并收到客户的应答后即断开连接），最简单的方式是通过客户端轮询的方式实现客户端刷新。

较早是将一个隐藏的iframe嵌在网页中，通过该iframe不断刷新来获取最新内容，现在通过Ajax来实现，通过每隔一段时间发起Http请求实现数据更新，并可以实现异步更新。轮询方式显而易见的缺点就是会造成服务器较大负载。

 

Note：传统的JavaApplet和ActiveX通过Socket通信可以实现数据的及时更新。

2        Comet 服务器推送数据到客户端

现在还有一种技术是Comet，Comet其实就是许多年前流行的CGI聊天室所用的Server Push技术。这个方法一开始是由Client对Server建立连接，但是Server在建立连接后，送出的header中要把content-type设为“multipart/x-mixed-replace”，就是server之后要分或多次返回多片段数据，让Client保持连接，并且把每次拿到的数据取代之前的数据片段。接着client就只要在保持不断的连接上等着server发送的数据就好了。Comet利用这种特性，加上Ajax能异步更新数据，变成开发rich client非常重要的技术。

但Comet不像Ajax那样容易用到现成的http server上，它需要server上有适当的程式配合。^[2]参考文献[1] 提供了使用Comet的代码片段。

3        HTML 5的数据更新

HTML5本身提供了对即时数据更新的支持。

HTML5中的Server-Sent 事件用来实现网页自动获取来自服务器的更新，Server-Sent是单方面的消息传递。通过服务器发送事件，更新能够自动到达，从而实现微博更新、赛事结果这样的应用。

 

HTML5的Web Socket 使浏览器和服务器之间可以建立一个基于 TCP 连接的双向通道。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用。

 

4        参考

[1] Comet 服务器“推”技术，实现web服务器“主动”向客户端发送数据。

http://www.360doc.com/content/11/0617/16/597197_127627804.shtml

 

[2] Comet(Server Push) on Turbogears(2)

blog.vgod.tw/tag/server-push

 

[3] HTML5服务器发送事件.

http://www.w3school.com.cn/html5/html_5_serversentevents.asp

 

[4] 使用 HTML5 WebSocket 构建实时 Web 应用.

http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/