基于构建实时WEb应用的HTML5 WebSocket协议<二>

前面说了那么多的理论，我们来看下代码学习。

WebSocketAPI简介

var ws = new WebSocket(“ws://echo.websocket.org”);  
ws.onopen = function(){ws.send(“Test!”); };  
ws.onmessage = function(evt){console.log(evt.data);ws.close();};  
ws.onclose = function(evt){console.log(“WebSocketClosed!”);};    
ws.onerror = function(evt){console.log(“WebSocketError!”);};

第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

这是完整代码：

//建立 WebSocket 连接的实例 JavaScript 代码
var  wsServer = 'ws://localhost:8888/Demo'; 
var  websocket = new WebSocket(wsServer); 
websocket.onopen = function (evt) { onOpen(evt) }; 
websocket.onclose = function (evt) { onClose(evt) }; 
websocket.onmessage = function (evt) { onMessage(evt) }; 
websocket.onerror = function (evt) { onError(evt) }; 
function onOpen(evt) { 
  console.log("Connected to WebSocket server."); 
} 
function onClose(evt) { 
  console.log("Disconnected"); 
} 
function onMessage(evt) { 
  console.log('Retrieved data from server: ' + evt.data); 
} 
function onError(evt) { 
  console.log('Error occured: ' + evt.data); 
}

一个典型的 WebSocket 发起请求和得到响应的例子看起来如下：

GET /demo HTTP/1.1 
Host: example.com 
Connection: Upgrade 
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 
Upgrade: WebSocket 
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 
Origin: http://example.com 
[8-byte security key] 

HTTP/1.1 101 WebSocket Protocol Handshake 
Upgrade: WebSocket 
Connection: Upgrade 
WebSocket-Origin: http://example.com 
WebSocket-Location: ws://example.com/demo 
[16-byte hash response]

搭建WebSocket Server

git clone git://git.warmcat.com/libwebsockets

WebSocket 的局限性

总结

学习连接：http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/