WebSocket

1、背景與定義

背景

HTTP 協議有一個缺陷：通訊只能由客戶端向服務器發出請求，服務器返回查詢結果。作不到服務器主動向客戶端推送信息。這種單向請求的特色，若是服務器有連續的狀態變化，客戶端要獲知就很是麻煩。咱們只能使用Ajax輪詢：每隔一段時候，就發出一個詢問，瞭解服務器有沒有新的信息。輪詢的效率低，很是浪費資源（由於必須不停鏈接，或者 HTTP 鏈接始終打開）。

提出

WebSocket 它的最大特色就是，服務端能夠主動推送信息給客戶端，解決了輪詢形成的同步延遲問題。因爲 WebSocket 只須要一次 HTTP 握手，服務端就能一直與客戶端保持通訊，直到關閉鏈接，這樣就解決了服務器須要反覆解析 HTTP 協議，減小了資源的開銷。

爲了創建一個 WebSocket 鏈接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和一般的 HTTP 請求不一樣，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"代表這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息而後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 鏈接就創建起來了，雙方就能夠經過這個鏈接通道自由的傳遞信息，而且這個鏈接會持續存在直到客戶端或者服務器端的某一方主動的關閉鏈接。

定義

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

解釋
數據通訊的三種方式：
1.單工通訊
只有一個方向的通訊而沒有反方向的交互，僅須要 一條信道。如：廣播
2.半雙工通訊（雙向交替通訊）
通訊雙方均可以發送或接受消息，但任何一方都不能同時發送和接收。須要 兩條信道。如：對講機
3.全雙工通訊（雙向同時通訊）
通訊雙方能夠同時發送和接收消息，也須要 兩條信道。如：打電話。

特色

（1）創建在 TCP 協議之上，服務器端的實現比較容易。
（2）與 HTTP 協議有着良好的兼容性。默認端口也是80和443，而且握手階段採用 HTTP 協議，所以握手時不容易屏蔽，能經過各類 HTTP 代理服務器。
（3）數據格式比較輕量，性能開銷小，通訊高效。
（4）能夠發送文本，也能夠發送二進制數據。
（5）沒有同源限制，客戶端能夠與任意服務器通訊。
（6）協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。

ws://example.com:80/some/path

2、使用

建立 WebSocket 對象。

let Socket = new WebSocket(url, [protocol] );

第一個參數 url, 指定鏈接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。

WebSocket 屬性

屬性	描述
Socket.readyState	只讀屬性readyState表示鏈接狀態
Socket.bufferedAmount	只讀屬性bufferedAmount已被 send() 放入正在隊列中等待傳輸，可是尚未發出的 UTF-8 文本字節數。

只讀屬性readyState表示鏈接狀態，能夠是如下值：

• 0 - 表示鏈接還沒有創建。
• 1 - 表示鏈接已創建，能夠進行通訊。
• 2 - 表示鏈接正在進行關閉。
• 3 - 表示鏈接已經關閉或者鏈接不能打開。

WebSocket 事件

事件	事件處理程序	描述
open	Socket.onopen	鏈接創建時觸發
message	Socket.onmessage	客戶端接收服務端數據時觸發
error	Socket.onerror	通訊發生錯誤時觸發
close	Socket.onclose	鏈接關閉時觸發

WebSocket 方法

方法	描述
Socket.send()	使用鏈接發送數據
Socket.close()	關閉鏈接

WebSocket 示例

// 打開一個 websocket
let ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
// Web Socket 已鏈接上，使用 send() 方法發送數據
  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.");
};

參考文章：http://www.ruanyifeng.com/blo...
參考文章：https://www.runoob.com/html/h...