What are WebSocket frames and how does message framing work?
Learn how WebSocket frames work: the FIN bit, opcodes, masking, and how message framing splits and reassembles data across multiple frames.
Expected Interview Answer
A WebSocket frame is the smallest unit of data sent over a WebSocket connection: a small binary header followed by an optional payload, and message framing is the protocol's rule for how one logical message is split across one or more frames.
Each frame header carries a FIN bit (is this the last frame of the message), an opcode (text, binary, close, ping, or pong), a mask flag, and a payload length that can be 7, 7+16, or 7+64 bits. A single message can arrive as one frame with FIN=1, or as an initial frame plus continuation frames (opcode 0x0) until FIN=1 marks the end. Client-to-server frames must be masked with a 32-bit key XORed over the payload to prevent proxy cache poisoning.
- Lets large messages stream in chunks without buffering the whole payload first
- Distinguishes text, binary, and control data via opcodes
- Interleaves control frames like ping/pong between data fragments
- Compact header keeps per-message overhead very low
- Masking protects intermediaries from cache poisoning attacks
AI Mentor Explanation
Think of a full innings commentary sent over telegraph in fixed-size packets. Each packet has a tiny header saying which over it belongs to and whether it is the final packet of that over's description. A long, dramatic six might span three packets, all tagged as belonging together, and only the last one flips the flag meaning 'over complete'. That header-plus-content unit is a WebSocket frame, and stringing them into one over's account is message framing.
Step-by-Step Explanation
Step 1
Read the frame header
Parse the first two bytes for FIN, RSV bits, opcode, mask flag, and the base 7-bit payload length.
Step 2
Resolve extended length
If the length field is 126 read 2 more bytes; if 127 read 8 more bytes to get the true payload size.
Step 3
Apply the mask
For client-to-server frames, read the 4-byte masking key and XOR it over the payload to recover the data.
Step 4
Dispatch by opcode
Route text (0x1), binary (0x2), close (0x8), ping (0x9), or pong (0xA); continuation frames use opcode 0x0.
Step 5
Assemble the message
Append continuation frames until a frame with FIN=1 arrives, then deliver the reassembled message to the app.
What Interviewer Expects
- Knowledge that a message can span multiple frames
- Understanding of the FIN bit and continuation opcode 0x0
- Awareness of the opcode set for data vs control frames
- Explanation of client-side payload masking and why it exists
- Grasp of the variable-length payload encoding
Common Mistakes
- Assuming one message always equals one frame
- Confusing WebSocket frames with TCP segments
- Forgetting that client frames must be masked
- Not knowing control frames can interleave with data fragments
- Believing framing guarantees ordering across independent messages
Best Answer (HR Friendly)
“A WebSocket frame is a small labelled packet of data with a header describing what it carries and whether it is the last piece. Framing is the rule that lets a single message be broken into several of these packets and reassembled correctly on the other side.”
Code Example
function parseFrame(buffer) {
const b0 = buffer[0];
const fin = (b0 & 0x80) !== 0;
const opcode = b0 & 0x0f;
const b1 = buffer[1];
const masked = (b1 & 0x80) !== 0;
let len = b1 & 0x7f;
let offset = 2;
if (len === 126) { len = buffer.readUInt16BE(2); offset = 4; }
else if (len === 127) { len = Number(buffer.readBigUInt64BE(2)); offset = 10; }
return { fin, opcode, masked, len, offset };
}Follow-up Questions
- How do ping and pong control frames keep a connection alive?
- Why must client-to-server frames be masked but not server-to-client?
- What happens if a control frame arrives between two continuation frames?
- How does the permessage-deflate extension change framing?
- What is the maximum payload size a single frame can declare?
MCQ Practice
1. What does the FIN bit in a WebSocket frame indicate?
FIN=1 marks the last frame of a logical message; FIN=0 means more continuation frames follow.
2. Which opcode is used for continuation frames?
Continuation frames carry opcode 0x0; the opcode of the message is set only on the first frame.
3. Why are client-to-server frames masked?
Masking randomizes the bytes so intermediaries cannot be tricked into cache poisoning; it is not encryption.
Flash Cards
What is a WebSocket frame? — A header plus optional payload that is the smallest unit of data over a WebSocket connection.
What does opcode 0x0 mean? — A continuation frame that appends to the message started by a previous frame.
What are the control opcodes? — 0x8 close, 0x9 ping, 0xA pong; they may interleave between data fragments.
Why mask client frames? — To prevent proxy cache poisoning by randomizing payload bytes with a 32-bit XOR key.