WebSocket在Web实时通信领域的研究
李代立，陈榕 （同济大学基础软件工程中心 上海 200092）
摘 要: 分析目前几种Web实时事件响应方案的特点，着重研究基于HTML5 WebSocket的实时通信机制，并通
过WebSocket与AJAX长轮询的实验对比，展示WebSocket在Web实时通信领域的应用开发方法和效率，
为Web实时通信提供低延时、低网络吞吐量的解决方案。
关键词: WebSocket；Web实时通信； AJAX
The Research of WebSocket Based on Web Real-time Communication
LI Dai-li ,CHEN Rong
(System Software Engineering Centre of Tongji University, Shanghai 200092, China)
Abstract: Some schemes and their features are introduced on web real-time communications. More emphasis is put on studying real-time communication mechanism based on HTML5 Web Socket. Then a comparative experiment is made between WebSocket and AJAX to represent the simple method and high efficiency in developing real-time web applications by WebSocket . At last we provide a low latency and low network throughput solution. Keywords：WebSocket; Web real-time communication; AJAX
0. 引言
在Web应用高速发展的今天，Web即时数据通信变得越加强烈。HTTP协议是Web实时通信的基础，浏览器与服务端建立连接浪费了大量时间和网络吞吐量，加重了服务端负担。HTML5 WebSocket的实现使Web应用不需要每次都发起HTTP请求来建立与服务端的连接，而是仅在第一次请求连接后就建立起TCP Socket连接，从而基本做到通信的时时响应，提高了通信效率。
[1]
1. 传统Web实时通信方案
1.1
HTTP拉取方式
如图1所示，左侧为传统的web应用模型，可以通过设置\标签定时Request实现HTTP Pull，右侧为AJAX Web应用模型，可以通过XMLHttpRequest定时取服务器端数据实现。
基金项目：上海市高新技术产业化重点项目计划-基于第三代移动通讯网的移动互联网应用和服务平台 作者简介: 李代立（1986--），男，山东省济宁市人，硕士研究生，研究方向：嵌入式操作系统、系统软件支撑技术；陈榕（1957--），男，北京人，博士生导师，教授，中心主任，科泰世纪首席科学家，研究方向：嵌入式系统，构件技术。
- 1 -
UIUIBrowserBrowserJS CallHTML+CSSHTTP RequestHTML+CSSAjax EngineWeb ServerHTTP RequestXML DataServerServerWeb/XML ServerDataStore,Backend processingDataStore,Backend processing传统的Web应用模型Ajax Web应用模型
图1 传统Web应用模型与Ajax Web应用模型
该方案健壮易用的特点使其经常被应用于Web系统中，例如，Adaptive TTR机制允许服务器改变TTR，客户端便能够依据数据的状态改变以不同频率来拉取数据。因此，这种动态TTR机制比静态TTR模式更好。但它并不能完全保证的数据精确度，会带来不必要的网络流量。 1.2 HTTP流
HTTP流是1992年网景公司推出的push机制，叫“动态文档”。有两种形式：页面流和服务流。 页面流是指页面上不间断的HTTP连接响应。大部分Web服务器处理发送完响应之后立即退出。但这种情况下，连接通过很长的循环来保持打开状态，服务器脚本利用事件注册或者其他技术来侦测数据状态的改变。当状态改变时，数据进行传输，但传输完并不会直接关闭连接。
[5]
服务流依赖于XMLHttpRequest对象，在AJAX技术下被称做Reverse AJAX或者Comet。服务流是XMLHttpRequest在后台的长连接，它在连接长度和频率上带来了灵活性。页面会一次性正常加载，数据流的连接可以在预定义的生命周期内。服务器会像页面流中一样不停的循环，浏览器读取最新响应以更新内容。
1.3 Comet和BAYEUX协议
Comet允许服务端发送消息到客户端而无需客户端显示的请求。由于AJAX应用缺少通信标准，在
[8]
Cometd group草拟了一个叫BAYEUX的Comet协议。BAYEUX的消息格式是基于JavaScript语言子集的数据交互格式的，该协议已经被许多Web服务端实现。
但Comet的绊脚石在于各浏览器对XHR、iFrames两种实现Comet所需数据块的支持程度不尽相同，没有统一的实现标准。另外，无论是从网络还是开发角度来看，Comet管理两个连接的开销都很大。
[6]
这些开销带来的直接影响就是Comet应用中的传输延时，限制了它们所提供的实时通信的精确性。
[4]
[3]
2. WebSocket实时通信
前面几种方法提供了Web实时通信数据，但其中包含许多不必要的头数据，最重要的是全双工连接需要的不仅仅是从服务器到客户端的下行连接。简言之，HTTP不是为实时的，全双工通信设计的。 2.1 WebSocket介绍
HTML5规范中定义，WebSocket在浏览器和服务器之间采用单socket全双工（或者叫双向）传输来”推送”和“拉取”信息。这不但可以避免Comet中存在的连接和可移植问题，还能够提供比Ajax轮
[7]
询更高效的解决方案。目前，HTML5 WebSocket是推动web全双工实时通信的主要机制。 在服务器与客户端之间，WebSocket的连接是通过WebSocket协议在第一次“握手”时建立的，同时它也基于底层的TCP/IP协议。WebSocket的协议比较简单，客户端和普通的浏览器一样通过80或者443端口和服务器进行请求握手，服务器根据http header识别是否一个WebSocket请求，如果是，则将请求升级为一个WebSocket连接，握手成功后就进入双向长连接的数据传输阶段。 WebSocket的数据传输是基于帧的方式：0x00 表示数据开始，0xff表示数据结束,数据以utf-8编码。不像具有双向能力
- 2 -
的Comet或Ajax，HTML5 WebSocket使浏览器具有本地能力，不需要安装插件，不需要维持一个双向连接就可以实现高效的web通信。一旦建立连接，Web Socket数据帧能够以双通道的模式发送和接收数据。连接之后，客户端与服务端数据交互是通过暴露在浏览器里的WebSocket接口中onmessage和postMessage方法来实现的。
Html5 WebSocket在应用层实现了与TCP Socket相同的功能，具有以下点： 1、无缝穿过防火墙和路由器 2、支持跨域交流
3、完美整合基于cookie的认证 4、完美整合HTTP负载平衡 5、兼容二进制数据 2.2 WebSocket使用
HTML5 WebSocket的使用非常简单：只需要创建一个新的WebSocket实例，提供一个代表访问端的URL对象即可，前缀ws://和wss://分别代表WebSocket和安全的WebSocket连接。
var myWebSocket = new WebSocket(\
在连接到访问端发送数据之前，实现一些事件侦听器来处理连接过程中的事件触发：
myWebSocket.onopen = function(evt) { alert(\
myWebSocket.onmessage = function(evt) { alert( \myWebSocket.onclose = function(evt) { alert(\
向服务器发送消息，只需要调用postMessage来传递你要发送的消息即可。在发送完之后，调用disconnect函数：
myWebSocket.postMessage(\myWebSocket.disconnect();
3. 实验设计
3.1 实验目的
设计两种简单的Web聊天应用程序，一种基于AJAX长轮询，另一种基于WebSocket，根据实验数据，对比二者效率，从而体现WebSocket在实时事件响应方案中的优越性。 3.2 实验工具
客户端使用支持WebSocket的浏览器Google Chrome 5.0.375.55及其自带开发工具，服务器端使用实现了WebSocket的开源servlet容器Jetty(7.0.1.v20091125)。 3.3 实验过程
一、基于AJAX长轮询的Web聊天应用程序。
服务端主要实现HttpServlet的doPost, doGet方法来处理客户端的请求。客户端则通过
XMLHttpRequest来响应服务端产生的消息。当建立好连接之后，发现每次通过XMLHttpRequest请求服务端数据时，都会产生以下头信息：
Request Headers
Request URL:http://localhost:8080/chat/chat Request Method:POST Status Code:200 OK
Content-Type:application/x-www-form-urlencoded Origin:http://localhost:8080
Referer:http://localhost:8080/chat/
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.55 Safari/533.4
Response Headers
Content-Encoding:gzip
Content-Type:text/json;charset=UTF-8
- 3 -
Date:Thu, 03 Jun 2010 12:18:41 GMT Server:Jetty(7.0.1.v20091125) Transfer-Encoding:chunked
二、基于WebSocket的Web聊天应用程序。
服务端主要实现WebSocket接口和WebSocketServlet虚类来完成响应客户端事件。客户端主要通过WebSocket对象来侦听事件触发，并通过onmessage来接收消息。
为了建立一个Web Socket连接，客户端和服务器在初始握手期间要从HTTP协议升级到WebSocket协议，通过浏览器开发工具，得到以下浏览器请求和响应的头信息：
Request Headers
Request URL:http://localhost:8080/ws/ Request Method:GET Status Code:200 OK
Accept: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.55 Safari/533.4
Response Headers
Accept-Ranges:bytes Content-Encoding:gzip Content-Length:1357 Content-Type:text/html
Date:Thu, 03 Jun 2010 12:27:30 GMT
Last-Modified:Wed, 25 Nov 2009 05:31:32 GMT Server:Jetty(7.0.1.v20091125)
建立好连接后，WebSocket数据帧就可以在客户端和服务器之间以全双工模式传输，在同一时间任何方向，可以全双工发送文本和二进制帧，最小的帧只有2个字节。在文本帧中，每一帧始于0x00字节，止于0xFF字节，数据使用UTF-8编码。WebSocket文本帧使用终结器，而二进制帧使用一个长度前缀。
3.4 实验结果及对比 3.4.1 网络吞吐量对比
HTTP请求和响应头信息总开销570字节，且不包括任何数据。在该例子中，聊天消息数据平均只有20个字符。使用WebSocket，每个消息都是一个WebSocket帧，开销只有2个字节。
50,000,00040,000,00030,000,000AJAX轮询Bytes/sWeb Socket20,000,00010,000,0000用例A570,0002,000用例B5,700,00020,000用例C57,000,000200,000
图2 AJAX轮询与WebSocket网络吞吐量对比
使用三个不同的用例(A：1000客户端，每秒轮询一次；B：10000客户端，每秒轮询一次；C：100000客户端，每秒轮询一次)观察AJAX轮询应用程序关联的HTTP头数据与WebSocket消息帧需要的网络吞吐量，得结果如图2。随着客户端数量的增加，WebSocket应用程序产生的网络吞吐量相比AJAX轮询来讲是微乎其微的。
- 4 -
3.4.2 网络延迟对比
根据实验得出图3所示的网络延迟对比。在AJAX轮询方案下，消息从服务器传输到浏览器平均需要50毫秒，因为当响应完成时，一个新请求又已发往服务器，这个新请求又需要50毫秒，在此期间服务器不能发送任何消息给浏览器，导致额外的服务器内存消耗。
AJAX轮询ServerRequest1MessageResponse1Request2MessageResponse2Request nMessage...BrowserTime50msMessageFrame1100msMessageFrame2150msMessageFrame3200msMessageFrame4250msMessageWebSocketServerWebSocketUpgrade...BrowserTime50ms100ms150ms200ms250msFrame nResponse n
图3 AJAX轮询与WebSocket网络延迟对比
在Web Socket方案下，一旦连接升级到WebSocket，消息的传输会更及时，从服务器传输到浏览器仍然需要50毫秒，但WebSocket连接保持打开，之后就再也不用向服务器发送请求了。因此，WebSocket网络延时比AJAX轮询低很多。
4. 结束语
尽管Comet和AJAX都可以提供桌面应用功能的终端用户体验，而且传输延时也可以缩短到用户无法感知的程度，但只有WebSocket才能真正为浏览器提供精确、高效的流事件，保证传输延时可以微乎其微，直至忽略不计。WebSocket不仅通过单个TCP/IP连接提供完整的异步双工道流通信，更重要的是它能够支持浏览器和源服务的消息采用同样的格式，对于Web实时通信中的研究意义重大。 参考文献
[1] HTTP - Hypertext Transfer Protocol [EB/OL] http://www.w3.org/Protocols/, 2010 [2] 周婷. 基于HTTP长连接的“服务器推”技术. [EB/OL]
http://www.ibm.com/developerworks/cn/web/wa-lo-comet/,2007
[3] M. Bhide, P. Deolasee, A. Katkar, A. Panchbudhe, K. Ra-mamritham, and P. Shenoy.
Adaptive push-pull: Disseminat-ing dynamic web data. IEEE Trans. Comput., 51(6):652–668,2002
[4] Netscape. An exploration of dynamic documents[EB/OL].
http://wp.netscape.com/assist/netsites/pushpull.html, 1996. [5] A. Russell. Comet: Low latency data for the browser[EB/OL].
http://alex.dojotoolkit.org/?p=545.
[6] Dionysios G. Synodinos. HTML 5 Web Sockets vs. Comet and Ajax, 2008
[7] W3C. The WebSocket API [EB/OL]. http://dev.w3.org/html5/websockets/, 2010 [8] CometD Bayeux Ajax Push [EB/OL]. http://www.cometd.com /, 2010
- 5 -