前端 js websocket 封装

我们可以使用 JavaScript 中的 `WebSocket` 对象来创建一个 WebSocket 连接，然后封装一些常用的方法来简化操作。以下是一个简单的封装示例：

class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.websocket = null;
    this.isConnected = false;
    this.connect();
  }

  connect() {
    this.websocket = new WebSocket(this.url);

    this.websocket.onopen = () => {
      this.isConnected = true;
      console.log('WebSocket 连接成功');
    };

    this.websocket.onmessage = (event) => {
      console.log('收到消息：', event.data);
    };

    this.websocket.onclose = () => {
      this.isConnected = false;
      console.log('WebSocket 连接关闭');
    };

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

  send(message) {
    if (this.isConnected) {
      this.websocket.send(message);
      console.log('发送消息：', message);
    } else {
      console.error('WebSocket 连接未建立');
    }
  }

  close() {
    if (this.isConnected) {
      this.websocket.close();
      console.log('WebSocket 连接关闭');
    } else {
      console.error('WebSocket 连接未建立');
    }
  }
}

使用示例：

const ws = new WebSocketClient('ws://localhost:8080');

ws.send('Hello, WebSocket!');

ws.close();

在上面的示例中，我们使用 `WebSocketClient` 类来封装了一个 WebSocket 客户端，提供了 `connect`、`send` 和 `close` 方法。其中，`connect` 方法用于建立 WebSocket 连接，`send` 方法用于发送消息，`close` 方法用于关闭连接。在创建实例时，会自动调用 `connect` 方法来建立连接。