1. websocket

由於http請求只能由客戶端發起，所有當伺服器資源有變化時，客戶端只能通過輪詢的方式。非常浪費資源。websocket的特點：

• 伺服器可以主動向客戶端推送資訊，客戶端也可以主動向伺服器傳送資訊，是真正的雙向平等對話，屬於伺服器推送技術的一種
• 建立在 TCP 協議之上，伺服器端的實現比較容易
  
• 可以傳送文字，也可以傳送二進位制資料
  
• 沒有同源限制，客戶端可以與任意伺服器通訊
  
• 協議識別符號是ws（如果加密，則為wss），伺服器網址就是 URL。如ws:localhost:8080/msg
  

2. 簡單示例

var ws = new WebSocket("ws://localhost:8080/msg");

ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
	console.log("Received Message: " + evt.data);
	ws.close();
};

ws.onclose = function(evt) {
	console.log("Connection closed.");
};
 

3. api

1. websocket建構函式

用於建立一個webSocket例項，執行後，客戶端就會與服務端連線

var ws = new WebSocket("ws://localhost:8080/msg");

2. webSocket.readyState

readyState屬性返回例項物件的當前狀態，共有四種。

• CONNECTING：值為0，表示正在連線。
• OPEN：值為1，表示連線成功，可以通訊了。
• CLOSING：值為2，表示連線正在關閉。
• CLOSED：值為3，表示連線已經關閉，或者開啟連線失敗

例如：if(ws.readyState ==WebSocket.CONNECTING){}

3. webSocket.onopen

用於指定連線成功後的回撥函式

ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};

或者：

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

4. webSocket.onclose

用於指定連線關閉後的回撥函式。

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
});
 

5. webSocket.onmessage

用於指定收到伺服器資料後的回撥函式

ws.onmessage = function(event) {
  var data = event.data;
};

ws.addEventListener("message", function(event) {
  var data = event.data;
});

伺服器資料有可能是文字，也有可能是二進位制資料，需要判斷

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

6. webSocket.send（）

send方法用於向伺服器傳送資料

• 傳送文字

ws.send("Hello WebSockets!");

• 傳送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);

7. webSocket.bufferedAmount

bufferedAmount屬性，表示還有多少位元組的二進位制資料沒有傳送出去。它可以用來判斷髮送是否結束

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 傳送完畢
} else {
  // 傳送還沒結束
}

8. webSocket.onerror

用於指定報錯時的回撥函式

ws.onerror = function(event) {
};

es.addEventListener("error", function(event) {
});