WebSocketHeader詳解

WebSocketHeader是WebSocket協議頭部的核心組成部分，它包含了協議的版本號、數據幀類型、掩碼、負載長度等重要信息。在WebSocket協議通信中，WebSocketHeader扮演了至關重要的角色。本文將圍繞WebSocketHeader展開詳細闡述，從多個方面對WebSocketHeader進行探討。

一、WebSocketHeader的組成

WebSocketHeader由6個部分組成，分別是：FIN位、RSV1-3、Opcode、MASK位、Payload length以及Masking Key。下面將分別介紹各個部分的含義。

1. FIN位：FIN位為1表示當前幀是消息的最後一幀，為0表示消息還有後續幀。實際應用中，由於Websocket協議的限制，消息分片長度通常不得超過16MB。

2. RSV1-3：RSV位是三個空閑保留位，暫時不用。

3. Opcode：Opcode指定了當前幀的類型。經過ietf的規定，當前一共定義了Opicde7種類型。分別是：0x0 – Continuation Frame、0x1 – Text Frame、0x2 – Binary Frame、0x3-7 – Reserved for further non-control frames、0x8 – Close Frame、0x9 – Ping Frame、0xA – Pong Frame、0xB-F- Reserved for further control frames

4. MASK位：MASK位用於指示負載載荷是否進行了掩碼。在通信的時候，客戶端發出的數據幀是必須進行掩碼處理的，以保證數據的安全性。而服務器返回的數據幀是不能進行掩碼處理的。

5. Payload length：Payload length 表示載荷數據的長度，如果長度在0到125之間，Payload length 所佔據的就是一個字節；如果長度是126到65535之間，Payload length 所佔據的就是兩個字節；而如果長度大於65535 bytes，則所佔據的字節為八字節，不過目前這種情況一般都不會發生，所以現在 WebSocket Header 的長度一般都是固定的 2 字節。

6. Masking Key：4個字節的隨機數，被用於對載荷進行加密。在客戶端和服務端進行數據通信時，客戶端發送數據必須進行加密，而服務端接收到數據時必須進行解密。

二、WebSocketHeader的解析示例

接下來，我們將通過一個示例來解析WebSocketHeader的具體含義。

00000000  81 8C 4D CA 6F F2 1D 1A  EB FC 8C 88 AC E7 1E E5  ..M.o...........
00000010  63 DF 0A 62 60 22 42 80  46 19 90 77 F9 22 16 F9  c..b`"B.F..w."..
00000020  9E 7A 05 B9 C7 92 B3 8D  F1 86 6E 4E 16 0A 2C 3E  .z.........nN..,>

以上代碼為WebSocket報文的內容，我們需要進行解析。首先是第一行，由16個字節組成：81是Opcode，表示接下來的內容為文本消息；8C表示Payload length的值，也就是140字節，8C的二進制為 1000 1100，高位比特位表示掩碼，低七位表示長度；後面4個字節是Masking Key，這個由服務端發送給客戶端的數據包里就有，目的是把掩碼用於解密後面的數據；再看後面的內容，就是用Masking Key掩碼後的消息。

代碼示例：

let buffer = Buffer.from([0x81, 0x8C, 0x4D, 0xCA, 0x6F, 0xF2, 0x1D, 0x1A, 0xEB, 0xFC, 0x8C, 0x88, 0xAC, 0xE7, 0x1E, 0xE5, 0x63, 0xDF, 0x0A, 0x62, 0x60, 0x22, 0x42, 0x80, 0x46, 0x19, 0x90, 0x77, 0xF9, 0x22, 0x16, 0xF9, 0x9E, 0x7A, 0x05, 0xB9, 0xC7, 0x92, 0xB3, 0x8D, 0xF1, 0x86, 0x6E, 0x4E, 0x16, 0x0A, 0x2C, 0x3E]);

let FIN = buffer[0] & 0x80;
let Opcode = buffer[0] & 0x0F;

let Mask = buffer[1] & 0x80;
let PayloadLength = buffer[1] & 0x7F;

let Payload = buffer.slice(2, 2 + PayloadLength);
let MaskingKey = buffer.slice(2 + PayloadLength, 2 + PayloadLength + 4);

if (Mask) {
  for (let i = 0; i < PayloadLength; i++) {
    Payload[i] ^= MaskingKey[i % 4];
  }
}

console.log('FIN : ' + FIN);
console.log('Opcode : ' + Opcode);
console.log('Mask : ' + Mask);
console.log('Payload Length : ' + PayloadLength);
console.log('Payload : ' + Payload.toString());
console.log('Masking Key : ' + MaskingKey.toString('hex'));

三、WebSocketHeader的應用場景

WebSocketHeader是在WebSocket協議通信中必不可少的一部分，它通過標識數據類型、數據長度、掩碼等信息，保證了WebSocket通信的安全性和實時性。在Web應用中，WebSocket協議已經被廣泛應用，例如：在線聊天、消息推送、數據實時更新等。

代碼示例：

let ws = new WebSocket("wss://www.example.com");

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

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

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

四、WebSocketHeader的優化策略

WebSocketHeader的傳輸開銷會調劑一些應用場景下的性能表現。WebSocket協議的通信過程中，如果每次都傳輸WebSocket Header的全部內容，將極大地影響通信效率。所以，在實際應用中，我們需要針對具體的應用場景，對WebSocketHeader進行優化，以提升通信效率。

1. Control Frames 壓縮

WebSocket協議提供了一些 Control Frames，用於管理連接狀態、心跳、關閉連接等。這些幀通常只有幾個字節，但由於 WebSocket Header 加載上面，控制幀的大小會比實際負載大幾倍，浪費了網絡帶寬。對控制負載做差異化處理是降低頭部的方法之一。

2. 壓縮規劃Payload Length

雖然，WebSocket協議 Payload Length 的取值範圍巨大，但在實際應用中只有一部分特定長度是需要頻繁發送的。協議制定者建議使用 “variable length integers” 的技巧，對 Payload Length 進行經濟小巧的編碼，來避免頭部開銷。

3. Masking Position Internals

在應用中，WebSocket協議無需在所有的數據幀中都應用掩碼，開啟/關閉掩碼的頻率取決於應用程序的特定使用場景和需求。嘗試將掩碼開啟/關閉頻率最小化。

代碼示例：

let ws = new WebSocket("wss://www.example.com", {
  perMessageDeflate: {
    zlibDeflateOptions: {
      chunkSize: 1024,
      memLevel: 7,
      level: 3
    },
    zlibInflateOptions: {
      chunkSize: 1024,
    },
    clientNoContextTakeover: true, 
    serverNoContextTakeover: true,
    clientMaxWindowBits: 10, 
    serverMaxWindowBits: 10,
    concurrencyLimit: 10, 
    threshold: 1024 
  }
});

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

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

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

五、總結

本文詳細闡述了WebSocketHeader的組成、解析、應用場景和優化策略等多個方面。WebSocketHeader作為WebSocket協議通信中的核心組成部分，扮演着至關重要的角色。熟練掌握WebSocketHeader的相關知識，對於優化WebSocket通信效率、提高Web應用性能至關重要。