前端 WebSocket 通信实战与最佳实践

前端 WebSocket 通信实战与最佳实践

为什么需要 WebSocket

轮询方式在实时数据获取中存在明显缺陷。例如，每秒请求一次服务器会导致带宽浪费和服务器压力过大。

轮询的局限性

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

这种实现方式效率低下，不适合高并发或实时性要求高的场景。

前端 WebSocket 的正确姿势

1. 基础 WebSocket 使用

封装一个客户端类可以简化连接管理、重连机制及事件监听。

// 正确姿势：基础 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.();