SSE 实践：用 Vue 和 Spring Boot 实现实时数据传输_windows vue3 一个 sse 实时显示 demo-CSDN博客

本文链接：https://blog.csdn.net/xyendjsj/article/details/145200590

前言

大家好，我是雪荷。最近我在灵犀 BI 项目中引入了 SSE 技术，以保证图表的实时渲染，当图表渲染完毕服务端推送消息至浏览器端触发重新渲染。

什么是 SSE？

SSE 全称为 Server-Send Events 意思是服务端推送事件。

SSE 相比于 Websocket 它基于 Http 实现无需实现其他协议、更加轻量级、支持自动重连，但只能服务端推送消息给客户端，客户端不能推送消息给服务端。适用于服务端主动推送数据，客户端只需接收数据的场景。以下为 SSE 与 Websocket 的对比：

	SSE	Websocket
通信	单向通信（服务端到客户端）	双向通信
协议	Http	Websocket
自动重连	支持	不支持，要客户端自行支持
数据格式	文本格式，如果要二进制数据得自行编码	默认二进制数据、支持文本格式
浏览器兼容性	大部分支持	主流浏览器支持较好

Vue + Spring Boot 实现一个 SSE demo

后端实现

由于 SSE 基于 http 协议实现，因此我们无需引入第三方 jar 包。首先通过 idea 创建一个 spring boot 项目，记得勾选 spring web 依赖。

创建一个跨域配置，因为前后端的端口不同，会出现请求跨域。

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
       &