vue websocket封装

Vue.js是一个流行的JavaScript框架，用于构建用户界面。在Vue.js中使用WebSocket，可以通过封装来简化WebSocket的使用。以下是一个简单的示例，展示了如何在Vue.js中封装WebSocket：

首先，安装一个WebSocket库，如`vue-native-websocket`：

npm install vue-native-websocket

然后，在Vue组件中创建一个WebSocket实例并封装它。假设你的组件名为`WebSocketComponent`：

<template>
  <div>
    <!-- WebSocket相关操作按钮 -->
    <button @click="connectWebSocket">连接WebSocket</button>
    <button @click="disconnectWebSocket">断开WebSocket</button>
    <button @click="sendMessage">发送消息</button>

    <!-- WebSocket连接状态 -->
    <div v-if="connected">已连接到WebSocket服务器</div>
    <div v-else>未连接到WebSocket服务器</div>

    <!-- 接收到的消息 -->
    <div v-for="message in receivedMessages" :key="message.id">
      {{ message.text }}
    </div>
  </div>
</template>

<script>
import VueNativeSock from 'vue-native-websocket';

export default {
  data() {
    return {
      connected: false,
      receivedMessages: [],
      websocketUrl: 'ws://your-websocket-url', // WebSocket服务器地址
      websocketOptions: {
        format: 'json', // 可选：数据格式，默认是字符串格式
      },
    };
  },
  methods: {
    connectWebSocket() {
      this.$connect(); // 连接到WebSocket服务器
    },
    disconnectWebSocket() {
      this.$disconnect(); // 断开WebSocket连接
    },
    sendMessage() {
      const message = {
        text: 'Hello WebSocket!',
      };
      this.$socket.send(JSON.stringify(message)); // 发送消息
    },
  },
  mounted() {
    Vue.use(VueNativeSock, this.websocketUrl, this.websocketOptions);

    // 监听WebSocket连接事件
    this.$options.sockets.onopen = () => {
      this.connected = true;
    };

    // 监听WebSocket关闭事件
    this.$options.sockets.onclose = () => {
      this.connected = false;
    };

    // 监听WebSocket收到消息事件
    this.$options.sockets.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.receivedMessages.push(message);
    };
  },
};
</script>

这个示例将WebSocket连接、断开连接和发送消息的操作封装在`WebSocketComponent`组件中。它还展示了如何使用`vue-native-websocket`插件来实现WebSocket的功能。你可以根据自己的需求来修改和扩展这个示例。

注意：在实际使用中，你需要将`ws://your-websocket-url`替换为你的WebSocket服务器的地址。另外，你可能还需要在Vue.js的配置文件（例如`main.js`）中导入和使用WebSocket库。