码迷,mamicode.com
首页 > Web开发 > 详细

WebFlux系列(四)Server-Sent Events(续)

时间:2020-01-08 12:19:00      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:main   log4j   ping   nts   pac   port   height   inf   ram   

#Java#Spring#WebFlux#WebClient#Reactor#EventSource#

页面EeventSource如何接收SSE推送的数据

讲解: https://www.bilibili.com/video/av82416469/

技术图片

WebfluxServerApplication.java
package com.example.webfluxserver;

import lombok.extern.log4j.Log4j2;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.http.codec.ServerSentEvent;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;

import java.time.Duration;

@Log4j2
@SpringBootApplication
public class WebfluxServerApplication extends BaseApplication {
    public static void main(String[] args) {
        SpringApplication.run(WebfluxServerApplication.class, args);
    }

    @RestController
    class EmployeeController {

        @CrossOrigin
        @GetMapping(value = "sse")
        public Flux<ServerSentEvent<String>> sse(){
            return  Flux.interval(Duration.ofMillis(1000)).map(val ->{
                return ServerSentEvent.<String>builder()
                        //.id(UUID.randomUUID().toString())
                        .event("ping")
                        .data(val.toString())
                        .build();
            });
        }

    }
}

sse.html

<html>
<head>
    <meta charset="UTF-8">
    <title>Server-sent events demo</title>
</head>
<body>
<button>Close the connection</button>

<ul>
</ul>

<script>
    var button = document.querySelector("button");
    var eventList = document.querySelector(ul);

    var evtSource = new EventSource(http://127.0.0.1:8080/sse);

    evtSource.onmessage = function(e) {
        console.log("data:"+e.data);
        var newElement = document.createElement("li");
        newElement.innerHTML = "default data  : " + e.data;
        eventList.appendChild(newElement);
    };
    evtSource.onopen = function(){
        console.log("connection opened")
    }
    evtSource.onerror = function(){
        console.log("connection error");
    }
    button.onclick = function() {
        console.log("connnection closed")
        evtSource.close();
    };

    evtSource.addEventListener("ping", function(e) {
          var newElement = document.createElement("li");
    newElement.innerHTML = "ping event data " +e.data;
    eventList.appendChild(newElement);
    });

</script>
</body>
</html>

公众号,坚持每天3分钟视频学习

技术图片

WebFlux系列(四)Server-Sent Events(续)

标签:main   log4j   ping   nts   pac   port   height   inf   ram   

原文地址:https://www.cnblogs.com/JavaWeiBianCheng/p/12165847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!