史上最全的Websocket入門教程

websocket是什麼？
答: 它是一種網路通訊協議，是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。

為什麼需要websocket? 疑問? 我們已經有了 HTTP 協議，為什麼還需要另一個協議？它能帶來什麼好處？
答: 因為 HTTP 協議有一個缺陷：通訊只能由客戶端發起
     我們都知道輪詢的效率低，非常浪費資源（因為必須不停連線，或者 HTTP 連線始終開啟）, 因此websocket應運而生。

WebSocket簡介
WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。WebSocket協議基於TCP協議實現，包含初始的握手過程，以及後續的多次資料幀雙向傳輸過程。其目的是在WebSocket應用和WebSocket伺服器進行頻繁雙向通訊時，可以使伺服器避免開啟多個HTTP連線進行工作來節約資源，提高了工作效率和資源利用率。

 
WebSocket目前支援兩種統一資源標誌符ws和wss，類似於HTTP和HTTPS。

實現原理
瀏覽器發出webSocket的連線請求，伺服器發出響應，這個過程稱為握手,握手的過程只需要一次，就可以實現持久連線。

握手與連線
瀏覽器發出連線請求,透過get可以表明此次連線的建立是以HTTP協議為基礎的，返回101狀態碼。

如果不是101狀態碼，表示握手升級的過程失敗了

101是Switching Protocols,表示伺服器已經理解了客戶端的請求，並將透過Upgrade 訊息頭通知客戶端採用不同的協議來完成這個請求。在傳送這個響應後的空檔，將http升級到webSocket。

其中Upgrade和Connection欄位告訴服務端，發起的是webSocket協議

Sec-WebSocket-Key是瀏覽器經過Base64加密後的金鑰，用來和response裡面的Sec-WebSocket-Accept進行比對驗證

Sec-WebSocket-Version是當前的協議版本

Sec-WebSocket-Extensions是對WebSocket的協議擴充套件

伺服器接到瀏覽器的連線請求返回結果如下：

Upgrade和Connection來告訴瀏覽器，服務已經是基於webSocket協議的了，讓瀏覽器也遵循這個協議

Sec-WebSocket-Accept是服務端確認後並加密後的Sec-WebSocket-Accept

至此，webSocket連線成功，接下來就是webSocket的協議了。

客戶端的簡單示例：

var ws = new WebSocket("wss://echo.websocket.org");
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.");
}; 
ws.onerror = function(evt) {
  console.log("error!!!"); 
};

客戶端的 API
建立 WebSocket 物件
var ws = new WebSocket('ws://echo.websocket.org');

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

ws.bufferedAmount
只讀屬性 bufferedAmount 已被 send() 放入正在佇列中等待傳輸，但是還沒有發出的 UTF-8 文字位元組數。
WebSocket 事件
事件     事件處理程     描述
open     ws.onopen     連線建立時觸發
message     ws.onmessage     客戶端接收服務端資料時觸發
error     ws.onerror     通訊發生錯誤時觸發
close     ws.onclose     連線關閉時觸發

如果要指定多個回撥函式，可以使用addEventListener方法

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});
ws.addEventListener("close", function(event) {
  ...  // handle close event});
ws.addEventListener("message", function(event) {
  var data = event.data;
  ...  // 處理資料});

websocket 方法