vue2 封装websocket

你可以使用 Vue.js 2.x 版本来封装 WebSocket。首先，你需要安装 `vue-native-websocket` 插件，这个插件提供了与 WebSocket 相关的功能。

1. 在项目中安装 `vue-native-websocket`：

npm install vue-native-websocket

2. 在 main.js 文件中引入插件并配置 WebSocket 连接：

import VueNativeSock from 'vue-native-websocket';

Vue.use(VueNativeSock, 'ws://localhost:8080', {
  store: store, // 如果你使用 Vuex 进行状态管理，需要提供 store 对象
  format: 'json' // 设置消息格式为 JSON，可选，默认为 'json'
});

3. 创建一个 WebSocket 组件：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    };
  },
  methods: {
    sendMessage() {
      this.$socket.send('Hello WebSocket!');
    }
  },
  mounted() {
    this.$options.sockets.onmessage = message => {
      const data = JSON.parse(message.data);
      this.messages.push(data);
    };
  },
};
</script>

在上面的例子中，我们通过点击按钮发送消息，并将接收到的消息展示在页面上。

请注意，上述代码仅提供了一个基本的示例。你可以根据你的具体需求进行扩展和定制。另外，还可以查阅 `vue-native-websocket` 的文档，了解更多高级特性和用法。