vue 异步使用wss

在 Vue 中，你可以使用 async/await 或者 Promise 来实现异步操作。以下是使用 Promise 的示例代码：

let socket = new WebSocket('wss://your-websocket-server-url.com');

// 将 WebSocket 封装成 Promise
function connect() {
  return new Promise((resolve, reject) => {
    socket.onopen = () => {
      console.log('WebSocket 连接成功！');
      resolve(socket);
    };
    socket.onerror = (error) => {
      console.error('WebSocket 连接发生错误！');
      reject(error);
    };
    socket.onclose = () => {
      console.warn('WebSocket 连接已关闭！');
    };
  });
}

// 在 Vue 组件中使用
export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  async created() {
    // 连接 WebSocket
    this.socket = await connect();

    // 监听 WebSocket 事件
    this.socket.onmessage = (event) => {
      console.log('收到消息：', event.data);
      this.messages.push(event.data);
    };
  },
  methods: {
    sendMessage(message) {
      // 发送消息
      this.socket.send(message);
    }
  }
}

在上述代码中，我们将 WebSocket 封装成了一个 Promise 对象，通过 async/await 在 Vue 组件的 created 生命周期钩子中来连接 WebSocket。并且，我们使用了 Vue 中的 data 属性来存储 WebSocket 对象和消息列表。在组件的 methods 中，我们可以调用 sendMessage 方法来发送消息。