vue3 全局监听websocket

在Vue3中，可以使用Composition API来全局监听WebSocket。以下是一个示例：

import { reactive, watch } from 'vue'

const state = reactive({
  socket: null,
  messages: []
})

function connectWebSocket() {
  state.socket = new WebSocket('ws://localhost:8080')

  state.socket.addEventListener('open', () => {
    console.log('WebSocket connected')
  })

  state.socket.addEventListener('message', (event) => {
    const message = JSON.parse(event.data)
    state.messages.push(message)
  })

  state.socket.addEventListener('close', () => {
    console.log('WebSocket disconnected')
    state.socket = null
  })
}

watch(() => state.socket, (newSocket) => {
  if (!newSocket) {
    connectWebSocket()
  }
})

export default state

在上面的示例中，我们使用了`reactive`函数来创建一个响应式对象`state`，其中包含一个`socket`属性和一个`messages`属性。`socket`属性用于存储WebSocket对象，`messages`属性用于存储从WebSocket接收到的消息。

我们还定义了一个`connectWebSocket`函数，用于创建WebSocket连接，并为`socket`属性赋值。在`socket`属性发生变化时，我们使用`watch`函数来检测是否存在WebSocket连接。如果没有连接，则调用`connectWebSocket`函数创建连接。

最后，我们将`state`对象导出，以便在Vue应用的任何地方都可以使用。在组件中，我们可以使用`import`语句来导入`state`对象，并在模板中访问`state.messages`属性来显示从WebSocket接收到的消息。