vue3封装websocket

在Vue 3中封装WebSocket可以通过创建一个自定义的Vue插件来实现。下面是一个简单的示例：

// 创建一个WebSocket插件
const WebSocketPlugin = {
  install(app) {
    // 创建WebSocket实例
    const socket = new WebSocket('ws://your-websocket-url');

    // 监听WebSocket事件
    socket.onopen = () => {
      console.log('WebSocket连接已打开');
    };

    socket.onmessage = (event) => {
      console.log('收到消息:', event.data);
    };

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

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

    // 将WebSocket实例添加到Vue实例的原型中，以便在组件中使用
    app.config.globalProperties.$socket = socket;
  }
};

// 在Vue应用中使用WebSocket插件
const app = createApp(App);
app.use(WebSocketPlugin);
app.mount('#app');

在上面的示例中，我们创建了一个WebSocket插件，该插件在Vue应用中安装并创建了一个WebSocket实例。通过将WebSocket实例添加到Vue实例的原型中，我们可以在组件中通过`this.$socket`访问WebSocket实例，并监听WebSocket事件。

请注意，上述示例中的WebSocket URL应替换为您实际使用的WebSocket服务器的URL。