vue3 全局监听封装websocket

在 Vue3 中，可以通过创建一个全局的 WebSocket 实例来监听 WebSocket 的消息。下面是一个简单的封装 WebSocket 的全局监听的代码示例：

1. 首先在 main.js 中创建一个全局的 WebSocket 实例：

import { createApp } from 'vue'

const app = createApp(App)
app.config.globalProperties.$socket = new WebSocket('ws://localhost:3000')

2. 然后在组件中使用 $socket 实例来监听 WebSocket 的消息：

export default {
  mounted() {
    this.$socket.onmessage = event => {
      console.log(event.data)
    }
  }
}

在这个例子中，我们在组件的 mounted 钩子函数中监听 WebSocket 的消息，并在控制台中打印出接收到的数据。

注意：在实际开发中，我们应该在组件销毁时取消监听 WebSocket 的消息，以免出现内存泄漏。可以通过在 beforeUnmount 钩子函数中取消监听来实现：

export default {
  beforeUnmount() {
    this.$socket.onmessage = null
  }
}