《HTML5 中新的WEB交互方式WebSocket》.pdf

HTML5 中新的WEB 交互方式 --msn:xiaohuiq@ Overview 首先设想一下这样的需求： 使用 WEB ，来构建实时的展示页面来展示股票信息、火车票余票、医疗设备读取的信 息，或是即时聊天等等 你想到了什么实现方式？轮询？长轮询？flashsocket ？…好吧，不管是什么方式，在使 用过程中你感觉这种方式如何？是不是有些缺点或是值得改进的地方？ WebSocket is coming! HTML5 中的WebSocket 主要就是为了解决这种实时交互而设计的！这是一种全双工的通信 方式，实现了服务端完美的PUSH ！ 当然，在介绍这个激动人心的技术之前还是要先简单说一下传统的WEB 交互方式，对各个 技术都了解了才懂得取舍 WEB 开发人员看到这个图总是会感觉很亲切，接下来我们就看看在这种请求响应模型中如 何做到即时交互 Constantly Refresh 简述 HTTP 协议原本是设计用于传输简单的文档和文件，而非实时的交互。 根据HTTP 协议，一个客户端如浏览器，向服务器打开一个连接，发出请求，等待 回应，之后关闭连接。如果客户端需要更多数据，则需要打开一个新连 接，以此循 环往复。如果服务器有了新的信息，它必须等待客户端发出请求而不是立即发送消 息。 举个例子：我（客户端）要从你（服务器）那运货，先修条路，然后派个使者去通 知你要什么货，然后你把货给我送过来，最后把修好的路作废，再想运送别的货物， 对不起，请重新修路 那么要看到页面中要展示信息的最新情况，应该怎么办？不断刷新！是的，以前就 是这么做的 评价 这种方式现在已经被完全淘汰，发送了很多不必要的请求，浪费大量带宽，页面不 断刷新，用户体验差，而且做不到真正的实时，服务端有了新数据也不能立马推送 给客户端，使得秒级的实时信息交互难以实现 Polling 简介 这可以算是第一种风格的comet 每隔一固定时间发送一个Ajax 请求拉取数据，根据服务端返回的数据通过DOM 操 作做一些展现 评价 比不断刷新好一些，浏览器不用一闪一闪的重新加载了，而且只传送感兴趣的那一 小部分数据，占用带宽变小。但是，客户端并不知道服务端什么时候准备好了自己 感兴趣的数据，无法很好的设置轮询时间，只能根据经验设置一个固定的时间，这 样就会发送很多不必要的请求 Long-Polling 简介 这可以算作第二种风格的comet 客户端发送一个 request 给服务端，服务端会在一个设定的时间段内保持这个 request 为打开状态，如果在这段时间内， 服务端程序收到一个notification，就会 把携带了最新消息的 response 回送给客户端，如果在这个设定的时间内一直没有 收到新消息，没有收到 notification，服务端程序在时间到的时候同样会发送一个 response 给客户端 评价 长 轮询相对于一般轮询的优点在于，数据一旦可用，便立即从服务器发送到客户 机。请求可能等待较长的时间，期间没有任何数据返回，但是一旦有了新的数据， 它将 立即被发送到客户机。因此没有延时 这种情况在服务端消息比较少的情况下表现还不错，但是服务端有大量消息要推送 的时候，Long-Polling 与Polling 相比，实际并没有什么本质的提高，它还是需要等 待客户端的请求，然后才能发消息，而不是自动推送！ Streaming 简介 这是第三种风格的comet 按照这种风格，服务器将数据推回客户机，但是不关闭连接。连接将一直保持开启， 直到过期，并导致重新发出请求。XMLHttpRequest 规范表明，可以检查readyState 的 值是否为 3 或 Receiving （而不是4 或 Loaded），并获