websocket 初識

前言

其實很早就知道了 websocket 這個概念了，像現在大火的直播等使用的就是 websocket。之前找爬蟲工作，對面問我爬過 websocket 網站沒，很汗顏，那時候還只是聽說過。現在想瞭解一下，基於 JavaScript 語言。

Websocket 是什麼

websocket 是一種網路通信協議，運行在 TCP 協議之上。

對於傳統的 HTTP 協議來說，通信只能由客戶端發起，然後服務端響應。HTTP 協議做不到伺服器制動向客戶端推送信息。HTTP 協議的這種單向請求的特點，註定瞭如果伺服器有連續的狀態變化，客戶端要獲知就非常麻煩。只能使用‘’輪詢‘’：（非阻塞通信），每隔一段時候，就發出一個詢問，瞭解伺服器有沒有新的消息。輪詢的效率低，非常浪費資源。

websocket 協議在2008年誕生，它的最大特點就是伺服器可以主動向客戶端推送消息，客戶端也可以主動向伺服器發送消息，是真正的雙向平等對話，屬於伺服器推送技術的一種。websocket 允許伺服器端與客戶端進行全雙工通信。其特點如下：

• 建立在 TCP 協議之上，服務端的實現比較容易；
• 與 HTTP 協議有著良好的相容性。預設埠也是80和443，並且握手階段採用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理伺服器；
• 數據個數比較輕量，性能開銷小，通信高效；
• 可以發送文本，也可以發送二進位數據；
• 沒有同源限制，客戶端可以與任意伺服器通信，完全可以取代 AJAX；
• 協議標識符是 ws（加密就是 wss），伺服器網址為 URL。

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

websocket 握手

瀏覽器發出的 websocket 握手請求類似於下麵：

GET / HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: null
Sec-WebSocket-Key: ...
Sec-WebSocket-Version: 13

這是數據頭，HTTP1.1協議規定，Upgrade 欄位表示將通信協議從 HTTP/1.1轉向該欄位指定的協議。Connection 欄位表示瀏覽器通知伺服器，如果可以的話就升級到 WebScoket 協議。Origin 欄位用於提供請求發出的功能變數名稱，供伺服器驗證是否許可的範圍內（伺服器可以不驗證）。Sec-Websocket-Key 則是用於握手協議的密鑰，是 Base64編碼的16位元組隨機字元串（可以反解）。

伺服器的 WebSocket 回應如下：

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: ...
Sec-WebSocket-Origin: null
Sec-WebSocket-Location: ws://exammple.com/

伺服器同樣用 Connection 欄位通知瀏覽器，可以改變協議為 Websocket，Sec-WebSocket-Accept 欄位是伺服器在瀏覽器提供的 Sec-Webscoket-Key 字元串後面，添加 RFC6465（不瞭解）標準規定的‘’258EAFA5-E914-47DA-95CA-C5AB0DC85B11‘’字元串，然後再取 SHA-1的哈希值。瀏覽器將對這個值進行驗證，以證明確實是目標伺服器回應了 Websocket 請求。Sec-WebSocket-Location 欄位表示進行通信的 Websocket 網址。

完成握手以後，WebSocket 協議就在 TCP 協議之上，開始傳送數據。

客戶端的示例

var ws = new WebSocket('wss://echo.websocket.org'); // 網址不可達

ws.open = function(ev) {
    console.log('Connection open...');
    ws.send('Hello WebSocket!');
};

ws.onmessage = function(ev) {
    console.log('Recevied Message: ' + ev.data);
};

ws.onclose = function(ev) {
    console.log('Connection closed.');
}

客戶端 API

瀏覽器對 WebSocket 協議的處理，無非是三件事：

• 建立連接和斷開連接；
• 發送數據和接收數據；
• 處理錯誤。

構造函數 WebSocket

WebSocket 對象作為一個構造函數，用於新建 WebSocket實例。

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

執行上面語句後，客戶端就會與伺服器進行連接。

WebSocket.readyState

跟 HTTP 協議一樣，WebSocket 也有自己的狀態碼：

• CONNECTING：值為0，表示正在連接；
• OPEN：值為1，表示連接成功，可以進行通信；
• CLOSING：值為2，表示連接正在關閉；
• CLOSED：值為3，表示連接已經關閉，或者打開連接失敗。

實例：

switch (ws.readyState) {
    case WebSocket.CONNECTING:
        // do something
        break;
    case WebSocket.OPEN:
        // do something
        break;
    case WebSocket.CLOSING:
        // do something
        break;
    case WebSocket.CLOSED:
        // do something
        break;
    default:
        // this never happend
        break;
}

webSocket.onopen

實例對象的 onopen 屬性，用於指定連接成功後的回調函數。

ws.onopen = function () {
    ws.send('Hello MUSIBII');
}

如果要指定多個回調函數，可以使用 addEventListener 方法。

ws.addEventListener('open', function () {
    ws.send('Hello MUSIBII');
})

webSocket.onclose

實例對象的 onclose 屬性，用於指定連接關閉後的回調函數。

ws.onclose = function (ev) {
    var code = ev.code;
    var reason = ev.reason;
    var wasClean = ev.wasClean;
    // handle close event
};

ws.addEnentListener('close', function (ev) {
    var code = ev.clde;
    var reason = ev.reason;
    var wasClean = ev.wasClean;
    // handle close event
})

webSocket.onmessage

實例對象的 onmessage 屬性，用於指定收到伺服器數據後的回調函數。

ws.onmessage = function (ev) {
    var data = ev.data;
    // handle data
};

ws.addEvendListener('message', function (ev) {
    var date = ev.data;
    // handle data
})

註意：伺服器的數據可能是文本，也可能是二進位數據（blob 對象或 Arraybuffer 對象）。

ws.onmessage = function (ev) {
    if(typeof ev.data === String) {
        console.log('Received data string');
    }
    
    if(ev.data instanceof ArrayBuffer) {
        var buffer = ev.data;
        console.log('Received arraybuffer');
    }
}

除了動態判斷收到的數據類型，也可以使用 binaryType 屬性，顯式指定收到的二進位數據類型。

// 收到的是 blob 數據
ws.binaryType = 'blob';
ws.onmessage = function (ev) {
    console.log(ev.data.size);
};

// 收到的是 ArrayBuffer 數據
ws.binaryType = 'arraybuffer';
ws.onmessage = function (ev) {
    console.log(ev.data.byteLength);
}

webSocket.send()

實例對象的 send() 方法用於向伺服器發送數據。

發送文本的例子。

ws.send('your message');

發送 Blob 對象的例子。

var file = document.querySelector('input[type = "file"]').files[0];
ws.send(file);

發送 ArrayBuffer 對象的例子。

// Senging canvas ImageData as 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.seng(binary.buffer);

webSocket.bufferedAmout

實例對象的 bufferedAmout 屬性，表示還有多少位元組的二級制數據沒有發送出去。它可以用來判斷發送是否結束。

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

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

webSocket.onerror

實例對象的 onerror 屬性，用於指定報錯時的回調函數。

socket.onerror = function (ev) {
    // handle error event
};

socket.addEventListener('error', function (ev) {
    // handle error enent
});