天天看點

springboot學習(五十八) springboot中使用SseEmitter推送消息

服務端常用推送技術有:

1、用戶端輪詢:ajax定時拉取

2、服務端主動推送:WebSocket。全雙工的,本質上是一個額外的tcp連接配接,建立和關閉時握手使用http協定,其他資料傳輸不使用http協定,更加複雜一些,适用于需要進行複雜雙向資料通訊的場景。

3、服務端主動推送:SSE (Server Send Event)。html5新标準,用來從服務端實時推送資料到浏覽器端,

直接建立在目前http連接配接上,本質上是保持一個http長連接配接,輕量協定簡單的伺服器資料推送的場景,使用伺服器推送事件, SSE技術是基于單工通信模式,隻是單純的用戶端向服務端發送請求,服務端不會主動發送給用戶端。服務端采取的政策是抓住這個請求不放,等資料更新的時候才傳回給用戶端,當用戶端接收到消息後,再向服務端發送請求,周而複始。

這篇文章介紹Springboot中使用SseEmitter實作消息推送。

1、服務端:

package com.iscas.biz.test.sse;

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 *  測試SSE推送消息
 *
 * @author zhuquanwen
 * @vesion 1.0
 * @date 2021/9/11 21:01
 * @since jdk1.8
 */
@RestController
@RequestMapping(path = "sse/test")
public class SseControllerTest {
    private static Map<String, SseEmitter> sseCache = new ConcurrentHashMap<>();
    @GetMapping(path = "subscribe", produces = {MediaType.TEXT_EVENT_STREAM_VALUE})
    public SseEmitter push(String id) throws IOException {
        // 逾時時間設定為3s,用于示範用戶端自動重連
        SseEmitter sseEmitter = new SseEmitter(30000L);
        // 設定前端的重試時間為1s
        sseEmitter.send(SseEmitter.event().reconnectTime(1000).data("連接配接成功"));
        sseCache.put(id, sseEmitter);
        System.out.println("add " + id);
        sseEmitter.onTimeout(() -> {
            System.out.println(id + "逾時");
            sseCache.remove(id);
        });
        sseEmitter.onCompletion(() -> System.out.println("完成!!!"));
        return sseEmitter;
    }

    @GetMapping(path = "push")
    public String push(String id, String content) throws IOException {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.send(SseEmitter.event().name("msg").data("後端發送消息:" + content));
        }
        return "over";
    }

    @GetMapping(path = "over")
    public String over(String id) {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.complete();
            sseCache.remove(id);
        }
        return "over";
    }
}

           

其中

subscribe

是開啟并訂閱消息,

push

是模拟觸發後端推送,

over

是模拟斷開sse連接配接。

2、用戶端:

<!doctype html>
<html lang="en">
<head>
    <title>Sse測試</title>
    <meta charset="utf-8"/>
</head>
<body>
<div>sse測試</div>
<div id="result"></div>
</body>
</html>
<script>
    var source = new EventSource('http://localhost:7901/demo/sse/test/subscribe?id=qwe');
    //source.onmessage = function (event) {
     //   text = document.getElementById('result').innerText;
      //  text += '\n' + event.data;
       // document.getElementById('result').innerText = text;
    //};
    source.addEventListener("msg", function(e) {
        text = document.getElementById('result').innerText;
        text += '\n' + e.data;
        console.log(e);
        document.getElementById('result').innerText = text;
        //source.close();
    })
    source.onerror = function(e) {
        if (e.readyState == EventSource.CLOSE) {
            text = document.getElementById('result').innerText;
            text += '\n' + "連接配接關閉";
        }
    }
    <!-- 添加一個開啟回調 -->
    source.onopen = function (event) {
        text = document.getElementById('result').innerText;
        text += '\n 開啟: ';
        console.log(event);
        document.getElementById('result').innerText = text;
    };
</script>
           

3、測試

springboot學習(五十八) springboot中使用SseEmitter推送消息