springboot+vue使用流式响应的实现示例

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

@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;
    }
}

npm install axios

<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>