服务器给前端实时推送数据轻量化解决方案eventSource+Springboot-Toy模板网

这篇具有很好参考价值的文章主要介绍了服务器给前端实时推送数据轻量化解决方案eventSource+Springboot。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、前端代码

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
三、效果展示
实时数据推送效果图,JavaWeb,spring boot,eventSource,实时消息推送时间和数字一直在增加，后端在不断推送，前端订阅到数据更新到页面