How do you send different types of data over WebSocket?

Question

Accepted Answer

The WebSocket API provides a unified send() method that accepts various data types, automatically framing them appropriately for transmission. The key distinction is between text frames and binary frames—WebSocket has separate opcodes for each. When you send a string, it's transmitted as a text frame with UTF-8 encoding. When you send binary data, it's transmitted as a binary frame. The receiving side can distinguish between them through the event.data type, allowing applications to handle different message formats appropriately. **String (text)**: Sent as UTF-8 encoded text frame. Ideal for human-readable messages, commands, and simple data . **ArrayBuffer**: Sent as binary frame. Perfect for efficient transmission of typed data, images, audio, or any binary format . **Typed Arrays (Uint8Array, etc.)**: The underlying ArrayBuffer is sent; the view type isn't preserved . **Blob (browser)**: Sent as binary frame. Useful for file data without reading into memory first . **Buffer (Node.js)**: In Node.js, Buffer objects are accepted and sent as binary data . **DataView**: The underlying ArrayBuffer is sent . const socket = new WebSocket('wss://example.com'); socket.addEventListener('open', () => { // 1. Text data (string) socket.send('Hello, server!'); // 2. JSON (serialize first) const data = { type: 'greeting', user: 'Alice', timestamp: Date.now() }; socket.send(JSON.stringify(data)); // 3. ArrayBuffer const buffer = new ArrayBuffer(8); const view = new DataView(buffer); view.setInt32(0, 42); // 4-byte integer view.setFloat32(4, 3.14159); // 4-byte float socket.send(buffer); // 4. Typed Array (Uint8Array) const uint8 = new Uint8Array([10, 20, 30, 40, 50]); socket.send(uint8); // The underlying ArrayBuffer is sent // 5. Blob (browser only) const blob = new Blob(['Hello'], { type: 'text/html' }); socket.send(blob); // 6. Multiple chunks (large data) const largeData = new Uint8Array(10 * 1024 * 1024); // 10MB // Send in chunks to avoid overwhelming the connection const chunkSize = 64 * 1024; // 64KB chunks for (let i = 0; i < largeData.length; i += chunkSize) { const chunk = largeData.slice(i, i + chunkSize); socket.send(chunk); } }); On the receiving side, the binary type must be configured to properly handle incoming binary data. The `socket.binaryType` property determines whether binary messages are delivered as Blob (default in browsers) or ArrayBuffer. This choice affects memory usage and how you process the data—Blobs are better for large files, while ArrayBuffers provide direct memory access for parsing. const socket = new WebSocket('wss://example.com'); // Configure binary type before connection opens socket.binaryType = 'arraybuffer'; // or 'blob' (default) socket.addEventListener('message', (event) => { // Check the data type if (typeof event.data === 'string') { // Text message console.log('Text message:', event.data); // Try to parse as JSON try { const json = JSON.parse(event.data); console.log('Parsed JSON:', json); } catch (e) { // Not JSON, treat as plain text } } else if (event.data instanceof ArrayBuffer) { // Binary message as ArrayBuffer console.log('Binary message, size:', event.data.byteLength, 'bytes'); // Process with DataView const view = new DataView(event.data); if (event.data.byteLength >= 8) { const intValue = view.getInt32(0); const floatValue = view.getFloat32(4); console.log('Parsed values:', intValue, floatValue); } // Or use Typed Array const uint8 = new Uint8Array(event.data); console.log('First few bytes:', uint8.slice(0, 5)); } else if (event.data instanceof Blob) { // Binary message as Blob console.log('Blob received, size:', event.data.size, 'type:', event.data.type); // Read blob as text (if it's text data) event.data.text().then(text => { console.log('Blob as text:', text); }); // Or as ArrayBuffer event.data.arrayBuffer().then(buffer => { console.log('Blob as ArrayBuffer:', buffer.byteLength); }); } }); **Message framing**: Since WebSocket preserves message boundaries, you don't need delimiters like newlines for separate messages . **Binary vs text**: Use text for human-readable, debuggable protocols. Use binary for efficiency and when sending non-text data . **Message types**: Design your protocol to distinguish message types. Common approaches include first-byte type identifiers or JSON with a 'type' field . **Length prefixing**: For binary protocols, consider prefixing each message with a length field to help parsing . **Compression**: Enable `permessage-deflate` extension for text-heavy protocols to reduce bandwidth . // Client-side binary protocol implementation class BinaryProtocol { constructor(socket) { this.socket = socket; this.socket.binaryType = 'arraybuffer'; this.s

How do you send different types of data over WebSocket?

WebSocket supports sending both text and binary data through its send() method, with text sent as UTF-8 strings and binary sent as ArrayBuffer, Blob (browser), or Buffer (Node.js), while structured data like JSON requires serialization before sending.

How do you send different types of data over WebSocket?

WebSocket supports sending both text and binary data through its send() method, with text sent as UTF-8 strings and binary sent as ArrayBuffer, Blob (browser), or Buffer (Node.js), while structured data like JSON requires serialization before sending.

Scenario Questions

Follow-up Questions