WebSocket Header解析

一、WebSocket Header概述

WebSocket是HTML5中一種新的協議，它實現了瀏覽器與伺服器的全雙工通信，使得客戶端和伺服器可以進行實時的數據傳輸。搭建WebSocket伺服器，需要先了解WebSocket連接建立的過程中的頭部信息。

二、WebSocket Header格式

在建立WebSocket連接時，瀏覽器和伺服器之間會進行協議升級，即使用HTTP協議發起一個握手請求來升級連接。發起握手請求時，瀏覽器會在請求頭中加上”Sec-WebSocket-Key”和”Sec-WebSocket-Version”這兩個欄位，伺服器需要根據這兩個欄位來判斷是否支持WebSocket協議，如支持則必須回應101狀態碼，並在響應頭中加入”Upgrade”和”Connection”這兩個欄位。

GET /[path] HTTP/1.1
Host: [host]
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: [key]
Sec-WebSocket-Version: [version]

“Sec-WebSocket-Key”是一個隨機字元串，伺服器需要使用這個字元串來加密後再轉換成位元組數組，然後通過SHA-1計算出20個位元組的哈希值，最後將此哈希值的base64編碼作為響應頭中的”Sec-WebSocket-Accept”欄位。

三、WebSocket Header欄位解析

1. Upgrade

“Upgrade”是請求頭中的一個欄位，表示瀏覽器希望升級到哪種協議。在升級WebSocket時，其值為”websocket”。

2. Connection

“Connection”是請求頭中的一個欄位，表示瀏覽器希望建立的連接類型。在升級WebSocket時，其值為”Upgrade”。

3. Sec-WebSocket-Key

“Sec-WebSocket-Key”是瀏覽器生成的隨機字元串，用於計算響應值。伺服器需要將這個字元串與一個魔術字元串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 拼接，然後計算 SHA1 哈希值。最後，伺服器以 Base64 編碼方式返回哈希值，並在響應頭中添加”Sec-WebSocket-Accept”欄位，告訴瀏覽器解碼響應頭並驗證key是否正確。

4. Sec-WebSocket-Version

“Sec-WebSocket-Version”是請求頭中的一個欄位，表示瀏覽器支持的WebSocket協議版本號。

5. Sec-WebSocket-Accept

“Sec-WebSocket-Accept”是響應頭中的一個欄位，表示伺服器計算出來的響應值，也就是經過base64編碼後的字元串。這個值需要被瀏覽器驗證，以確保握手請求是受信任的。

四、WebSocket Header參考代碼

1. Python實現WebSocket握手過程

def handshake(sock):
    """
    handshake for WebSocket
    """
    data = sock.recv(1024)
    headers = {}
    lines = data.decode('utf-8').splitlines()

    for l in lines:
        parts = l.split(": ", 1)
        if len(parts) == 2:
            headers[parts[0]] = parts[1]

    headers['Sec-WebSocket-Accept'] = b64encode(
        sha1((headers['Sec-WebSocket-Key'] + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").encode('utf-8')).digest())

    response = \
        b"HTTP/1.1 101 Web Socket Protocol Handshake\r\n" \
        b"Upgrade: websocket\r\n" \
        b"Connection: Upgrade\r\n" \
        b"Sec-WebSocket-Accept: " + headers['Sec-WebSocket-Accept'] + b"\r\n\r\n"

    sock.send(response)

2. JavaScript實現WebSocket握手過程

var socket = new WebSocket("ws://localhost:8080/");
socket.onopen = function() {
    var key = generateWebSocketKey();
    var headers = {
        "Upgrade": "websocket",
        "Connection": "Upgrade",
        "Sec-WebSocket-Key": key,
        "Sec-WebSocket-Version": "13"
    };

    socket.send(buildWebSocketHandshake(headers));
}

function generateWebSocketKey() {
    var buffer = new Uint32Array(1);
    var bytes = new Uint8Array(buffer.buffer);

    window.crypto.getRandomValues(buffer);

    var key = '';

    for (var byte of bytes) {
        key += String.fromCharCode(byte);
    }

    return btoa(key);
}

function buildWebSocketHandshake(headers) {
    var lines = [];

    for (var k in headers) {
        lines.push(k + ": " + headers[k]);
    }

    var handshake = "GET / HTTP/1.1\r\n" +
        lines.join("\r\n") + "\r\n\r\n";

    return handshake;
}

五、總結

WebSocket的Header信息是WebSocket建立連接的重要組成部分，其握手過程確保通信雙方都能正常解析對方發來的信息。通過查看header信息，可以輕鬆了解WebSocket請求的詳細內容，對於開發和調試WebSocket應用程序非常有幫助。