快捷導(dǎo)航

Spring Boot整合SSE實(shí)時(shí)通信的問題小結(jié)

更新時(shí)間：2025年01月13日 14:19:32 作者：晴天飛雪

本文介紹了服務(wù)器發(fā)送事件（Server-Sent Events,SSE）技術(shù),其主要特點(diǎn)包括單向數(shù)據(jù)流、自動重連、自定義事件類型等,SSE適用于實(shí)時(shí)更新場景,如新聞推送、評論系統(tǒng)等,感興趣的朋友跟隨小編一起看看吧

服務(wù)器發(fā)送事件（Server-Sent Events, SSE）是一種讓網(wǎng)頁實(shí)時(shí)更新的技術(shù)。想象一下，您正在瀏覽一個(gè)網(wǎng)頁，而這個(gè)網(wǎng)頁需要在有新信息時(shí)自動更新，比如新聞網(wǎng)站的最新消息、社交媒體的通知或股票市場的價(jià)格變動。SSE使得這種實(shí)時(shí)更新成為可能，并且它是通過普通的HTTP連接實(shí)現(xiàn)的，這意味著它不需要任何特殊的協(xié)議或復(fù)雜的設(shè)置。

SSE的主要特點(diǎn)

基于HTTP：SSE使用標(biāo)準(zhǔn)的HTTP協(xié)議來通信，因此它很容易集成到現(xiàn)有的網(wǎng)絡(luò)架構(gòu)中，無需額外配置。
單向數(shù)據(jù)流：與WebSocket不同，SSE只允許服務(wù)器向客戶端推送數(shù)據(jù)，而不能反過來。這對于只需要從服務(wù)器接收更新的場景非常有用，例如直播評論或通知提醒。
自動重連：如果由于某種原因連接中斷了，瀏覽器會自動嘗試重新連接到服務(wù)器，確保用戶不會錯過任何更新。
自定義事件類型：除了基本的數(shù)據(jù)推送外，SSE還允許服務(wù)器發(fā)送特定類型的事件，這樣客戶端就可以根據(jù)不同的事件類型做出相應(yīng)的反應(yīng)。
輕量級和簡單：相比其他如WebSocket等技術(shù)，SSE的實(shí)現(xiàn)更為簡單，適合不需要雙向通信的應(yīng)用場景。對于開發(fā)者來說，這意味著更少的代碼和更容易維護(hù)的系統(tǒng)。

添加依賴

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

創(chuàng)建SSE控制器

import java.io.IOException;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import org.springframework.web.bind.annotation.CrossOrigin;
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;
@CrossOrigin
@RestController
@RequestMapping("sse")
public class SseController {
    private final ExecutorService executorService = Executors.newCachedThreadPool();
    @GetMapping("/handleSse")
    public SseEmitter handleSse() {
        SseEmitter emitter = new SseEmitter();
        executorService.execute(() -> {
            try {
                for (int i = 0; i < 10; i++) {
                    emitter.send(SseEmitter.event().name("message").data("數(shù)據(jù)庫來消息了" + i));
                    Thread.sleep(1000);
                }
                emitter.complete();
            } catch (IOException | InterruptedException e) {
                emitter.completeWithError(e);
            }
        });
        return emitter;
    }
}

客戶端實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<body>
<h1>SSE Demo</h1>
<div id="messages"></div>
<button id="connectButton">連接</button>
<button id="disconnectButton" disabled>斷開連接</button>
<script>
    let eventSource = null;
    const messages = document.getElementById('messages');
    const connectButton = document.getElementById('connectButton');
    const disconnectButton = document.getElementById('disconnectButton');
    function connect() {
        if (eventSource) return; // 如果已經(jīng)連接，則不重復(fù)創(chuàng)建
        eventSource = new EventSource('http://localhost:8081/items/handleSse');
        eventSource.onmessage = function(event) {
            const message = document.createElement('p');
            message.textContent = event.data;
            messages.appendChild(message);
        };
        eventSource.onerror = function(error) {
            console.error('EventSource failed:', error);
            disconnect(); // 在發(fā)生錯誤時(shí)也嘗試斷開連接
        };
        // 禁用連接按鈕，啟用斷開連接按鈕
        connectButton.disabled = true;
        disconnectButton.disabled = false;
    }
    function disconnect() {
        if (!eventSource) return; // 如果沒有連接，則不執(zhí)行任何操作
        eventSource.close();
        eventSource = null;
        // 啟用連接按鈕，禁用斷開連接按鈕
        connectButton.disabled = false;
        disconnectButton.disabled = true;
    }
    // 給按鈕添加事件監(jiān)聽器
    connectButton.addEventListener('click', connect);
    disconnectButton.addEventListener('click', disconnect);
