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
});