以下是一个简化的例子，展示如何在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应用中实现服务器推送事件，并且是实时数据推送的一个简单入门。