一、前端代码

body代码

<div id="result"></div>

js代码

$(function(){    if(typeof(EventSource) != "undefined")    {        var source = new EventSource("/demo/getTime");        source.onmessage = function(event) {            console.log(event.data);            $("#result").html(event.data);        };        source.addEventListener('error', function (event) {            console.log("错误：" + event);        });        source.addEventListener('open', function (event) {            console.log("建立连接：" + event);        });    } else {        document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";    }})

二、后端代码

WebFlux 框架依赖jar包

<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-webflux</artifactId></dependency>

控制器代码

@GetMapping(value = "/getTime",produces="text/event-stream;charset=UTF-8")@ApiOperationSupport(order = 1)@ApiOperation(value = "详情", notes = "传入name")public Flux<String> getTime() {	return Flux.interval(Duration.ZERO,Duration.ofSeconds(1)).map(i -> "最新时间:" + DateUtil.time() + "-" + i);}

Flux.interval(Duration.ZERO,Duration.ofSeconds(1))，等待0秒开始，间隔1秒，Flux流数据里面的数字加1
三、效果展示
时间和数字一直在增加，后端在不断推送，前端订阅到数据更新到页面

相对于websocket简单很多，只需要很少的代码就实现前端数据的实时刷新，只不过eventSource是单向数据通信，websocket可实现双向通信。