</script>
</body>
</html>

SSE（服務(wù)器發(fā)送事件）的優(yōu)缺點(diǎn)及適用場景

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

簡單易用：與WebSocket相比，SSE不需要復(fù)雜的握手過程。它的API設(shè)計(jì)直觀，開發(fā)者可以更快速地上手。
廣泛的瀏覽器支持：幾乎所有現(xiàn)代瀏覽器都支持SSE，包括手機(jī)和平板上的瀏覽器，這意味著它幾乎可以在任何設(shè)備上工作。
高效能和低延遲：相較于傳統(tǒng)的輪詢方式，SSE減少了不必要的請求次數(shù)，降低了服務(wù)器負(fù)擔(dān)，并提高了數(shù)據(jù)更新的速度。
自動重連功能：當(dāng)網(wǎng)絡(luò)連接中斷時(shí)，瀏覽器會自動嘗試重新連接到服務(wù)器，這簡化了開發(fā)者的代碼。

缺點(diǎn)

單向通信限制：SSE只允許服務(wù)器向客戶端推送信息，如果需要從客戶端向服務(wù)器發(fā)送數(shù)據(jù)，則必須使用其他方法或技術(shù)。
依賴HTTP長連接：雖然SSE優(yōu)化了數(shù)據(jù)傳輸，但它的實(shí)現(xiàn)仍然基于HTTP連接，這可能在網(wǎng)絡(luò)條件不佳或者通過某些代理服務(wù)器時(shí)遇到問題。

適用場景

SSE非常適合用于那些只需要服務(wù)器向客戶端推送實(shí)時(shí)更新的應(yīng)用場景，例如：

實(shí)時(shí)新聞更新
股票價(jià)格變動通知
社交媒體動態(tài)提醒
實(shí)時(shí)評論流
系統(tǒng)狀態(tài)監(jiān)控

SSE vs. 輪詢 vs. WebSocket

SSE與輪詢的區(qū)別：傳統(tǒng)輪詢是客戶端定時(shí)詢問服務(wù)器是否有新數(shù)據(jù)，這種方式不僅增加了服務(wù)器的壓力，也帶來了較高的延遲。而SSE讓服務(wù)器在有新數(shù)據(jù)時(shí)主動推送給客戶端，減少了不必要的請求，提升了性能和用戶體驗(yàn)。
SSE與WebSocket的對比：
- 通信方向：WebSocket支持雙向通信，意味著客戶端和服務(wù)器都可以隨時(shí)發(fā)送消息；而SSE僅允許服務(wù)器向客戶端推送信息。
- 協(xié)議基礎(chǔ)：WebSocket使用了自己的協(xié)議，而SSE基于標(biāo)準(zhǔn)的HTTP/HTTPS協(xié)議，使得SSE更容易部署并且更易于調(diào)試。
- 連接管理：WebSocket建立后保持連接開放，直到被顯式關(guān)閉；而SSE會在每次事件推送后自然斷開，然后根據(jù)需要重新建立連接。
- 兼容性和安全性：由于SSE基于HTTP協(xié)議，因此它在網(wǎng)絡(luò)穿越方面表現(xiàn)得更好，并且能夠更好地利用現(xiàn)有的安全機(jī)制（如HTTPS）。
選擇建議
- 輪詢：適合于對實(shí)時(shí)性要求不高、只需要偶爾檢查更新的場景。不過，這種方式會增加服務(wù)器的負(fù)載。
- SSE：對于需要實(shí)時(shí)推送更新但不涉及雙向通信的應(yīng)用來說，SSE是一個(gè)很好的選擇，因?yàn)樗鼘?shí)現(xiàn)簡單，而且瀏覽器兼容性好。
- WebSocket：適用于需要頻繁雙向通信的應(yīng)用，比如在線聊天室或多人在線游戲。