Sending and Receiving Data

Technical Deep Dive & Specifications

The socket.send() API

The native send() method accepts four distinct types of data:

socket.send(data: string | ArrayBuffer | Blob | ArrayBufferView): void;

1. USVString (string): Transmitted as an RFC 6455 Text Frame (Opcode 0x1). Must be valid UTF-8. If non-UTF-8 character sequences are encountered, the browser will abort.
2. Blob: Transmitted as an RFC 6455 Binary Frame (Opcode 0x2). Represents raw, immutable binary data backed by disk or RAM.
3. ArrayBuffer: Transmitted as a Binary Frame (Opcode 0x2). Represents a raw, fixed-length in-memory byte buffer.
4. ArrayBufferView (TypedArray / DataView): E.g., Uint8Array, Int32Array, Float64Array. The browser transmits the underlying slice of memory as a Binary Frame (Opcode 0x2).

The binaryType Property

By default, modern browsers set socket.binaryType = 'blob'. When a binary frame arrives from the server, event.data will be an instance of Blob.

const socket = new WebSocket('wss://example.com/stream');

// Default behavior:
console.log(socket.binaryType); // 'blob'

// High-performance configuration (strongly recommended for games, canvas, audio):
socket.binaryType = 'arraybuffer';

Comparison: Blob vs ArrayBuffer

Standard JSON Message Envelopes

In production web applications, raw text frames should follow a standardized message envelope pattern:

interface WebSocketEnvelope<T = unknown> {
  id: string;          // Unique client-generated UUID for tracing
  type: string;        // Action/Event identifier (e.g. 'CHAT_MESSAGE', 'USER_JOIN')
  timestamp: number;   // Epoch timestamp in milliseconds
  payload: T;          // Typed data payload
}

Safe Sending & Receiving Implementation:

// Outbound serialization
function dispatchJson(socket, type, payload) {
  if (socket.readyState !== WebSocket.OPEN) {
    console.warn('Socket not open. Dropping message:', type);
    return;
  }

  const envelope = {
    id: crypto.randomUUID(),
    type,
    timestamp: Date.now(),
    payload
  };

  socket.send(JSON.stringify(envelope));
}

// Inbound deserialization and routing
socket.addEventListener('message', (event) => {
  if (typeof event.data === 'string') {
    try {
      const message = JSON.parse(event.data);
      handleMessage(message);
    } catch (err) {
      console.error('Malformed JSON frame received:', event.data);
    }
  } else if (event.data instanceof ArrayBuffer) {
    handleBinaryBuffer(event.data);
  }
});

High-Performance Binary Packing with DataView

Textual JSON is inefficient for high-frequency telemetry. Consider a telemetry packet containing:

• timestamp (uint32: 4 bytes)
• sensorId (uint16: 2 bytes)
• temperature (float32: 4 bytes)
• humidity (float32: 4 bytes)

In JSON, this string takes ~95 bytes: {"timestamp":1698240000,"sensorId":42,"temperature":24.55,"humidity":58.20}

In a packed binary ArrayBuffer, it takes exactly 14 bytes (an 85% reduction in network payload):

+--------------------------------------------------------------------+
|                         14-BYTE BINARY PACKET                      |
+-------------------+-----------------+----------------+-------------+
| Timestamp (4B)    | Sensor ID (2B)  | Temp (4B)      | Humid (4B)  |
| Uint32 (Bytes 0-3)| Uint16 (Bytes 4)| Float32 (6-9)  | Float32 (10)|
+-------------------+-----------------+----------------+-------------+

// Binary Packing
function packTelemetry(timestamp, sensorId, temp, humidity) {
  const buffer = new ArrayBuffer(14);
  const view = new DataView(buffer);

  view.setUint32(0, timestamp, false); // false = Big Endian
  view.setUint16(4, sensorId, false);
  view.setFloat32(6, temp, false);
  view.setFloat32(10, humidity, false);

  return buffer;
}

// Binary Unpacking
function unpackTelemetry(buffer) {
  const view = new DataView(buffer);

  return {
    timestamp: view.getUint32(0, false),
    sensorId: view.getUint16(4, false),
    temperature: Number(view.getFloat32(6, false).toFixed(2)),
    humidity: Number(view.getFloat32(10, false).toFixed(2))
  };
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 75–88 (sendJsonBtn): Builds a structured JSON envelope with UUID and timestamp. new TextEncoder().encode(serialized).length precisely measures the wire byte size of the UTF-8 payload.
• Lines 91–105 (sendBinaryBtn): Allocates an exact 14-byte ArrayBuffer and uses DataView with big-endian (false) alignment to pack an unsigned 32-bit timestamp, unsigned 16-bit integer, and two 32-bit floats.
• Lines 107–114 (bytes.forEach): Extracts individual bytes into a Uint8Array to render the exact byte array visualizer.
• Lines 117–126 (unpackedView): Demonstrates synchronous zero-copy unpacking directly from the buffer.

Expected Browser Render Output

WebSocket Payload Dispatcher
Status: Initializing Mock Bridge... [binaryType: 'arraybuffer']

1. JSON Text Frame
Wire Size: 138 bytes (UTF-8)

2. Packed Binary Frame (DataView)
Raw Memory Hex View:
[0x65] [0x3B] [0x2E] [0x10] [0x10] [0x00] [0x41] [0xBE] [0x00] [0x00] [0x42] [0x80] [0x66] [0x66]

Inbound Frame Reception Log
[BINARY FRAME INBOUND] (14 bytes total -> Decoded):
{
  "timestamp": "2026-08-21T02:30:00.000Z",
  "sensorId": 4096,
  "temperature": "23.75 °C",
  "humidity": "64.20 %"
}