vue如何使用websocket去接收数据和发送数据_vue socketio发送和接收

原生 WebSocket API

创建 WebSocket 连接

在Vue组件中，你可以使用created或mounted生命周期钩子来创建WebSocket连接。例如：

export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  created() {
    this.socket = new WebSocket('ws://localhost:8765');
 
    this.socket.onopen = () => {
      console.log('WebSocket connected');
    };
 
    this.socket.onmessage = (event) => {
      this.messages.push(event.data);
    };
  },
  methods: {
    sendMessage(message) {
      this.socket.send(message);
    }
  }
};

发送消息

你可以在Vue组件的方法中调用socket.send()方法来发送消息。例如，假设你有一个发送消息的按钮，你可以这样处理点击事件：

<button @click="sendMessage('Hello WebSocket')">Send Message</button>

使用封装的 WebSocket 库

你也可以使用一些封装好的WebSocket库，例如