WebSocket Lifecycle & Frame Protocol — Interactive Architecture Visualizer

Client Browser

new WebSocket('ws://.../chat')

CONNECTING

WebSocket API State

readyState: 0 (CONNECTING)

Sec-WS-Key: dGhlIHNhbXBsZQ==

Client Masking: Mandatory (MASK=1)

XOR Masking Engine (Plain ^ Key) Standby

Plain:

'H' (48)

'e' (65)

'l' (6C)

Key:

Wire:

RFC 6455 Frame Dissector

2–14 Byte Wire Header Inspector

TCP STREAM

FIN Bit: -

Opcode: -

MASK Bit: -

Mask Key: -

Payload Length: -

Decoded Frame Payload

Awaiting HTTP 101 Upgrade...

WebSocket Server

ws:// Port 80/443 Endpoint

LISTEN

Server State & SHA-1 Accept

Socket State: LISTEN

Sec-WS-Accept: s3pPLMBiTxaQ9k...

Reassembly Buf: empty

XOR Unmasking (Mask ^ Key) Standby

Wire:

Key:

Plain:

'H'

'e'

'l'

1. Initial TCP Connection (Handshake Pending)

Before a WebSocket connection can be established, the Client must establish a standard TCP connection with the Server. The client initializes its readyState to CONNECTING.