Skip to main content
2026-07-29 16:01
WebSocket

Binary Data Transfer

SubscribeParseValidateMedium
Try Interactive Demo

Description

Send and receive binary data (ArrayBuffer, Blob) over WebSocket.

Test Scenario

// Test: Binary ArrayBuffer transfer
const ws = new WebSocket('wss://echo.websocket.org');
ws.binaryType = 'arraybuffer';

let received: ArrayBuffer | null = null;
ws.onmessage = (e) => { received = e.data; };

await waitFor(() => ws.readyState === WebSocket.OPEN);
const data = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // "Hello"
ws.send(data.buffer);

await waitFor(() => received !== null);
expect(new Uint8Array(received as ArrayBuffer)).toEqual(data);

Testing Tips

  • •Set ws.binaryType to "arraybuffer" or "blob"
  • •Use ArrayBuffer for raw binary
  • •Use Blob for file-like data
// Playwright API Testing - WebSocket
import { test, expect } from '@playwright/test';


test('WebSocket connection', async ({ page }) => {
  // Listen for WebSocket connections
  const wsPromise = page.waitForEvent('websocket');


  await page.goto('/websocket-demo');


  const ws = await wsPromise;
  expect(ws.url()).toContain('ws://');


  // Wait for message
  const framePromise = ws.waitForEvent('framereceived');
  const frame = await framePromise;
  expect(frame.payload).toBeDefined();
});

Challenge ID: ws-binary-data

2 frameworks available