WebSocket技术在实时WEB通讯中的应用研究-电子工程世界

分享到: 微博; QQ; 微信; LinkedIn

1.前言

作为下一代的Web标准，HTML5拥有许多引人注目的新特性，如Canvas、本地存储、多媒体编程接口、WebSocket等，有两大特点：首先，强化Web网页的表现性能。其次，追加本地数据库等Web应用的功能。包括HTML、CSS和JavaScript在内的一套技术组合，减少浏览器对于需要插件的丰富性网络应用服务(plug-inbasedrich internet application,RIA)，如Adobe Flash、Microsoft Silverlight与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。而有“Web的TCP”支撑的WebSocket在打破了现有的WEB网络通讯编程模式，WebSocket使得浏览器提供对Socket的支持成为可能，在浏览器和服务器之间提供了一个基于TCP连接的双向通道，使得开发人员可以方便构建实时Web应用。

2.传统实时WEB的通讯技术

传统的Web应用的信息交互过程是客户端通过浏览器发出一个请求(Request)，服务器端接收和审核完请求后进行处理(Response)并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于信息变化不是特别频繁的应用尚能相安无事，但对于那些实时要求比较高的应用来说，当客户端浏览器准备呈现服务器返回的数据信息时，信息有可能已经过时了。保持客户端和服务器端的信息同步是实时Web应用的关键要素。在WebSocket规范出来之前，开发人员想实现实时Web应用，只能采用如轮询(Polling)或Comet技术方案，而Comet则是轮询技术的改进，长轮询机制与流技术。

轮询：客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。问题在于：当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，造成无谓的网络传输，属于低效的实时方案。

长轮询：长轮询是对定时轮询的改进和提高，目地是降低无效的网络传输。当服务器端没有数据更新时，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当服务端数据变更非常频繁时，就和定时轮询没有本质上性能提高。

流：通常在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。

将服务器端的信息不断推向客户端。但需要针对不同的浏览器设计不同的方案来改进用户体验，同时在并发比较大的情况下，对服务器端的资源是一个极大的考验。

以上方案只是利用Ajax方式来模拟实时的效果，每次交互都是HTTP的请求和应答的过程，每次都带有一套完整的HTTP头信息，增加了传输的数据量，在实际的应用中，为了模拟真实的实时效果，需要构造两个HTTP连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，增加编程实现的复杂度，同时增加了服务器端的负载，制约了应用系统的扩展性。

3.HTML 5 WebSocket概念及规范

WebSocket API是下一代客户端-服务器的异步通信方法。取代了单个的TCP套接字，使用ws或wss协议，在任意的客户端和服务器程序通讯。WebSocket目前由W3C进行标准化，已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持，在给定的时间范围内的任意时刻，相互推送信息。

HTML5 Web Sockets从一个Web客户端连接到一个远程端点，需要创建WebSocket实例并为之提供一个URL来表示想要连接到的远程端点。该规范定义了ws://以及wss://模式来分别表示WebSocket和安全WebSocket连接。一个WebSocket连接是在客户端与服务器之间HTTP协议的初始握手阶段将其升级到Web Socket协议来建立的，其底层仍是TCP/IP连接。

其中：

WS:表示HTML5 WEB Sockets协议;

Host:表示服务器的地址;

Port:表示待链接的端口;

WebSocket Server:表示Server请求资源地址。

Web Sockets使用HTTP Upgrade机制升级到Web Socket协议，同时兼容HTTP的握手机制，因此HTTP服务器可以与WebSocket服务器共享默认的HTTP与HTTPS端(80和443)。要建立一个WebSocket连接，客户端和服务器在初次握手的时候从HTTP协议提升到Web Socket协议。客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息“Upgrade:WebSocket”,表明是一个申请协议升级的HTTP请求，服务器端解析附加的头信息，产生应答信息返回给客户端，由此客户端和服务器端的WebSocket建立成功，然后通过链接通道自由传递信息，并且持续到客户端或者服务器端的单方主动关闭连接。连接建立后，WebSocket数据帧以全双工的模式在客户端和服务器之间来回传输。

典型WebSocket请求与响应例子如下：

其中Sec-WebSocket-Key1,Sec-WebSocket-Key2和[8-byte security key]这几个头信息是WebSocket服务器用来生成应答信息的来源，服务器基于以下的算法来产生正确的应答信息：

a)逐个字符读取Sec-WebSocket-Key1头信息中的值，将数值型字符连接到一起放到一个临时字符串里，同时统计所有空格的数量;

b)将在第1步里生成的数字字符串转换成一个整型数字，然后除以第1步里统计出来的空格数量，将得到的浮点数转换成整数型;

c)将第2步里生成的整型值转换为符合网络传输的网络字节数组;

d)对Sec-WebSocket-Key2头信息同样进行第1到第3步的操作，得到另外一个网络字节数组;

e)将[8-byte security key]和在第3,第4步里生成的网络字节数组合并成一个16字节的数组;

f)对第5步生成的字节数组使用MD5算法生成一个哈希值，这个哈希值就作为安全密钥返回给客户端，以表明服务器端获取了客户端的请求，同意创建WebSocket连接。

服务端将生成的网络字节数组和客户端提交的头信息里的[8-byte security key]

合并成一个1 6 位字节数组并用M D 5 算法加密，然后将生成的安全密钥作为应答信息返回给客户端，由此建立双方的WebSocekt连接通道，实现WebSocket握手信息的处理逻辑。WbSocket服务器由两个核心类构成，一个是WebSocketServer,另外一个是SocketConnection.

实际的开发过程中，为构建Web应用，首先需要构建WebSocket规范的服务器，服务器端的实现不受平台和开发语言的限制，只需要遵从WebSocket规范即可。

如果使用的是一个未加密的WebSocket连接(ws://)，在透明的代理服务器情况下，浏览器是不知道代理服务器的，所以不会发送HTTP CONNECT方法。如使用的是加密的WebSocket安全连接(wss://)，那么在透明代理服务器下，浏览器不知道代理服务器，所以不会发出HTTPCONNECT方法。然而，因为线上信息是加密的，中间透明代理服务器会简单的让加密信息通过，因此就增加了使用加密的WebSocket连接的成功率。

HTML5 WebSocket目的是取代轮询和Comet技术，使客户端浏览器具备像C/S架构下桌面系统的实时通讯能力。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。因为WebSocket连接本质上就是一个TCP连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及Comet技术比较，具有很大的性能优势。

4.WebSocket JavaScript接口定义

针对WebSocket JavaScript客户端接口定义相对比较简单：

其中 URL属性代表WebSocket服务器的网络地址，协议通常是“ws”,send方法就是发送数据到服务器端，close方法就是关闭连接。除了这些方法，还有一些很重要的事件：

onOpen,onMessage,onError以及onClose.

5.WebSocket应用场景

5.1 初始数据前台展示

初始数据通过后台的数据推送方法到客户端，客户端可以在回调函数中收到信息，通过HTML5组件来展示这些信息。

5.2 后台推送信息，前台实时更新

增加后台推送信息代码，在后台起一个定时器，定时推送产生消息或者清除信息，并将信息推送给所有的客户端。

5.3 客户端拖拽节点，同步到其他客户端

增加拖拽同步，监听网内所有信息点，将节点位置信息发送给后台，后台接收到节点位置信息后，更新后台数据，然后将消息转发给其他客户端，实现信息同步操作。

6.WebSocket应用展望