vue2 接口返回的stream流式数据怎么渲染

在Vue 2中，你可以通过`EventSource`与服务器建立长连接，实时接收event-stream流式数据。以下是如何在组件中实现这一过程的基本步骤：

1. 安装依赖（如果尚未安装）：

   npm install axios @vue/cli-plugin-axios

2. 在组件内创建`EventSource`实例：

<template>
  <div v-if="stream">
    <ul>
      <li v-for="(event, index) in events" :key="index">{{ event.data }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      stream: null,
      events: [],
    };
  },
  mounted() {
    this.stream = new EventSource('/stream-endpoint'); // 替换为实际的接口地址
    this.stream.addEventListener('message', (event) => {
      this.handleMessage(event);
    });
  },
  methods: {
    handleMessage(event) {
      const data = JSON.parse(event.data); // 如果数据不是纯文本，需要解析
      this.events.push(data);
      this.$forceUpdate(); // 更新视图
    },
    // 可能还需要处理错误和关闭连接
    handleClose() {
      this.stream.close();
      this.stream = null;
    },
  },
  beforeDestroy() {
    this.handleClose();
  },
};
</script>

3. 服务器端设置流式数据接口：
使用Node.js和Express，设置一个返回`Content-Type: text/event-stream`的GET路由，如：

   const express = require('express');
   const app = express();

   app.get('/stream-endpoint', (req, res) => {
     res.setHeader('Content-Type', 'text/event-stream');
     res.write('data: {"status": "active", "message": "Streaming started"}\n\n');
     setInterval(() => {
       res.write(`data: {"status": "updated", "timestamp": Date.now()} \n\n`);
     }, 5000); // 模拟每5秒更新一次数据
   });

   // 启动服务器
   app.listen(3000, () => console.log('Server listening on port 3000'));

当你访问`/stream-endpoint`时，Vue组件会动态添加接收到的事件到`events`数组，从而实现实时显示。