如何实现服务器主动向客户端推送实时数据

当需要实现服务器主动向客户端推送实时数据时，Server-Sent Events（SSE）是一种简单且有效的解决方案。本文将介绍如何使用Server-Sent Events，在后端使用Spring Boot实现，在前端使用Vue 3实现，并提供一个完整的示例。

1、Server-Sent Events介绍

Server-Sent Events（SSE）是一种基于HTTP协议的服务器推送技术，它允许服务器实时向客户端推送数据。相较于传统的轮询方式，SSE更为高效，因为它建立了单向连接，服务器可以在有新数据时直接将数据推送给客户端。

2、后端实现（使用Spring Boot）

首先，创建一个Spring Boot项目。在项目中，我们将使用Spring MVC框架来处理SSE请求。创建一个控制器类 SSEController。

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;import java.io.IOException;@RestController
@RequestMapping("/sse")
public class SSEController {@GetMapping("/events")public SseEmitter handleSse() {SseEmitter emitter = new SseEmitter();new Thread(() -> {try {for (int i = 0; i < 10; i++) {// 模拟每隔1秒发送一次消息Thread.sleep(1000);emitter.send(SseEmitter.event().name("message").data("Update " + i));}} catch (Exception e) {emitter.completeWithError(e);} finally {emitter.complete();}}).start();return emitter;}
}

在上述代码中，我们创建了一个 /sse/events 的端点，客户端可以通过该端点建立SSE连接，后端会模拟每秒发送一次消息。

3、前端实现（使用Vue 3）

现在，让我们使用Vue 3来创建一个简单的页面来接收Server-Sent Events。首先，确保你的项目中安装了Vue 3：

npm install vue@next

然后，创建一个Vue组件，例如 SSEComponent.vue：

<template><div><h1>Server-Sent Events Example</h1><div v-for="message in messages" :key="message">{{ message }}</div></div>
</template><script setup>import { ref, onMounted } from 'vue';const messages = ref([]);const setupSSE = () => {const eventSource = new EventSource("/sse/events");eventSource.addEventListener("message", (event) => {messages.value.push(event.data);});eventSource.addEventListener("error", (event) => {console.error("SSE Error:", event);eventSource.close();});};onMounted(() => {setupSSE();});},
};
</script>

在上述代码中，我们创建了一个Vue组件，通过 EventSource 建立SSE连接，监听 message 事件，将收到的消息添加到 messages 数组中。