快捷導(dǎo)航

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

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

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

前言

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

SSE簡介

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

優(yōu)點

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

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

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

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

缺點

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

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

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

SSE是單向的。

Springboot集成SSE簡約版

客戶端發(fā)送請求到服務(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簡約版</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();
                //注意返回數(shù)據(jù)必須以data:開頭，"\n\n"結(jié)尾
                pw.write("data:xdm帥氣值加" + i + "\n\n");
                pw.flush();
                //檢測異常時斷開連接
                if (pw.checkError()) {
                    log.error("客戶端斷開連接");
                    return;
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            i++;
        }
    }

效果：

Springboot集成SSE升級版

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

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

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

客戶端代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Springboot集成SSE升級版</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);
        }
        //錯誤監(jiān)聽
        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è)置超時時間，0表示不過期。默認30000毫秒
    //可以在客戶端一直斷網(wǎng)、直接關(guān)閉頁面但未提醒后端的情況下，服務(wù)端在一定時間等待后自動關(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ù)說明：