快捷導(dǎo)航

Springboot集成SSE實(shí)現(xiàn)單工通信消息推送流程詳解

更新時(shí)間：2022年11月16日 16:30:12 作者：三省同學(xué)

SSE簡(jiǎn)單的來(lái)說(shuō)就是服務(wù)器主動(dòng)向前端推送數(shù)據(jù)的一種技術(shù)，它是單向的，也就是說(shuō)前端是不能向服務(wù)器發(fā)送數(shù)據(jù)的。SSE適用于消息推送，監(jiān)控等只需要服務(wù)器推送數(shù)據(jù)的場(chǎng)景中，下面是使用Spring Boot來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模擬向前端推動(dòng)進(jìn)度數(shù)據(jù)，前端頁(yè)面接受后展示進(jìn)度條

前言

通常在一些web項(xiàng)目中，會(huì)涉及到想客戶端推送消息，常見(jiàn)的有Ajax輪詢、webSocket，本篇文章主要使用Springboot集成SSE實(shí)現(xiàn)向客戶端持續(xù)推送信息。

SSE簡(jiǎn)介

服務(wù)發(fā)送事件SSE（Sever-Sent Event），就是基于 HTTP 的技術(shù),瀏覽器向服務(wù)器發(fā)送一個(gè)保持長(zhǎng)連接HTTP請(qǐng)求，服務(wù)器單向地向客戶端以流形式持續(xù)傳輸數(shù)據(jù) 。這樣可以節(jié)約網(wǎng)絡(luò)資源，不需要建立新連接。

優(yōu)點(diǎn)

服務(wù)端不需要其他的類庫(kù)，開(kāi)發(fā)難度較低。

不用每次建立新連接，延遲較低。數(shù)據(jù)通過(guò)簡(jiǎn)單且廣泛使用的HTTP協(xié)議而不是專有協(xié)議進(jìn)行同步。

對(duì)重新建立連接和事件ID功能的內(nèi)置支持。

對(duì)于利用單向通信的應(yīng)用程序和服務(wù)非常有用。

缺點(diǎn)

客戶端越多連接越多，會(huì)占用服務(wù)器大量?jī)?nèi)存和連接數(shù)。

SSE只支持UTF-8編碼，不支持二進(jìn)制數(shù)據(jù)。

對(duì)最大打開(kāi)連接數(shù)的嚴(yán)格限制可能使事情變得困難，每個(gè)瀏覽器都設(shè)置了限制。

SSE是單向的。

Springboot集成SSE簡(jiǎn)約版

客戶端發(fā)送請(qǐng)求到服務(wù)端，服務(wù)端以流的形式不斷向客戶端推送數(shù)據(jù)示例，增加帥氣值。

xml依賴：

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

html代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Springboot集成SSE簡(jiǎn)約版</title>
    <script type="text/javascript">
        let source = new EventSource('/get');
        source.onmessage = function (event) {
            console.info(event.data);
            document.getElementById('text').innerText = event.data
        };
    </script>
</head>
<body>
<div id="text"></div>
</body>
</html>

后端代碼：

   @RequestMapping(value = "/get", produces = "text/event-stream;charset=UTF-8")
    public void push(HttpServletResponse response) {
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("utf-8");
        int i = 0;
        while (true) {
            try {
                Thread.sleep(1000);
                PrintWriter pw = response.getWriter();
                //注意返回?cái)?shù)據(jù)必須以data:開(kāi)頭，"\n\n"結(jié)尾
                pw.write("data:xdm帥氣值加" + i + "\n\n");
                pw.flush();
                //檢測(cè)異常時(shí)斷開(kāi)連接
                if (pw.checkError()) {
                    log.error("客戶端斷開(kāi)連接");
                    return;
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            i++;
        }
    }

效果：

Springboot集成SSE升級(jí)版

演示SSE的連接建立、接收數(shù)據(jù)和異常情況監(jiān)聽(tīng)處理。

注：若瀏覽器不兼容在頁(yè)面引入evensource.js。

<script src=/eventsource-polyfill.js></script>

客戶端代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Springboot集成SSE升級(jí)版</title>
</head>
<script>
    let source = null;
    const clientId = new Date().getTime();
    if (!!window.EventSource) {
        source = new EventSource('/sse/create?clientId=' + clientId);
    	//建立連接
        source.onopen = function (event) {
            setMessageInnerHTML("建立連接" + event);
        }
        //接收數(shù)據(jù)
        source.onmessage = function (event) {
            setMessageInnerHTML(event.data);
        }
        //錯(cuò)誤監(jiān)聽(tīng)
        source.onerror = function (event) {
            if (event.readyState === EventSource.CLOSED) {
                setMessageInnerHTML("連接關(guān)閉");
            } else {
                console.log(event);
            }
        }
    } else {
        setMessageInnerHTML("瀏覽器不支持SSE");
    }
    window.onbeforeunload = function () {
        close();
    };
    // 關(guān)閉
    function close() {
        source.close();
        const httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', '/sse/close/?clientId=' + clientId, true);
        httpRequest.send();
        console.log("close");
    }
    // 顯示消息
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('text').innerHTML += innerHTML + '<br/>';
    }
</script>
<body>
<button onclick="close()">關(guān)閉連接</button>
<div id="text"></div>
</body>
</html>

服務(wù)端代碼：

private static Map<String, SseEmitter> cache = new ConcurrentHashMap<>();
String clientId;
int sseId;
@GetMapping("/create")
public SseEmitter create(@RequestParam(name = "clientId", required = false) String clientId) {
    // 設(shè)置超時(shí)時(shí)間，0表示不過(guò)期。默認(rèn)30000毫秒
    //可以在客戶端一直斷網(wǎng)、直接關(guān)閉頁(yè)面但未提醒后端的情況下，服務(wù)端在一定時(shí)間等待后自動(dòng)關(guān)閉網(wǎng)絡(luò)連接
    SseEmitter sseEmitter = new SseEmitter(0L);
    // 是否需要給客戶端推送ID
    if (Strings.isBlank(clientId)) {
        clientId = UUID.randomUUID().toString();
    }
    this.clientId = clientId;
    cache.put(clientId, sseEmitter);
    log.info("sse連接，當(dāng)前客戶端：{}", clientId);
    return sseEmitter;
}
@Scheduled(cron = "0/3 * *  * * ? ")
public void pushMessage() {
    try {
        sseId++;
        SseEmitter sseEmitter = cache.get(clientId);
        sseEmitter.send(
                SseEmitter
                        .event()
                        .data("帥氣值暴增" + sseId)
                        .id("" + sseId)
                        .reconnectTime(3000)
        );
    } catch (Exception e) {
        log.error(e.getMessage());
        sseId--;
    }
}
@GetMapping("/close")
public void close(String clientId) {
    SseEmitter sseEmitter = cache.get(clientId);
    if (sseEmitter != null) {
        sseEmitter.complete();
        cache.remove(clientId);
    }
}

方法參數(shù)說(shuō)明：