Vue 项目中使用 WebSocket 示例

1. 首先安装 WebSocket 包

npm install --save ws

2. 在 Vue 组件中使用 WebSocket

<template>
  <div>
    <!-- Your component HTML here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
    };
  },
  created() {
    // 连接 WebSocket
    this.socket = new WebSocket('ws://your-websocket-url');

    // 添加事件监听器
    this.socket.addEventListener('open', () => {
      console.log('WebSocket 连接已打开');
      // 在连接打开后，可以发送数据或执行其他操作
    });

    this.socket.addEventListener('message', (event) => {
      console.log('接收到的数据：', event.data);
      // 处理接收到的数据
    });

    this.socket.addEventListener('close', () => {
      console.log('WebSocket 连接已关闭');
      // 可以处理连接关闭后的操作
    });
  },
  methods: {
    sendData(data) {
      // 发送数据
      this.socket.send(data);
    },
  },
};
</script>