zoukankan      html  css  js  c++  java
  • WebFlux系列(四)Server-Sent Events(续)

    #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分钟视频学习

  • 相关阅读:
    Android 图片的缩略图
    Android 非Activity类引用getResources()方法问题的解决方法
    Android 广播(内部类)
    Android 消息广播Intent传递数据
    Android 防止按钮连续点击的方法(Button,ImageButton等)
    Android 广播机制(两种注册方法)与中断广播
    Android 使用意图传递数据
    Android 使用全局变量传递数据
    Android 使用剪切板传递数据
    android 使用静态变量传递数据
  • 原文地址:https://www.cnblogs.com/JavaWeiBianCheng/p/12165847.html
Copyright © 2011-2022 走看看