概述：

  • SseEmiter 是 Spring Framework 提供的一個類，用於支持服務器發送事件（Server-Sent Events，SSE）。SSE 是一種基於 HTTP 的協議，允許服務器向客户端推送實時數據，而不需要客户端不斷地輪詢服務器。SSE 特別適用於需要實時更新數據的場景，例如實時通知、實時數據流等。

 

SseEmitter 的主要特點：

  1. 單向通信：SSE 是單向的，服務器可以向客户端推送數據，但客户端不能向服務器發送數據。
  2. 基於 HTTP：SSE 使用標準的 HTTP 協議，因此不需要額外的協議支持。
  3. 自動重連：如果連接中斷，客户端會自動嘗試重新連接服務器。
  4. 事件流格式：SSE 使用簡單的文本格式來傳輸數據，每條消息以 data: 開頭，並以兩個換行符 \n\n 結束。

 

SseEmitter 的基本用法：

  1. 創建 SseEmitter 實例：在控制器中創建一個 SseEmitter 實例，並將其返回給客户端。
  2. 發送事件：通過 SseEmitter 實例的 send 方法向客户端發送事件。
  3. 處理連接關閉：通過 SseEmitter 的 onCompletion 和 onTimeout 方法處理連接關閉或超時的情況。

1. 後端代碼示例

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

import java.io.IOException;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

@RestController
public class SseController {

    private final ExecutorService nonBlockingService = Executors.newCachedThreadPool();

    @GetMapping("/sse")
    public SseEmitter handleSse() {
        SseEmitter emitter = new SseEmitter();

        nonBlockingService.execute(() -> {
            try {
                for (int i = 0; i < 10; i++) {
                    SseEmitter.SseEventBuilder event = SseEmitter.event()
                            .data("SSE event - " + i)
                            .id(String.valueOf(i))
                            .name("sse event")
                            .reconnectTime(10_000L);
                    emitter.send(event);
                    Thread.sleep(1000); // 模擬延遲
                }
                emitter.complete(); // 完成發送
            } catch (IOException | InterruptedException e) {
                emitter.completeWithError(e);
            }
        });

        return emitter;
    }
}

SseEmitter後端主動推送消息給前端_服務器

 

2. 前端請求設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSE Example</title>
</head>
<body>
    <h1>Server-Sent Events Example</h1>
    <ul id="eventList"></ul>

    <script>
        const eventSource = new EventSource('/sse');
        const eventList = document.getElementById('eventList');

        eventSource.onmessage = function(event) {
            const newElement = document.createElement("li");
            newElement.textContent = "Event: " + event.data;
            eventList.appendChild(newElement);
        };

        eventSource.onerror = function() {
            console.error("EventSource failed.");
        };
    </script>
</body>
</html>

SseEmitter後端主動推送消息給前端_服務器

 

3. nginx配置

注意：如果前端的請求是走nginx到後端，一定要配置下列信息。否則nginx會默認緩存，不會以流的形式發送信息。

location /api_proxy/ {
        add_header X-Location "sse";
        # 取消緩衝
        proxy_buffering off;
        # 關閉代理緩存
        proxy_cache off;

        # 重要！因為項目實際不止有一個nginx代理，還有可能會有統一的上層nginx網關。
        # 只在第一個nginx種關閉緩存還不夠，由於第二個nginx默認會緩存數據，所以sse流就再一次被緩存了。
        # 解決辦法是在第一個nginx的配置裏面，繼續加上這個header，表示這個路徑下的請求需要帶上這個header，這樣第二個nginx才能繼續收到這個header並且不緩存數據。
        add_header X-Accel-Buffering "no";

       proxy_set_header Host $http_host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Frame-Options sameorigin;
       proxy_set_header X-Forwarded-For $remote_addr;
       proxy_pass http://127.0.0.1:8080/;
}

SseEmitter後端主動推送消息給前端_服務器