Implementing Real-Time Features in JavaScript with WebSockets

---
title: Implementing Real-Time Features in JavaScript with WebSockets
description: Guidelines on using WebSockets to add real-time communication capabilities to JavaScript applications.
category: JavaScript Cursor Rules
---

# Implementing Real-Time Features in JavaScript with WebSockets

## Context
- Applicable when integrating WebSocket-based real-time communication in JavaScript applications.
- Assumes familiarity with JavaScript ES6+ and basic networking concepts.

## Requirements

1. **Use Standard WebSocket API**
   - Utilize the native WebSocket API for establishing connections.
   - Example:
     ```javascript
     const socket = new WebSocket('wss://example.com/socket');
     ```

2. **Handle Connection Lifecycle Events**
   - Implement event listeners for `open`, `message`, `error`, and `close` events.
   - Example:
     ```javascript
     socket.addEventListener('open', (event) => {
       console.log('Connection opened:', event);
     });

     socket.addEventListener('message', (event) => {
       console.log('Message received:', event.data);
     });

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

     socket.addEventListener('close', (event) => {
       console.log('Connection closed:', event);
     });
     ```

3. **Implement Reconnection Logic**
   - Detect unexpected disconnections and attempt to reconnect with exponential backoff.
   - Example:
     ```javascript
     let reconnectAttempts = 0;
     const maxReconnectAttempts = 5;

     function connect() {
       const socket = new WebSocket('wss://example.com/socket');

       socket.addEventListener('close', (event) => {
         if (!event.wasClean && reconnectAttempts < maxReconnectAttempts) {
           const timeout = Math.pow(2, reconnectAttempts) * 1000;
           setTimeout(connect, timeout);
           reconnectAttempts++;
         }
       });
     }

     connect();
     ```

4. **Secure WebSocket Connections**
   - Always use the `wss://` protocol to encrypt data in transit.
   - Ensure the server has a valid SSL/TLS certificate.

5. **Validate and Sanitize Messages**
   - Validate incoming messages to prevent injection attacks.
   - Sanitize outgoing messages to avoid sending malicious data.

6. **Manage Resource Cleanup**
   - Close WebSocket connections when no longer needed to free up resources.
   - Example:
     ```javascript
     socket.close();
     ```

7. **Handle Large Payloads Efficiently**
   - Implement logic to handle large messages, such as chunking or compression, to maintain performance.

8. **Monitor and Log WebSocket Activity**
   - Log connection status, errors, and messages for debugging and monitoring purposes.

## Examples

<example>
**Good Example:**
const socket = new WebSocket('wss://example.com/socket');

socket.addEventListener('open', () => {
  console.log('Connected to WebSocket server');
});

socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  // Process data
});

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

socket.addEventListener('close', (event) => {
  if (!event.wasClean) {
    console.log('Connection lost, attempting to reconnect...');
    // Reconnection logic here
  }
});
</example>

<example type="invalid">
**Bad Example:**
const socket = new WebSocket('ws://example.com/socket'); // Insecure connection

socket.onmessage = (event) => {
  // Directly using event data without validation
  document.body.innerHTML = event.data;
};

socket.onclose = () => {
  // No reconnection logic
};
</example>