前端 WebSocket 实战：告别轮询实现实时通信

前端 WebSocket 实战：告别轮询实现实时通信

背景与优势

在实时数据交互场景中，传统的 HTTP 轮询方式效率低下。例如每秒请求一次服务器获取聊天消息，不仅增加服务器负载，还会造成带宽浪费。WebSocket 提供了全双工通信通道，适合高并发、低延迟的实时场景。

轮询的局限性

// 反面示例：轮询获取数据
function startPolling() {
  setInterval(async () => {
    const response = await fetch('/api/messages');
    const messages = await response.json();
    updateMessages(messages);
  }, 1000); // 每秒请求一次
}

上述代码会导致频繁的网络请求，服务器压力过大，且无法实现真正的即时推送。

核心实现方案

基础封装

通过封装类管理连接状态、重连机制及事件监听，提高代码复用性。

// 基础 WebSocket 客户端封装
class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.ws = null;
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = 5;
    this.listeners = new Map();
  }

  connect() {
    this.ws = new (.);
    .. =  {
      .();
      . = ;
      .();
    };
    .. =  {
       data = .(event.);
      .(data., data.);
    };
    .. =  {
      .();
      .();
      .();
    };
    .. =  {
      .(, error);
      .(, error);
    };
  }

  () {
     (. && .. === .) {
      ..(.({ type, payload }));
    }
  }

  () {
     (!..(event)) {
      ..(event, []);
    }
    ..(event).(callback);
  }

  () {
     (..(event)) {
      ..(event).( (data));
    }
  }

  () {
     (. < .) {
      .++;
      .();
      ( .(), );
    }
  }

  () {
     (.) {
      ..();
    }
  }
}


 ws =  ();
ws.(,  { .(); });
ws.(,  { .(, data); });
ws.();