Web应用中的双向通信_Websocket简介.doc

Web应用中的双向通信WebSockets简介顾勤 译什么是WebSockets？WebSockets规范是在HTML5中开始提供的一种浏览器与服务器的JavaScript接口，该规范定义了浏览器与服务器之间进行双全工消息传送的套接字连接。WebSockets标准大大简化了服务器与客户端之间的通信与连接管理。关于HTML5 WebSocketsHTML5 WebSockets 规范定义了一个API，允许网页利用WebSockets协议与远程主机进行双向通信。该规范介绍了WebSockets接口，并定义了一个通过网络上单一的套接字连接的双全工通信频道。相对于两种模拟双全工连接的解决方案：轮询和长轮询，HTML5 WebSockets降低了大量不必要的网络传输和延迟。HTML5 WebSockets能够穿过网络上的一些障碍，如代理和防火墙，让数据流能够使用任意连接传输，并在单一连接中支持上行数据流和下行数据流，基于HTML5 WebSockets的应用能减少服务器的负担，使现有的机器能够支持更多的并发连接数。下图说明了一个基本的WebSocket的架构，该架构中浏览器利用WebSocket与服务器进行双全工、直接的通信。WebSocket的一个独特的功能就是穿越防火墙和代理的能力，很多应用程序都面临着这样的问题。Comet风格的应用程序采用长轮询作为解决防火墙和代理问题的基本方法。该技术虽有效，但不适用于低于500毫秒的延迟或高吞吐量要求的应用程序。基于插件的技术，如Adobe Flash，也提供一定的套接字接口支持，但长期以来也一直存在难以穿过代理和防火墙的问题，而现在WebSockets解决了这个问题。WebSocket会检测存在的代理服务器，并自动设置穿越代理的通道。这个通道是通过发起一个与代理服务的HTTP CONNECT声明来建立的，这需要代理服务器在指定的主机和端口上打开一个TCP/IP连接。一旦通道创建完成，就可以顺利穿过代理进行通信。由于HTTP和HTTPS的工作原理相似，因此通过SSL的安全WebSockets可以采用与HTTP CONNECT相同的方法。要注意的是，现在的浏览器都是最近才开始支持WebSockets（Chrome浏览器最初版本就支持WebSockets）。然而，今天的浏览器都实现了向后兼容性，因而能够充分利用这一新兴技术。WebSocket和其它HTML5支持的特性（如本地存储和地理定位）一样，都是原始HTML5规范的一部分，但为了更加重视，WebSocket被分离成为一个独立的标准。WebSocket被它的作者网页超文本技术工作小组（WHATWG）提交给了Internet工程任务组（IETF）。参与标准制定的作者、传播者和公司，仍将WebSockets视为HTML5原始功能部件的集合中的一部分。WebSocket协议WebSocket协议的设计，使它在现有网络设施的基础上也能够很好的工作。基于这一设计原则，协议规定：WebSocket的生命周期从一个HTTP连接开始，以保证完全兼容WebSocket诞生之前的网络环境。从HTTP到WebSocket协议的转换被称为WebSocket握手。浏览器向服务发送一个请求，表明它要将协议由HTTP转为WebSocket。客户端通过HTTP头中的Upgrade属性来表达这一请求：GET ws://?encoding=text HTTP/1.1 Origin: Cookie: _utma=99as Connection: Upgrade Host: Sec-WebSocket-Key: uRovscZjNol/umbTt5uKmw= Upgrade: websocket Sec-WebSocket-Version: 13如果服务器支持WebSocket协议，同样通过HTTP头中的Upgrade属性来表示同意进行协议的转换：HTTP/1.1 101 WebSocket Protocol Handshake Date: Fri, 10 Feb 2012 17:38:18 GMT Connection: Upgrade Server: Kaazing Gateway Upgrade: WebSocket Access-Control-Allow-Origin: Access-Control-Allow-Credentials: true Sec-WebSocket-Accept: rLHCkw/SKsO9GAH/ZSFhBATDKrU= Access-Control-Allow-Headers: content-type此时，HTTP协议被取消，取而代之的是一个基于TCP/IP的WebSocket连接。WebSocket连接默认使用与HTTP（80）或HTTPS（443）相同的端口。一旦建立起连接，客户端与服务器之间可以用双全工模式传输WebSocket数据帧。文本或二进制帧可以在任意方向上同时进行传输。最小的数据帧仅为2字节。如果是文本帧，每帧以0x00开始，以0xFF结束，中间为UTF-8格式的数据。WebSocket文本使用终结符，而二进制帧使用长度作为帧的前缀。使用HTML5 WebSocket API通过一个简洁的接口说明（参见下面的列表），开发人员可以替代如长轮询或持久框架，从而进一步降低延迟。Constructor(in DOMString url, optional in DOMString protocol) interface WebSocket readonly attribute DOMString URL;/ ready state const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSED = 2; readonly attribute unsigned short readyState; readonly attribute unsigned long bufferedAmount;/ networking attribute Function onopen; attribute Function onmessage; attribute Function onclose; boolean send(in DOMString data); void close(); ; WebSocket implements EventTarget;使用WebSocket接口非常简单，要连接到一个终端，只需要创建一个新的WebSocket实例，参照以下的示例，为这个新的对象提供一个表示你想要连接终端的URL。请注意，ws:/和wss:/前缀分别表示普通WebSocket和安全WebSocket连接。var myWebSocket = new WebSocket(ws:/);在客户端与服务器初次握手时，将HTTP协议升级成WebSocket协议，从而创建了一个新的WebSocket连接。通过WebSocket接口中定义的“onmessage”和“send”函数，将这个连接暴露出来。参照下面的例子，在连接一个终端并发送消息之前，你可以结合一系列的事件监听器来处理这个连接生命周期的每一个阶段。myWebSocket.onopen = function(evt) alert(Connection open .); ; myWebSocket.onmessage = function(evt) alert( Received Message: + evt.data); ; myWebSocket.onclose = function(evt) alert(Connection closed.); ;要将消息发送到服务器，你只需要简单的调用“send”方