HTML服务器推送技术简介

1. 为什么需要服务器推送？

最大的优点：实时

适用场景：实时股票价格、商品价格、实时新闻、Twitter/weibo timeline、基于浏览器的聊天系统

2. Web交互的发展历程？

F5手动刷新 --> AJAX轮询(Polling) --> Comet实时更新 --> HTML5实时通信

随着AJAX的流行，当前大部分网站都采取轮询的方式进行更新，但是这种方式的效率是十分低下的；一方面，服务器端不是总有数据更新，所以每次请求不一定都有更新；另一方面，当发起请求的客户端数量增加，服务器端的接受的请求数量会大量上升，无形中就增易做图务器的压力。

另外，轮询方式的实时性也是不够的，比如基于Web的聊天功能，对实时性要求就很高；于是，comet出现了。Comet是基于HTTP长连接的服务器推送技术，主要有流（streaming）方式和长轮询（long-polling）方式。Comet工作原理：用户发起请求后就挂起，等待服务器返回数据，在此期间不会断开连接。流方式和长轮询方式的区别是：对于流方式，客户端发起连接就不会断开连接，而是由服务器端进行控制。当服务器端有更新时，刷新数据，客户端进行更新；而对于长轮询，当服务器端有更新返回，客户端先断开连接，进行处理，然后重新发起连接。

Comet虽然是一个进步，但是其仍然是单向通信，不能适应Web应用的飞速发展；于是，各种新技术不断涌现，其中WebSocket在Google的力推之下已经成为业界标准，并不断完善中。

下面简单介绍一下Comet的实现方式。

3. Comet的实现方式

3.1 基于AJAX和基于IFrame的流（streaming）方式

从上图可以看出，每次数据传送不会关闭连接，连接只会在通信出现错误时，或是连接重建时关闭（一些防火墙常被设置为丢弃过长的连接，服务器端可以设置一个超时时间，超时后通知客户端重新建立连接，并关闭原来的连接）。

3.2 基于AJAX的长轮询（long-polling ）方式

从上图可以看出，客户端发出请求后挂起，服务端在接到请求也挂起，等待有更新时返回数据并断掉连接，然后客户端再发起新的连接

4. HTML5实时通信

4.1 Server-Sent Event，只支持单向的从服务器到客户端的通道

Server-Sent Events实际上将Comet技术进行了标准化，Server-Sent Events规范“定义了API来打开一个HTTP连接，通过该连接能够获取从服务器推送的通知”

Server-Sent Events包含新的HTML元素EventSource和新的MIME类型 text/event-stream，这个MIME类型定义了事件框架格式

EventSource代表的是接收事件的客户端的终点。客户端通过创建EventSource对象来打开一个event stream。创建EventSource对象时，该对象接收一个事件来源的URL作为其构造函数的参数。当每次收到新的事件数据时onmessage事件处理器会被调用

Server-Sent Event是基于HTTP streaming的。如上所述，response会一直打开，当服务器端有事件发生的时候，事件会被写入response中

4.2 WebSocket，基于TCP之上定义了帧协议，支持双向的通信

WebSocket 是HTML5一种新的协议。它是实现了浏览器与服务器的双向通讯

在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

现在，很多网站为了实现即时通讯，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。

而比较新的技术去做轮询的效果是Comet，使用了AJAX。但这种技术虽然可达到双向通信，但依然需要发出请求，而且在Comet中，普遍采用了长链接，这也会大量消耗服务器带宽和资源。

面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。
作者：fwj380891124

补充：Web开发 , ASP.Net ,