【SpringBoot+SseEmitter】 和【Vue3+EventSource】 实时数据推送

以下是一个简化的例子，展示如何在Spring Boot后端使用SseEmitter发送服务器发送事件（SSE），以及如何在Vue 3前端使用EventSource来接收这些事件。

Spring Boot后端代码：

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
 
@RestController
public class SseController {
 
    @GetMapping(path = "/stream-events", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter handleSse() {
        SseEmitter emitter = new SseEmitter();
 
        // 在新线程中发送事件
        new Thread(() -> {
            try {
                for (int i = 0; i < 5; i++) {
                    emitter.send("data: Event " + i + "\n\n"); // 发送数据
                    Thread.sleep(1000); // 每秒发送一次
                }
                emitter.complete(); // 完成发送
            } catch (Exception e) {
                emitter.completeWithError(e); // 发送错误
            }
        }).start();
 
        return emitter;
    }
}

Vue 3前端代码：

<template>
  <div>
    <ul>
      <li v-for="event in events" :key="event">{{ event }}</li>
    </ul>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const events = ref([]);
 
    const eventSource = new EventSource('/stream-events');
 
    eventSource.onmessage = (event) => {
      events.value.push(event.data);
    };
 
    eventSource.onerror = (error) => {
      console.error('EventSource error:', error);
    };
 
    return { events };
  },
};
</script>

在这个例子中，Spring Boot后端提供了一个REST端点/stream-events，它使用SseEmitter发送一系列事件给客户端。Vue 3前端使用EventSource来连接这个端点，并将接收到的每条消息添加到列表中显示。这个例子演示了如何在Web应用中实现服务器推送事件，并且是实时数据推送的一个简单入门。