后端主动创建房间并且发送房间id，同时在发送了一条消息，前端通过websocket的onmessage接受到了两条消息，前端需要在接受的消息保存主房间id,并且还要储存第二次发送过来的消息，前端用vue如何监听两次消息并且保存在页面使用

你可以在Vue组件的created钩子函数中创建WebSocket连接并注册onmessage事件处理程序来监听从后端发送的所有消息。当你从后端收到两条消息时，Vue组件的data属性将包含你需要保存的两个值。你可以使用Vue的数据绑定功能将这些值显示在页面上。以下是一个基本的示例：

<template>
  <div>
    <p>主房间ID: {{ mainRoomId }}</p>
    <p>第二次发送的消息: {{ secondMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mainRoomId: null,
      secondMessage: null,
      socket: null
    };
  },
  created() {
    this.socket = new WebSocket("ws://localhost:8080");
    this.socket.addEventListener("message", this.handleMessage);
  },
  beforeDestroy() {
    this.socket.removeEventListener("message", this.handleMessage);
    this.socket.close();
  },
  methods: {
    handleMessage(event) {
      const message = JSON.parse(event.data);
      if (message.type === "mainRoomId") {
        this.mainRoomId = message.value;
      } else if (message.type === "secondMessage") {
        this.secondMessage = message.value;
      }
    }
  }
};
</script>

在这个示例中，我们在Vue组件的created钩子函数中创建了一个WebSocket连接，并在组件销毁之前关闭了它。我们还定义了一个handleMessage方法来处理我们从后端接收到的所有消息。在这个方法中，我们使用JSON.parse将接收到的消息转换为JavaScript对象，并根据消息类型更新Vue组件的data属性中的相应值。在Vue组件的模板中，我们使用插值语法将data属性中的值显示在页面上。