[html5]API详解16：web socket 全双工通信

目前实时Web应用的实现方式，大部分是围绕轮询和其他服务器端推送技术展开的，其中最著名的是Comet。Comet技术可以让服务器主动以异步方式向客户端推送数据。

使用轮询时，浏览器定期发送HTTP请求，并随即接收响应；使用长轮询时，浏览器向服务器发送一个请求，服务器会在一段时间内将其保持在打开状态；使用流解决方案时，浏览器会发送一个完整的HTTP请求，但服务器会发送并保持一个处于打开状态的响应，该响应持续更新并无限期处于打开状态。

上述的三个方法，在发送实时数据时都会涉及到HTTP请求和响应包头，且包含大量额外的、不必要的报头数据，会造成传输延迟。

一、解读HTML5 WebSockets

1、WebSocket握手

为了建立WebSocket通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传送WebSocket消息。

二、HTML5 WebSockets API

本节讨论HTML5 WebSockets的使用方法

1、检测浏览器是否支持

通过window.WebSocket来判断浏览器是否支持。

2、API的基本用法

a. WebSocket对象的创建以及与WebSocket服务器的连接

代码如下:

url = "ws://localhost:8080/echo";

ws = new WebSocket(url);

b. 添加事件监听器

WebSocket遵循异步编程模型，打开socket后，只需等待事件发生，而不需主动向服务器轮询，因此需要添加回调函数来监听事件。

WebSocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。

代码如下:

ws.onopen = function(){

log("open");

}

ws.onmessage = function(){

log(e.data);

}

ws.onclose = function(){

log("closed");

}

c. 发送消息

当socket处于打开状态（即调用onopen监听程序之后，调用onclose监听程序之前），可以使用send方法发送消息。

ws.send("Hello World");