WebSocket Performance Optimization Strategies

While WebSocket itself has excellent performance, it still requires optimization in various aspects in practical applications to ensure optimal performance.

Connection Management Optimization

1. Connection Pool Management

javascript
class WebSocketPool {
  constructor(url, maxConnections = 10) {
    this.url = url;
    this.maxConnections = maxConnections;
    this.connections = [];
    this.pendingRequests = [];
  }
  
  async getConnection() {
    // Find idle connection
    const idleConnection = this.connections.find(conn => conn.busy === false);
    if (idleConnection) {
      idleConnection.busy = true;
      return idleConnection.ws;
    }
    
    // Create new connection
    if (this.connections.length < this.maxConnections) {
      const ws = await this.createConnection();
      this.connections.push({ ws, busy: true });
      return ws;
    }
    
    // Wait for available connection
    return new Promise(resolve => {
      this.pendingRequests.push(resolve);
    });
  }
  
  releaseConnection(ws) {
    const connection = this.connections.find(conn => conn.ws === ws);
    if (connection) {
      connection.busy = false;
      
      // Handle pending requests
      if (this.pendingRequests.length > 0) {
        const resolve = this.pendingRequests.shift();
        connection.busy = true;
        resolve(ws);
      }
    }
  }
  
  async createConnection() {
    return new Promise((resolve, reject) => {
      const ws = new WebSocket(this.url);
      ws.onopen = () => resolve(ws);
      ws.onerror = reject;
    });
  }
}

2. Connection Reuse

javascript
// Singleton pattern for global WebSocket connection management
class GlobalWebSocket {
  static instance = null;
  
  constructor(url) {
    if (GlobalWebSocket.instance) {
      return GlobalWebSocket.instance;
    }
    
    this.url = url;
    this.ws = null;
    this.messageHandlers = new Map();
    this.connect();
    
    GlobalWebSocket.instance = this;
  }
  
  connect() {
    this.ws = new WebSocket(this.url);
    
    this.ws.onmessage = (event) => {
      const { type, data } = JSON.parse(event.data);
      const handlers = this.messageHandlers.get(type) || [];
      handlers.forEach(handler => handler(data));
    };
  }
  
  subscribe(type, handler) {
    if (!this.messageHandlers.has(type)) {
      this.messageHandlers.set(type, []);
    }
    this.messageHandlers.get(type).push(handler);
  }
  
  unsubscribe(type, handler) {
    const handlers = this.messageHandlers.get(type) || [];
    const index = handlers.indexOf(handler);
    if (index !== -1) {
      handlers.splice(index, 1);
    }
  }
}

// Usage example
const ws = new GlobalWebSocket('ws://example.com/socket');
ws.subscribe('chat', (data) => console.log('Received chat message:', data));
ws.subscribe('notification', (data) => console.log('Received notification:', data));

Message Transmission Optimization

1. Message Compression

javascript
// Use pako library for gzip compression
import pako from 'pako';

class CompressibleWebSocket {
  constructor(url) {
    this.ws = new WebSocket(url);
    this.setupMessageHandlers();
  }
  
  send(data) {
    const json = JSON.stringify(data);
    const compressed = pako.gzip(json);
    this.ws.send(compressed);
  }
  
  setupMessageHandlers() {
    this.ws.onmessage = (event) => {
      const compressed = new Uint8Array(event.data);
      const decompressed = pako.ungzip(compressed, { to: 'string' });
      const data = JSON.parse(decompressed);
      this.handleMessage(data);
    };
  }
  
  handleMessage(data) {
    // Handle decompressed message
  }
}

2. Batch Message Sending

javascript
class BatchWebSocket {
  constructor(url, batchSize = 10, batchTimeout = 100) {
    this.ws = new WebSocket(url);
    this.batch = [];
    this.batchSize = batchSize;
    this.batchTimeout = batchTimeout;
    this.batchTimer = null;
  }
  
  send(message) {
    this.batch.push(message);
    
    // Send immediately when batch size is reached
    if (this.batch.length >= this.batchSize) {
      this.flush();
    } else {
      // Schedule timeout send
      this.scheduleFlush();
    }
  }
  
  scheduleFlush() {
    if (this.batchTimer) {
      clearTimeout(this.batchTimer);
    }
    
    this.batchTimer = setTimeout(() => {
      this.flush();
    }, this.batchTimeout);
  }
  
  flush() {
    if (this.batch.length === 0) return;
    
    const batch = [...this.batch];
    this.batch = [];
    
    if (this.batchTimer) {
      clearTimeout(this.batchTimer);
      this.batchTimer = null;
    }
    
    this.ws.send(JSON.stringify({ type: 'batch', messages: batch }));
  }
}

3. Message Priority

javascript
class PriorityWebSocket {
  constructor(url) {
    this.ws = new WebSocket(url);
    this.highPriorityQueue = [];
    this.normalPriorityQueue = [];
    this.lowPriorityQueue = [];
    this.isSending = false;
    this.setupMessageHandlers();
  }
  
  send(message, priority = 'normal') {
    const queue = this.getQueue(priority);
    queue.push(message);
    this.processQueue();
  }
  
  getQueue(priority) {
    switch (priority) {
      case 'high':
        return this.highPriorityQueue;
      case 'low':
        return this.lowPriorityQueue;
      default:
        return this.normalPriorityQueue;
    }
  }
  
  async processQueue() {
    if (this.isSending) return;
    
    const message = this.getNextMessage();
    if (!message) return;
    
    this.isSending = true;
    
    try {
      await this.sendMessage(message);
    } catch (error) {
      console.error('Failed to send message:', error);
      // Re-queue message
      this.normalPriorityQueue.unshift(message);
    }
    
    this.isSending = false;
    this.processQueue();
  }
  
