How do you create a WebSocket connection in JavaScript?

Question

Accepted Answer

Creating a WebSocket connection in JavaScript is straightforward thanks to the built-in WebSocket API provided by browsers and Node.js (via libraries or native support in recent versions). The WebSocket constructor takes the server URL and optional protocols, then automatically initiates the handshake. After creation, you interact with the connection through event handlers that fire when the connection opens, messages arrive, errors occur, or the connection closes. This event-driven model integrates seamlessly with JavaScript's asynchronous nature. // Create a new WebSocket connection
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', (event) => {
  console.log('Connected to server');
  
  // Send a message to the server
  socket.send('Hello Server!');
  
  // Send JSON data
  socket.send(JSON.stringify({
    type: 'greeting',
    user: 'John',
    message: 'Hello'
  }));
});

// Listen for messages
socket.addEventListener('message', (event) => {
  console.log('Message from server:', event.data);
  
  // Parse if it's JSON
  try {
    const data = JSON.parse(event.data);
    console.log('Parsed data:', data);
  } catch (e) {
    // Not JSON, handle as text
  }
});

// Handle connection errors
socket.addEventListener('error', (event) => {
  console.error('WebSocket error:', event);
});

// Handle connection close
socket.addEventListener('close', (event) => {
  console.log('Disconnected from server', event.code, event.reason);
}); **URL parameter**: Required. Must start with `ws://` (unencrypted) or `wss://` (encrypted/TLS). The URL can include path and query parameters . **Protocols parameter**: Optional. A string or array of strings specifying subprotocols the client supports (e.g., `['chat', 'superchat']`). The server must select one . **Origin restrictions**: The browser automatically sends the Origin header based on the page's origin, enforcing same-origin policies unless CORS is configured . // Secure WebSocket with subprotocol negotiation
const socket = new WebSocket('wss://api.example.com/chat', ['chat', 'mqtt']);

socket.addEventListener('open', () => {
  console.log('Connected with protocol:', socket.protocol);
  // socket.protocol will be the protocol selected by server
});

// Alternative: multiple protocols as array
const protocols = ['v1.chat.protocol', 'v2.chat.protocol', 'fallback'];
const socket2 = new WebSocket('wss://example.com', protocols);

// Query parameters for authentication
const token = 'eyJhbGciOiJIUzI1NiIs...';
const authSocket = new WebSocket(`wss://api.example.com?token=${token}`);

// Custom headers aren't directly supported in browser WebSocket API
// For custom headers, you may need to use a library or handle auth via
// query parameters, cookies, or protocol negotiation The WebSocket object has several important properties that reflect its current state. The `readyState` property can be `CONNECTING` (0), `OPEN` (1), `CLOSING` (2), or `CLOSED` (3). You can check this before sending messages to ensure the connection is active. The `bufferedAmount` property indicates how many bytes of data are queued but not yet sent, useful for backpressure handling when sending large amounts of data. const socket = new WebSocket('ws://example.com');

// Monitor buffered amount to avoid overwhelming the connection
function sendLargeData(data) {
  const CHUNK_SIZE = 1024 * 1024; // 1MB chunks
  
  function sendChunk(offset) {
    if (offset >= data.length) return;
    
    const chunk = data.slice(offset, offset + CHUNK_SIZE);
    socket.send(chunk);
    
    // If buffer is getting full, wait before sending more
    if (socket.bufferedAmount > 5 * 1024 * 1024) { // 5MB
      setTimeout(() => sendChunk(offset + CHUNK_SIZE), 100);
    } else {
      // Use setTimeout to avoid stack overflow
      setTimeout(() => sendChunk(offset + CHUNK_SIZE), 0);
    }
  }
  
  sendChunk(0);
}

// Constants for readyState
console.log(WebSocket.CONNECTING); // 0
console.log(WebSocket.OPEN);       // 1
console.log(WebSocket.CLOSING);    // 2
console.log(WebSocket.CLOSED);     // 3 **Text data**: Strings are sent as UTF-8 text frames . **Binary data**: Can send ArrayBuffer, Blob (browser), or Buffer (Node.js). Set `socket.binaryType` to `'arraybuffer'` or `'blob'` to control received binary format . **JSON**: Serialize objects with `JSON.stringify()` before sending; parse received JSON in message handler . **Streams**: For large data, consider chunking or using specialized protocols . const socket = new WebSocket('ws://example.com');

// Configure binary type for received data
socket.binaryType = 'arraybuffer'; // or 'blob'

socket.addEventListener('open', () => {
  // Sending text
  socket.send('Hello');

How do you create a WebSocket connection in JavaScript?

You create a WebSocket connection in JavaScript by instantiating the WebSocket object with the server URL, then handling connection events like open, message, error, and close through event listeners or callback properties.

How do you create a WebSocket connection in JavaScript?

You create a WebSocket connection in JavaScript by instantiating the WebSocket object with the server URL, then handling connection events like open, message, error, and close through event listeners or callback properties.

Scenario Questions

Follow-up Questions