springboot +vue 如何使用流式响应

在Spring Boot和Vue.js的组合中实现流式响应（Streamed Response），通常指的是从服务器端以流的形式逐步发送数据到客户端，而不是一次性发送整个响应。这种方式特别适用于实时更新的数据展示、长时间运行的任务反馈等场景。下面是一个基本的实现方法。

服务器端：Spring Boot

1. 添加依赖：确保你的pom.xml文件中包含Web相关的依赖。

   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   

2. 创建控制器：使用ResponseBodyEmitter或SseEmitter来处理流式响应。这里我们以SseEmitter为例，它专为服务器发送事件（Server-Sent Events, SSE）设计。

   @RestController
   public class StreamController {
   
       @GetMapping("/stream-sse")
       public SseEmitter streamSse() {
           SseEmitter emitter = new SseEmitter();
   
           // 模拟一个长时间运行的任务
           Executors.newSingleThreadExecutor().submit(() -> {
               try {
                   for (int i = 0; i < 10; i++) {
                       Thread.sleep(1000); // 每秒发送一次数据
                       emitter.send("Message " + i);
                   }
                   emitter.complete();
               } catch (IOException | InterruptedException e) {
                   emitter.completeWithError(e);
               }
           });
   
           return emitter;
       }
   }
   

客户端：Vue.js

1. 安装Axios：如果你打算使用Axios来处理HTTP请求，首先需要安装它。

   npm install axios
   

2. 在Vue组件中使用：

   <template>
     <div>
       <ul>
         <li v-for="message in messages" :key="message">{{ message }}</li>
       </ul>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
       return {
         messages: []
       };
     },
     mounted() {
       const eventSource = new EventSource('/stream-sse'); // 注意这里的URL应与后端匹配
   
       eventSource.onmessage = (event) => {
         this.messages.push(event.data);
       };
   
       eventSource.onerror = () => {
         console.log('EventSource failed.');
         eventSource.close();
       };
     }
   };
   </script>
   

请注意，在Vue部分，我们直接使用了浏览器原生的EventSource API来监听来自服务器的事件。如果你希望通过Axios或其他库来处理这种类型的连接，可能需要寻找支持SSE的库或者自行封装逻辑，因为大多数HTTP库默认并不直接支持SSE。

通过上述步骤，你可以构建一个基于Spring Boot和Vue.js的应用程序，该应用程序能够以流的方式从服务器向客户端推送数据，提供更流畅的用户体验。