vue3 实现websocket 消息通知

要实现 WebSocket 消息通知，可以使用 Vue.js 的 `@vue/cli-plugin-babel` 插件来创建一个 Vue 项目，然后使用 `vue-socket.io` 库来实现 WebSocket 的连接和消息传递。

首先，安装 `@vue/cli-plugin-babel` 插件：

npm install -g @vue/cli
vue create my-project
cd my-project
vue add babel

然后，安装 `vue-socket.io` 库：

npm install vue-socket.io

在 Vue 组件中，可以使用以下代码来连接 WebSocket 并监听消息：

import VueSocketIO from 'vue-socket.io'

export default {
  data() {
    return {
      messages: []
    }
  },
  sockets: {
    connect() {
      console.log('WebSocket connected')
    },
    message(data) {
      this.messages.push(data)
    }
  },
  mounted() {
    this.$socket.emit('join', 'room1')
  },
  created() {
    this.$socket = new VueSocketIO({
      debug: true,
      connection: 'http://localhost:3000',
      vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
      }
    })
  }
}

在上面的代码中，`sockets` 对象定义了 WebSocket 的事件处理函数。`connect` 事件在连接成功时触发，`message` 事件在接收到消息时触发。`mounted` 钩子函数用于发送加入房间的请求，`created` 钩子函数用于创建 WebSocket 连接。