Vue3+Ellement Pus+Vite项目中怎么把WebSocket对象的onmessage事件接收的信息通过通知显示

在Vue3+Element Plus+Vite项目中，你可以使用事件总线（Event Bus）来实现WebSocket对象的onmessage事件接收到的信息通过通知显示的功能。具体来说，可以按照以下步骤进行操作：

1. 在`main.js`文件中创建事件总线对象，并将其通过`provide`方法提供给Vue实例：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 创建事件总线
const eventBus = {}
app.provide('eventBus', eventBus)

app.mount('#app')

2. 在组件中监听WebSocket的`onmessage`事件，并将接收到的信息通过事件总线发送出去：

import { onMounted, inject } from 'vue'

export default {
  name: 'WebSocketComponent',
  setup() {
    const eventBus = inject('eventBus')

    onMounted(() => {
      const ws = new WebSocket('ws://localhost:8090/websocket/1')
      ws.onmessage = (event) => {
        const message = JSON.parse(event.data)
        // 将接收到的信息通过事件总线发送出去
        eventBus.$emit('ws-message', message)
      }
    })
  }
}

3. 在需要显示通知的组件中监听事件总线上的`ws-message`事件，并使用Element Plus的`ElNotification`组件显示通知：

import { onMounted, inject } from 'vue'
import { ElNotification } from 'element-plus'

export default {
  name: 'NotificationComponent',
  setup() {
    const eventBus = inject('eventBus')

    onMounted(() => {
      // 监听事件总线上的ws-message事件
      eventBus.$on('ws-message', (message) => {
        // 使用ElNotification组件显示通知
        ElNotification({
          title: 'WebSocket消息',
          message: message,
          type: 'success'
        })
      })
    })
  }
}

在上面的代码中，我们在WebSocket组件中监听`onmessage`事件，并使用事件总线将接收到的信息发送出去。然后，在需要显示通知的组件中监听事件总线上的`ws-message`事件，并使用Element Plus的`ElNotification`组件显示通知。这样，当WebSocket接收到新消息时，通知组件就会显示相应的通知。