webSocket通訊學習筆記

由于最近在做的項目中有一個類似于彈幕的元件，有消息就顯示，如果使用http協定來實作的話要進行輪詢處理，但是會出現很大的問題，一是實時性不夠，二是頻繁的請求會給伺服器帶來極大的壓力。

是以項目采用websocket協定來通訊，它可以在浏覽器和伺服器之間建立一個不受限的雙向通信通道，比如說，伺服器可以在任意時刻發消息給浏覽器。

1. webSocket協定

WebSocket并不是全新的協定，而是利用了HTTP協定來建立連接配接。

首先，WebSocket連接配接必須由浏覽器發起，因為請求協定是一個标準的HTTP請求，格式如下：

GET ws://localhost:3000/ws/chat HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Origin: http://localhost:3000
Sec-WebSocket-Key: client-random-string
Sec-WebSocket-Version: 13

           

該請求和普通的HTTP請求有幾點不同：

a. 請求頭Upgrade: websocket和Connection: Upgrade表示這個連接配接将要被轉換為WebSocket連接配接；

b. Sec-WebSocket-Key是用于辨別這個連接配接，并非用于加密資料；

c. Sec-WebSocket-Version指定了WebSocket的協定版本。

伺服器如果接受該請求，就會傳回如下響應：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: server-random-string

           

2. webSocket特點

a. 建立在 TCP 協定之上，伺服器端的實作比較容易

b. 與 HTTP 協定有着良好的相容性。預設端口也是80和443，并且握手階段采用 HTTP 協定，是以握手時不容易屏蔽，能通過各種 HTTP 代理伺服器

c. 資料格式比較輕量，性能開銷小，通信高效

d. 可以發送文本，也可以發送二進制資料

e. 沒有同源限制，用戶端可以與任意伺服器通信

f. 協定辨別符是ws（如果加密，則為wss），伺服器網址就是URL

3. 建立webSocket連接配接

// 初始化一個 WebSocket 對象
var ws = new WebSocket("ws://localhost:9998/echo");

// 建立 web socket 連接配接成功觸發事件
ws.onopen = function () {
  // 使用 send() 方法發送資料
  ws.send("發送資料");
  alert("資料發送中...");
};

// 接收服務端資料時觸發事件
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("資料已接收...");
};

// 斷開 web socket 連接配接成功觸發事件
ws.onclose = function () {
  alert("連接配接已關閉...");
};


           

如果想綁定多個websocket的回調函數，則可以使用addEventListener方法來實作：

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

           

4. webSocket.readyState狀态碼

readyState屬性傳回執行個體對象的目前狀态，共有四種。

a. CONNECTING：值為0，表示正在連接配接。

b. OPEN：值為1，表示連接配接成功，可以通信了。

c. CLOSING：值為2，表示連接配接正在關閉。

d. CLOSED：值為3，表示連接配接已經關閉，或者打開連接配接失敗。