html5 WebSocket

websocket允许我们建立时时全双共的web实时通信,websocket没有出现之前，我们是利用长轮询，客户端和服务器建立起长期的链接，直到服务器数据状态改变或者时间过期才关闭，而每次的链接和请求都会把http 头部的一连串信息带过去，例如cookie等等，这样子会导致网络带宽还有延时等等，如果服务端的数据变更非常频繁的话，这种效率想必很低。

websoket通过一种握手协议来建立链接

1. 客户端请求一个链接，头部中包含如下信息

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] 

1. 服务器根据头部中的Sec-WebSocket-Key2，Sec-WebSocket-Key1，Upgrade，[8-byte security key] 知道客户端需要一个websocket协议链接，于是返回一个消息，包含如下头部

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]

1. 客户端收到消息之后，建立起websocket链接，这时就可以进行实时通信了

websocket是一种协议，若要和服务器简历起websocket链接，服务器必须要建立起websocket协议规范，这里我们不讨论服务器，我们讨论客户端如果进行websocket通信。

首先我们打开一个套接字链接，

// 创建一个websocket链接
var socket = new WebSocket('ws://192.158...');

websocket是一个打开过程，我们可以通过事件回调来处理业务过程

 socket.onopen = function (evt) {...};  //打开的回调
 socket.onclose = function (evt) {...};  //关闭的回调
 socket.onmessage = function (evt) {...};  //消息发送成功，获取服务器消息时候的回调
 socket.onerror = function (evt) {...}; //发送和接收过程出现错误的回调

通过websocket发送消息，如果我们有一个点击按钮，我们可以直接在里面发送数据

document.querySelect("#btn").onclick = function(){
  socket.send(message); //发送消息
}

发送消息出去，接收服务器消息，我们可以在socket的onmessage的回调函数里面获取数据

socket.onmessage = function(event) {
  var message = event.data; //获取到服务器数据
};

当我们想停止通讯时，我们必须要关闭socket链接来节省资源和避免不必要的错误

socket.close(); //关闭链接

websocket基本的用法如上，现在浏览器对websocket的兼容性都比较好了，除了IE，需要在IE10+

博文参考

http://blog.teamtreehouse.com/an-introduction-to-websockets