websocket 初識

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