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

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

java">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：

javascript">npm install vue@next

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

javascript"><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 数组中。