vue2 前端使用websocket响应前端无法流式展现

在 Vue.js (包括 Vue2) 中，WebSocket 通常用于实现实时双向数据通信，例如聊天应用、推送通知等。如果前端尝试将接收到的 WebSocket 数据流式地显示出来，比如滚动加载无限列表，可能会遇到一些挑战。

1. 接收数据：首先，你需要在 Vue 组件中监听 WebSocket 的连接事件，并设置消息接收函数。当接收到新数据时，需要将其处理并保存到组件的数据状态（如数组）中。

new Vue({
  data: {
    messages: [],
  },
  created() {
    this.socket = new WebSocket('wss://your-websocket-url');
    this.socket.onmessage = event => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
      // 滚动加载部分，这里可以添加判断是否到达底部
      if (this.scrollBottom()) {
        // 加载更多数据
        this.loadMoreMessages();
      }
    };
  },
});

2. 流式展现：`scrollBottom()` 函数检查是否已经接近或达到列表的底部，这时再触发加载更多的逻辑。你可以使用 Vue 的 `v-if` 或 `v-show` 来动态渲染新的消息，而不是一次性渲染所有数据。

<template>
  <div ref="messagesList">
    <ul v-for="message in messages.slice(0, limit)" :key="message.id">
      <!-- 渲染每个消息 -->
    </ul>
    <button v-if="moreAvailable" @click="loadMoreMessages">加载更多</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadMoreMessages() {
      // 这里发送请求获取更多数据，然后更新 messages 数组
    },
    scrollBottom() {
      return this.$refs.messagesList.scrollHeight - this.$refs.messagesList.clientHeight <= this.$refs.messagesList.scrollTop;
    },
  },
};
</script>