  getNextMessage() {
    if (this.highPriorityQueue.length > 0) {
      return this.highPriorityQueue.shift();
    }
    if (this.normalPriorityQueue.length > 0) {
      return this.normalPriorityQueue.shift();
    }
    if (this.lowPriorityQueue.length > 0) {
      return this.lowPriorityQueue.shift();
    }
    return null;
  }
  
  sendMessage(message) {
    return new Promise((resolve, reject) => {
      this.ws.send(JSON.stringify(message));
      resolve();
    });
  }
}

Server-side Optimization

1. Load Balancing

javascript
// Use Redis for WebSocket connection load balancing
const Redis = require('ioredis');
const redis = new Redis();

class LoadBalancedWebSocketServer {
  constructor(server) {
    this.wss = new WebSocket.Server({ server });
    this.setupLoadBalancing();
  }
  
  setupLoadBalancing() {
    this.wss.on('connection', (ws, request) => {
      const userId = this.getUserId(request);
      const serverId = this.getServerId(userId);
      
      // If connection is not on current server, redirect
      if (serverId !== this.currentServerId) {
        ws.close(1000, `Redirect to ${serverId}`);
        return;
      }
      
      // Register connection
      this.registerConnection(userId, ws);
      
      ws.on('close', () => {
        this.unregisterConnection(userId);
      });
    });
  }
  
  async registerConnection(userId, ws) {
    await redis.hset('websocket_connections', userId, this.currentServerId);
    this.connections.set(userId, ws);
  }
  
  async unregisterConnection(userId) {
    await redis.hdel('websocket_connections', userId);
    this.connections.delete(userId);
  }
  
  async sendToUser(userId, message) {
    const serverId = await redis.hget('websocket_connections', userId);
    
    if (serverId === this.currentServerId) {
      const ws = this.connections.get(userId);
      if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify(message));
      }
    } else {
      // Forward to target server
      this.forwardToServer(serverId, userId, message);
    }
  }
  
  getServerId(userId) {
    // Consistent hashing algorithm
    return consistentHash(userId, this.serverList);
  }
}

2. Message Broadcast Optimization

javascript
class OptimizedBroadcastServer {
  constructor(server) {
    this.wss = new WebSocket.Server({ server });
    this.rooms = new Map();
    this.setupBroadcast();
  }
  
  setupBroadcast() {
    this.wss.on('connection', (ws, request) => {
      const { roomId } = this.parseRequest(request);
      
      // Join room
      this.joinRoom(ws, roomId);
      
      ws.on('message', (data) => {
        const message = JSON.parse(data);
        this.broadcastToRoom(roomId, message, ws);
      });
      
      ws.on('close', () => {
        this.leaveRoom(ws, roomId);
      });
    });
  }
  
  joinRoom(ws, roomId) {
    if (!this.rooms.has(roomId)) {
      this.rooms.set(roomId, new Set());
    }
    this.rooms.get(roomId).add(ws);
  }
  
  leaveRoom(ws, roomId) {
    const room = this.rooms.get(roomId);
    if (room) {
      room.delete(ws);
      if (room.size === 0) {
        this.rooms.delete(roomId);
      }
    }
  }
  
  broadcastToRoom(roomId, message, excludeWs) {
    const room = this.rooms.get(roomId);
    if (!room) return;
    
    const data = JSON.stringify(message);
    
    room.forEach(ws => {
      if (ws !== excludeWs && ws.readyState === WebSocket.OPEN) {
        ws.send(data);
      }
    });
  }
}

Monitoring and Tuning

1. Performance Monitoring

javascript
class WebSocketMonitor {
  constructor(ws) {
    this.ws = ws;
    this.metrics = {
      messagesSent: 0,
      messagesReceived: 0,
      bytesSent: 0,
      bytesReceived: 0,
      latency: [],
      errors: 0
    };
    this.setupMonitoring();
  }
  
  setupMonitoring() {
    const originalSend = this.ws.send.bind(this.ws);
    
    this.ws.send = (data) => {
      this.metrics.messagesSent++;
      this.metrics.bytesSent += data.length;
      return originalSend(data);
    };
    
    this.ws.onmessage = (event) => {
      this.metrics.messagesReceived++;
      this.metrics.bytesReceived += event.data.length;
      
      // Calculate latency
      if (event.data.timestamp) {
        const latency = Date.now() - event.data.timestamp;
        this.metrics.latency.push(latency);
        
        // Keep only last 100 latency records
        if (this.metrics.latency.length > 100) {
          this.metrics.latency.shift();
        }
      }
    };
    
    this.ws.onerror = () => {
      this.metrics.errors++;
    };
  }
  
  getMetrics() {
    return {
      ...this.metrics,
      averageLatency: this.calculateAverageLatency(),
      p99Latency: this.calculateP99Latency()
    };
  }
  
  calculateAverageLatency() {
    if (this.metrics.latency.length === 0) return 0;
    const sum = this.metrics.latency.reduce((a, b) => a + b, 0);
    return sum / this.metrics.latency.length;
  }
  
  calculateP99Latency() {
    if (this.metrics.latency.length === 0) return 0;
    const sorted = [...this.metrics.latency].sort((a, b) => a - b);
    const index = Math.floor(sorted.length * 0.99);
    return sorted[index];
  }
}

Best Practices

1. Connection Reuse: Avoid frequent creation and destruction of connections
2. Message Compression: Compress large messages for transmission
3. Batch Sending: Merge small messages to reduce network round trips
4. Priority Queue: Send important messages first
5. Load Balancing: Distribute connections across multiple servers
6. Monitoring Metrics: Monitor performance metrics in real-time
7. Timely Tuning: Adjust strategies based on monitoring data
8. Resource Cleanup: Clean up unused connections and resources in time