websocket js封装

class WebSocketClient {
  constructor(url) {
    this.socket = new WebSocket(url);
    this.listeners = {};

    this.socket.onopen = () => {
      console.log('WebSocket连接已打开');
    };

    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (this.listeners[data.type]) {
        this.listeners[data.type].forEach(callback => callback(data.payload));
      }
    };

    this.socket.onerror = (error) => {
      console.error('WebSocket错误:', error);
    };

    this.socket.onclose = () => {
      console.log('WebSocket连接已关闭');
    };
  }

  on(type, callback) {
    if (!this.listeners[type]) {
      this.listeners[type] = [];
    }
    this.listeners[type].push(callback);
  }

  send(type, payload) {
    const message = JSON.stringify({ type, payload });
    this.socket.send(message);
  }

  close() {
    this.socket.close();
  }
}

// 使用示例
const wsClient = new WebSocketClient('ws://example.com/socket');
wsClient.on('message', (data) => {
  console.log('收到消息:', data);
});
wsClient.send('chat', { text: 'Hello, World!' });

class WebSocketClient {
  // ...其他代码...

  reconnect() {
    setTimeout(() => {
      console.log('尝试重新连接...');
      this.socket = new WebSocket(this.url);
      // 重新绑定事件处理函数
      this.socket.onopen = () => this.onOpen();
      this.socket.onmessage = (event) => this.onMessage(event);
      this.socket.onerror = (error) => this.onError(error);
      this.socket.onclose = () => this.onClose();
    }, 2000); // 延迟2秒重连
  }

  onOpen() {
    console.log('WebSocket连接已打开');
  }

  onMessage(event) {
    const data = JSON.parse(event.data);
    if (this.listeners[data.type]) {
      this.listeners[data.type].forEach(callback => callback(data.payload));
    }
  }

  onError(error) {
    console.error('WebSocket错误:', error);
  }

  onClose() {
    console.log('WebSocket连接已关闭');
    this.reconnect(); // 连接关闭后尝试重连
  }
}