webSocket是H5的新协议，基于tcp协议，实现浏览器与客户端的双工通信。解决了http协议只能由客户端向服务发送请求的弊端，替代长轮询节省带宽和资源。（多于见聊天室）
一、客户端示例
var ws=new webSocket("ws://echo.webSocket.org");
ws.open =function(event){
console.log("connection open");
ws.send("Hello webSocket")
}
ws.onmessage=function(event){
ws.close()
}
ws.onclose=function(event){
console.log("connection closed")
}
二、客户端的API
2.1webSocket构造函数
webSocket对象作为一个构造函数，用于新建webSocket实例
var ws=webSocket(“ws://localhost:8080”);客户端与服务器进行链接
2.2webSocket.readyState属性返回实例对象的状态：4种
CONNECTING：值为0，表示正在连接
OPEN：值为1，表示连接成功，可以通信了
CLOSING：值为2，表示连接正在关闭
CLOSED：值为3，表示连接已关闭，或者打开连接失败
switch（ws.readyState）{
case webSocket.connecting : //do something
break;
case webSocket.open://do something
break;
case webSocket.closing://do something
break;
case webSocket.closed://do something
break;
Default://do something
break;
}
2.3webSocket.onopen属性，用于指定连接成功后的回调函数
ws.onopen=function(){
ws.send(‘Hello Server’);
}
指定多个回调函数方法：
ws.addEventListener(‘open’,function(event){
ws.send(“Hello server”)
});
2.4webSocket.onclose属性，用于指定链接关闭后的回调函数
ws.onclose=function(event){
var code=event.code;
var reason=event.resson;
var wasClean=event.wasClean;
}
ws.addEventListener("close", function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
});
2.5webSocket.onmessage属性，用于指定收到服务器数据后的回调函数
ws.onmessage = function(event) {
var data = event.data;
};
ws.addEventListener("message", function(event) {
var data = event.data;
});
注意：服务器数据可能是文本，也可能是二进制数据（blob对象或者Arraybuffer）
ws.onmessage = function(event){
if(typeof event.data === String) {
console.log("Received data string");
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log("Received arraybuffer");
}}
还可以用binaryType属性，显示指定收到的二进制数据类型
// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
console.log(e.data.size);
};
// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
console.log(e.data.byteLength);
};
2.6webSocket.send()用于向服务器发送数据
ws.send(“yours message”)
发送blob对象的例子
var file=document.querySelector(‘input[type=”file”]’).files[0];
ws.send(file);
发送 ArrayBuffer 对象的例子。
var img=canvas_context.getImageData(0,0,400,320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
ws.send(binary.buffer);
2.7webSocket.bufferedAmount属性表示有多少二进制的数据没有发出去，可以用来判断发送是否结束
var data=new Arraybuffer(10000);
webSocket.send(data);
If(websocket.bufferedAmount===0){
//发送完毕
}else{
//发送未结束
}
2.8webSocket.onerror属性，用于指定报错时的回调函数
webSocket.onerror=function(){
//handle error event
}
webSocket.addEventListener (“error”,function(event){
//handle error event
})