vue3封装使用websocket代码怎么写

首先，你需要使用 `WebSocket` 对象来创建一个 WebSocket 连接。在 Vue3 中，可以将 WebSocket 对象的创建和使用封装在一个自定义的 `websocket.js` 文件中，然后在组件中引入并使用。

下面是一个简单的示例：

// websocket.js

class WebSocketService {
  constructor(url) {
    this.url = url;
    this.websocket = null;
  }

  connect() {
    this.websocket = new WebSocket(this.url);
    this.websocket.onopen = this.onOpen.bind(this);
    this.websocket.onmessage = this.onMessage.bind(this);
    this.websocket.onclose = this.onClose.bind(this);
    this.websocket.onerror = this.onError.bind(this);
  }

  onOpen() {
    console.log('WebSocket connected');
  }

  onMessage(event) {
    console.log('WebSocket message received:', event.data);
  }

  onClose() {
    console.log('WebSocket disconnected');
  }

  onError(event) {
    console.log('WebSocket error:', event);
  }

  send(data) {
    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
      this.websocket.send(data);
    } else {
      console.log('WebSocket is not connected');
    }
  }

  close() {
    if (this.websocket) {
      this.websocket.close();
    }
  }
}

export default WebSocketService;

在组件中引入 `websocket.js` 并使用：

<template>
  <div>
    <button @click="connect">Connect</button>
    <button @click="disconnect">Disconnect</button>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import WebSocketService from './websocket.js';

export default {
  data() {
    return {
      websocket: null,
    };
  },
  methods: {
    connect() {
      this.websocket = new WebSocketService('ws://localhost:8080');
      this.websocket.connect();
    },
    disconnect() {
      this.websocket.close();
    },
    sendMessage() {
      const message = 'Hello, WebSocket!';
      this.websocket.send(message);
    },
  },
};
</script>

这个示例中，我们通过按钮调用 `connect()` 方法来建立 WebSocket 连接，调用 `disconnect()` 方法来关闭 WebSocket 连接，调用 `sendMessage()` 方法来发送消息。在 `websocket.js` 文件中，我们封装了 WebSocket 的创建、连接、收发消息、关闭等操作，并通过 `export default` 导出了 `WebSocketService` 类，方便在组件中使用。