vue3中使用websocket 进行全局封装，如何在不同组件中统一调用或截取消息呢

在 Vue3 中，可以使用 provide 和 inject 两个 API 进行全局封装 websocket，具体实现步骤如下：

1. 在 main.js 中创建一个 WebSocket 实例，同时将其挂载到全局 Vue 对象中：

import Vue from 'vue'
import VueSocketIOExt from 'vue-socket.io-extended'
import io from 'socket.io-client'

const socket = io('http://localhost:3000')

Vue.use(VueSocketIOExt, socket)

new Vue({
  render: h => h(App),
}).$mount('#app')

2. 创建一个 socket.js 文件，定义一个 Socket 实例，并提供一个 provide 方法将其挂载到父组件上，同时提供一个 inject 方法给子组件调用：

import io from 'socket.io-client'

const socket = io('http://localhost:3000')

export function provideSocket() {
  return {
    socket,
  }
}

export function injectSocket() {
  return {
    socket: this.$root.socket,
  }
}

3. 在需要调用 websocket 的组件中使用 inject 方法获取 Socket 实例，并监听消息：

<template>
  <div>
    <div>Messages:</div>
    <ul>
      <li v-for="message in messages" :key="message">{{ message }}</li>
    </ul>
    <div>
      <input type="text" v-model="message" />
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<script>
import { injectSocket } from './socket'

export default {
  name: 'ChatRoom',

  inject: ['socket'],

  data() {
    return {
      message: '',
      messages: [],
    }
  },

  created() {
    this.socket.on('new-message', message => {
      this.messages.push(message)
    })
  },

  methods: {
    sendMessage() {
      this.socket.emit('send-message', this.message)
      this.message = ''
    },
  },
}
</script>

通过以上步骤，我们可以在不同的组件中进行全局封装 websocket，并统一调用和截取消息。