vue 全局websocket步骤

下面是使用 Vue 全局 Websocket 的步骤：

1. 引入 `vue-native-websocket` 库，可以使用 npm 安装：

   npm install vue-native-websocket

2. 在 `main.js` 中导入 `vue-native-websocket` 库并使用：

   import VueNativeSock from 'vue-native-websocket'
   
   Vue.use(VueNativeSock, 'ws://localhost:8080', {
     format: 'json',
     reconnection: true, // 断线重连
     reconnectionAttempts: 5, // 断线重连次数
     reconnectionDelay: 3000, // 断线重连时间间隔
   })

这里的参数分别是 websocket 地址、消息格式以及重连相关的配置。

3. 在需要使用 websocket 的组件中，可以使用 `this.$socket` 访问 websocket 对象，例如：

   export default {
     methods: {
       sendMessage(msg) {
         this.$socket.send(JSON.stringify(msg))
       }
     },
   
     mounted() {
       this.$socket.addEventListener('message', event => {
         const data = JSON.parse(event.data)
         // 处理接收到的消息
       })
     }
   }

这里的 `sendMessage` 方法用于向服务器发送消息，`mounted` 钩子函数中监听了消息，并进行了处理。

这样就可以在 Vue 应用中全局使用 websocket 了。