史上最全的Websocket入門(mén)教程

websocket是什么？
答: 它是一種網(wǎng)絡(luò)通信協(xié)議，是 HTML5 開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

為什么需要websocket? 疑問(wèn)? 我們已經(jīng)有了 HTTP 協(xié)議，為什么還需要另一個(gè)協(xié)議？它能帶來(lái)什么好處？
答: 因?yàn)?HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶端發(fā)起
     我們都知道輪詢的效率低，非常浪費(fèi)資源（因?yàn)楸仨毑煌＿B接，或者 HTTP 連接始終打開(kāi)）, 因此websocket應(yīng)運(yùn)而生。

WebSocket簡(jiǎn)介
WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單，允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。WebSocket協(xié)議基于TCP協(xié)議實(shí)現(xiàn)，包含初始的握手過(guò)程，以及后續(xù)的多次數(shù)據(jù)幀雙向傳輸過(guò)程。其目的是在WebSocket應(yīng)用和WebSocket服務(wù)器進(jìn)行頻繁雙向通信時(shí)，可以使服務(wù)器避免打開(kāi)多個(gè)HTTP連接進(jìn)行工作來(lái)節(jié)約資源，提高了工作效率和資源利用率。

 
WebSocket目前支持兩種統(tǒng)一資源標(biāo)志符ws和wss，類(lèi)似于HTTP和HTTPS。

實(shí)現(xiàn)原理
瀏覽器發(fā)出webSocket的連線請(qǐng)求，服務(wù)器發(fā)出響應(yīng)，這個(gè)過(guò)程稱為握手,握手的過(guò)程只需要一次，就可以實(shí)現(xiàn)持久連接。

握手與連接
瀏覽器發(fā)出連線請(qǐng)求,通過(guò)get可以表明此次連接的建立是以HTTP協(xié)議為基礎(chǔ)的，返回101狀態(tài)碼。

如果不是101狀態(tài)碼，表示握手升級(jí)的過(guò)程失敗了

101是Switching Protocols,表示服務(wù)器已經(jīng)理解了客戶端的請(qǐng)求，并將通過(guò)Upgrade 消息頭通知客戶端采用不同的協(xié)議來(lái)完成這個(gè)請(qǐng)求。在發(fā)送這個(gè)響應(yīng)后的空檔，將http升級(jí)到webSocket。

其中Upgrade和Connection字段告訴服務(wù)端，發(fā)起的是webSocket協(xié)議

Sec-WebSocket-Key是瀏覽器經(jīng)過(guò)Base64加密后的密鑰，用來(lái)和response里面的Sec-WebSocket-Accept進(jìn)行比對(duì)驗(yàn)證

Sec-WebSocket-Version是當(dāng)前的協(xié)議版本

Sec-WebSocket-Extensions是對(duì)WebSocket的協(xié)議擴(kuò)展

服務(wù)器接到瀏覽器的連線請(qǐng)求返回結(jié)果如下：

Upgrade和Connection來(lái)告訴瀏覽器，服務(wù)已經(jīng)是基于webSocket協(xié)議的了，讓瀏覽器也遵循這個(gè)協(xié)議

Sec-WebSocket-Accept是服務(wù)端確認(rèn)后并加密后的Sec-WebSocket-Accept

至此，webSocket連接成功，接下來(lái)就是webSocket的協(xié)議了。

客戶端的簡(jiǎn)單示例：

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
創(chuàng)建 WebSocket 對(duì)象
var ws = new WebSocket('ws://echo.websocket.org');

websocket 屬性
ws.readyState
CONNECTING：值為0，表示正在連接。
OPEN：值為1，表示連接成功，可以通信了。
CLOSING：值為2，表示連接正在關(guān)閉。
CLOSED：值為3，表示連接已經(jīng)關(guān)閉，或者打開(kāi)連接失敗。

ws.bufferedAmount
只讀屬性 bufferedAmount 已被 send() 放入正在隊(duì)列中等待傳輸，但是還沒(méi)有發(fā)出的 UTF-8 文本字節(jié)數(shù)。
WebSocket 事件
事件     事件處理程     描述
open     ws.onopen     連接建立時(shí)觸發(fā)
message     ws.onmessage     客戶端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)
error     ws.onerror     通信發(fā)生錯(cuò)誤時(shí)觸發(fā)
close     ws.onclose     連接關(guān)閉時(shí)觸發(fā)

如果要指定多個(gè)回調(diào)函數(shù)，可以使用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;
  ...  // 處理數(shù)據(jù)});

websocket 方法

應(yīng)用案例