What are the WebSocket ready states?

Question

Accepted Answer

The WebSocket.readyState property provides a way to programmatically determine the current state of a WebSocket connection. This is essential for robust applications that need to handle connection failures, send messages only when the connection is open, or implement reconnection logic. The readyState is a read-only integer that changes throughout the connection lifecycle, from initial handshake through active communication to final closure. **0 - CONNECTING**: The connection is being established. The handshake has not yet completed. This is the initial state when the WebSocket object is created . **1 - OPEN**: The connection is established and ready for communication. Both text and binary data can be sent and received in this state . **2 - CLOSING**: The connection is in the process of closing. Either the client or server initiated a close handshake, but it hasn't completed yet . **3 - CLOSED**: The connection is closed or could not be opened. This is the final state after a successful close or after a connection failure . const socket = new WebSocket('wss://example.com');

// Check initial state (should be 0 - CONNECTING)
console.log('Initial state:', socket.readyState); // 0

// Using the constant properties (recommended for readability)
console.log(socket.readyState === WebSocket.CONNECTING); // true initially
console.log(socket.readyState === WebSocket.OPEN);       // false initially
console.log(socket.readyState === WebSocket.CLOSING);    // false initially
console.log(socket.readyState === WebSocket.CLOSED);     // false initially

socket.addEventListener('open', () => {
  console.log('Now open:', socket.readyState === WebSocket.OPEN); // true
});

socket.addEventListener('close', () => {
  console.log('Now closed:', socket.readyState === WebSocket.CLOSED); // true
});

// The constants are also available as numbers
console.log(WebSocket.CONNECTING); // 0
console.log(WebSocket.OPEN);       // 1
console.log(WebSocket.CLOSING);    // 2
console.log(WebSocket.CLOSED);     // 3 The ready state is particularly important for sending messages. Attempting to send data when the connection is not in the OPEN state will throw an error. Robust implementations always check the ready state before sending, and often implement queuing mechanisms for messages that arrive while connecting or reconnecting. class SafeWebSocket {
  constructor(url) {
    this.url = url;
    this.socket = null;
    this.messageQueue = [];
    this.connect();
  }
  
  connect() {
    this.socket = new WebSocket(this.url);
    
    this.socket.addEventListener('open', () => {
      console.log('Connected, sending queued messages');
      // Send any messages that arrived while connecting
      while (this.messageQueue.length > 0) {
        const data = this.messageQueue.shift();
        this.safeSend(data);
      }
    });
    
    this.socket.addEventListener('close', () => {
      console.log('Disconnected, will queue messages');
    });
  }
  
  safeSend(data) {
    // Check if socket exists and is open
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(data);
      return true;
    } 
    // Check if we're connecting
    else if (this.socket && this.socket.readyState === WebSocket.CONNECTING) {
      console.log('Still connecting, queueing message');
      this.messageQueue.push(data);
      return false;
    } 
    // Connection is closing or closed
    else {
      console.warn('Connection not available, message dropped');
      return false;
    }
  }
  
  getStateDescription() {
    if (!this.socket) return 'No connection';
    
    switch(this.socket.readyState) {
      case WebSocket.CONNECTING:
        return 'Connecting';
      case WebSocket.OPEN:
        return 'Open';
      case WebSocket.CLOSING:
        return 'Closing';
      case WebSocket.CLOSED:
        return 'Closed';
      default:
        return 'Unknown';
    }
  }
}

// Usage
const ws = new SafeWebSocket('wss://example.com');
ws.safeSend('Hello'); // Will queue if not yet open

// Later check state
console.log(ws.getStateDescription()); **CONNECTING → OPEN**: Occurs when the handshake completes successfully and the connection is ready . **OPEN → CLOSING**: Triggered when either side initiates a close (via `socket.close()` or server close frame) . **CLOSING → CLOSED**: Happens when the close handshake completes and the underlying TCP connection terminates . **CONNECTING → CLOSED**: Can happen if the handshake fails (network error, server rejects, timeout) . **OPEN → CLOSED**: Immediate transition if the connection fails unexpectedly (network interruption, server crash) without going through CLOSING . const socket = new WebSocket('wss://example.com');

// Log state changes
let lastState = socket.readyState;

setInterval(() => {
  if (socket.readyState !== lastState) {
    const states = ['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED'];
    console.log(`State changed: ${states[lastState]} → ${states[socket.readyState]}`);
    lastSta

What are the WebSocket ready states?

WebSocket ready states are numeric constants representing the connection's current status: 0 (CONNECTING), 1 (OPEN), 2 (CLOSING), and 3 (CLOSED), which can be accessed via the WebSocket.readyState property.

Scenario Questions

Follow-up Questions