创建基于Web的实时系统

当创建基于Web的实时系统时，通常我们会使用到以下技术：

轮询
长连接
长轮询
Flash Socket
WEB Socket

下面我们对这些技术作个简单介绍。

 

传统轮询(Traditional Polling)

当前Web应用中较常见的一种持续通信方式，通常采取setInterval或者setTimeout实现。例如如果我们想要定时获取并刷新页面上的数据，可以结合Ajax写出如下实现：

setInterval(function() {
    $.get("/path/to/server", function(data, status) {
        console.log(data);
    });
}, 10000);

客户端定时向服务器发送ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
优点：后端程序编写比较容易。
缺点：请求中有大半是无用，浪费带宽和服务器资源。

http 长连接：

目前 http 协议普遍使用的是 1.1 版本， 之前有个 1.0 版本, 两者之间的一个区别是 1.1 支持 http 长连接, 或者叫持久连接.1.0 不支持 http 长连接, 每次一个 http 请求响应后都关闭 tcp 连接，下个 http 请求会重新建立 tcp 连接。

所谓 http 长连接就是多个 http 请求共用一个 tcp 连接，这样可以减少多次临近 http 请求导致 tcp 建立关闭所产生的时间消耗。

通常在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据。比如早期的Gmail聊天

优点：消息即时到达，不发无用请求。
缺点：服务器维护一个长连接会增加开销。

http 长轮询：

http 长轮询是服务器收到请求后如果有数据, 立刻响应请求; 如果没有数据就会 hold 一段时间, 这段时间内如果有数据立刻响应请求; 如果时间到了还没有数据, 则响应 http 请求;浏览器受到 http 响应后立在发送一个同样 http 请求查询是否有数据;

客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

优点：在无消息的情况下不会频繁的请求。
缺点：服务器hold连接会消耗资源。浏览器端对统一服务器同时 http 连接有最大限制, 最好同一用户只存在一个长轮询;
服务器端没有数据 hold 住连接时会造成浪费, 容易产生服务器瓶颈;
实例：WebQQ、Hi网页版、Facebook IM。

 

Flash Socket：

在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。
优点：实现真正的即时通信，而不是伪即时。
缺点：客户端必须安装Flash插件；非HTTP协议，无法自动穿越防火墙。
实例：网络互动游戏。

 

WebSocket

WebSocket是HTML 5规范的组成部分之一。WebSocket相较于上述几种连接方式，实现原理较为复杂，用一句话概括就是：客户端向WebSocket服务器通知一个带有所有接收者ID（recipients IDs）的事件（event），服务器接收后立即通知所有活跃的（active）客户端，只有ID在接收者ID序列中的客户端才会处理这个事件。由于WebSocket本身是基于TCP协议的，所以在服务器端我们可以采用构建TCP Socket服务器的方式来构建WebSocket服务器。

优点：实现真正的即时通信，而不是伪即时。
缺点：不是所有浏览器都支持（虽然大部分都已经支持）。