vue3 全局监听websocket

在Vue3中，可以使用provide/inject来实现全局监听websocket。

首先，在main.js中创建websocket实例：

import { createApp } from 'vue'
import App from './App.vue'
import { io } from 'socket.io-client'

const socket = io('http://localhost:3000') // 修改为你的websocket地址

const app = createApp(App)

app.provide('socket', socket)

app.mount('#app')

在App.vue中，使用inject来获取websocket实例并监听事件：

<template>
  <div>
    <h1>Websocket实时数据</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from 'vue'

export default {
  setup() {
    const socket = inject('socket')
    const state = reactive({
      message: ''
    })

    onMounted(() => {
      socket.on('message', (data) => {
        state.message = data // 更新数据
      })
    })

    return {
      message: state.message
    }
  }
}
</script>

这样，就可以在全局范围内监听websocket事件，并实时更新数据了。需要注意的是，provide和inject是配对使用的，如果没有provide提供实例，inject将无法获取到实例。