vue中使用websocket进行前后端通信封装，并在后面所有页面中使用

在Vue.js中使用WebSocket进行前后端通信并进行封装通常涉及到以下几个步骤：

1. **安装依赖**：首先需要安装`vue-websocket`库，可以使用npm或yarn进行安装：

   npm install vue-websocket --save

2. **创建封装插件**：在项目根目录创建一个名为`websocket.js`的文件，然后编写一个简单的插件，用于初始化WebSocket连接：

// websocket.js
import Vue from 'vue'
import { createSocket } from 'vue-websocket'

export default {
  install(Vue) {
    Vue.use(createSocket, {
      url: 'ws://your-websocket-url', // 替换为你实际的WebSocket服务器地址
      eventParser(options) {
        return JSON.parse(options.data)
      },
      onConnect() {
        console.log('WebSocket已连接')
      },
      onClose({ code, reason }) {
        console.error(`WebSocket已关闭: ${code}, ${reason}`)
      },
      onError(error) {
        console.error('WebSocket错误:', error)
      }
    })
  }
}

3. **在main.js中引入并使用**：在Vue实例化时，注册这个封装好的WebSocket插件：

// main.js
import Vue from 'vue'
import App from './App.vue'
import WebSocketPlugin from './websocket.js'

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

4. **在各个组件中使用**：现在你在任何一个需要使用WebSocket的地方，可以直接通过`this.$websocket`对象发送和接收消息，例如：

// 组件内发送数据
methods: {
  sendData(message) {
    this.$websocket.send(JSON.stringify(message))
  }
}

// 接收数据更新视图
created() {
  this.$websocket.onmessage(data => {
    this.handleReceivedData(JSON.parse(data))
  })
}