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
})