websocket取三个连接的返回值vue

您可以通过以下步骤获取三个 WebSocket 连接的返回值：

1. 在 Vue 组件中创建三个 WebSocket 对象并分别绑定到不同的方法中，例如：

methods: {
  connectWebSocket1() {
    this.websocket1 = new WebSocket('ws://localhost:3000/ws1');
    this.websocket1.onmessage = this.handleWebSocket1Message;
  },
  connectWebSocket2() {
    this.websocket2 = new WebSocket('ws://localhost:3000/ws2');
    this.websocket2.onmessage = this.handleWebSocket2Message;
  },
  connectWebSocket3() {
    this.websocket3 = new WebSocket('ws://localhost:3000/ws3');
    this.websocket3.onmessage = this.handleWebSocket3Message;
  },
  handleWebSocket1Message(event) {
    // 处理 websocket1 的返回值
  },
  handleWebSocket2Message(event) {
    // 处理 websocket2 的返回值
  },
  handleWebSocket3Message(event) {
    // 处理 websocket3 的返回值
  },
},

2. 在组件的 created 生命周期中调用三个 WebSocket 连接的方法：

created() {
  this.connectWebSocket1();
  this.connectWebSocket2();
  this.connectWebSocket3();
},

3. 处理 WebSocket 连接的返回值。当 WebSocket 连接收到消息时，会触发对应的 onmessage 事件，并调用对应的处理函数。在处理函数中，您可以将返回值存储到组件的 data 中，例如：

data() {
  return {
    websocket1Data: '',
    websocket2Data: '',
    websocket3Data: '',
  };
},
methods: {
  handleWebSocket1Message(event) {
    this.websocket1Data = event.data;
  },
  handleWebSocket2Message(event) {
    this.websocket2Data = event.data;
  },
  handleWebSocket3Message(event) {
    this.websocket3Data = event.data;
  },
},

现在，您可以在组件中使用这些数据了。例如，可以在模板中通过插值绑定来显示 WebSocket 连接的返回值：

<template>
  <div>
    <p>WebSocket1 返回值：{{ websocket1Data }}</p>
    <p>WebSocket2 返回值：{{ websocket2Data }}</p>
    <p>WebSocket3 返回值：{{ websocket3Data }}</p>
  </div>
</template>