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

        当需要实现服务器主动向客户端推送实时数据时，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：

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

4、总结

        这样，当访问前端页面时，你将看到实时更新的消息，这些消息是通过Server-Sent Events从后端推送过来的。

        通过这个简单的示例，你可以了解如何使用Server-Sent Events在Spring Boot和Vue 3中实现实时数据推送。实际项目中，你可能需要更加复杂的逻辑和错误处理，但这个示例可以作为一个起点，帮助你构建更复杂的实时应用。