SpringBoot SSE サーバーがイベントをアクティブにプッシュする方法の詳細な説明

1. SSEの概要

1. SSE の概要

SSE (Server Sent Event) は、文字通りサーバー送信イベントと訳されます。つまり、サーバーが積極的にイベントを送信し、クライアントはサーバーによって送信されたイベントを取得できます。

一般的な http 対話方法は、クライアントがリクエストを開始し、サーバーが応答し、その後リクエストが完了するというものです。ただし、SSE の使用シナリオでは、クライアントがリクエストを開始し、SEE 接続を確立して維持し、サーバーがクライアントにデータを返すことができます。

SSE は、サーバーがフロントエンドにデータをアクティブにプッシュするための単純なテクノロジであり、一方向です。SSE は、サーバーによるデータのプッシュのみが必要なメッセージ プッシュや監視などのシナリオに適しています。たとえば、ファイルがダウンロードされると、バックエンドはダウンロードの進行状況バーの情報をプッシュできます。

2. 特徴

SSE (サーバー送信イベント) サーバーは以下をアクティブにプッシュします。

• 新しい html5 標準は、サーバーからブラウザにリアルタイムでデータをプッシュするために使用されます。
• 現在の http 接続上で直接確立され、本質的に長い http 接続、軽量プロトコルを維持します。

単純なサーバー データ プッシュ シナリオの場合、サーバー プッシュ イベントを使用すると非常に便利です。

3. SSEとWebSocketの違い

SSE は単一チャネルであり、サーバーのみがクライアントにメッセージを送信できますが、WebSocket はデュアル チャネルです。

SSE	ウェブスコケット
httpプロトコル	独立したWebSocketプロトコル
軽くて使いやすい	比較的複雑な
デフォルトでは、切断と再接続がサポートされています	切断と再接続を自分で行う必要がある
テキスト転送	バイナリ転送
送信されるカスタム メッセージ タイプのサポート	-

4.SSE仕様

html5 の定義では、サーバー側 SSE は通常、次の要件に従う必要があります。

1) リクエストヘッダー
長時間接続 + ストリーム配信を有効にする:

Content-Type: text/event-stream;charset=UTF-8
Cache-Control: no-cache
Connection: keep-alive

2) データ形式
サーバが送信するメッセージはメッセージで構成されており、その形式は以下のとおりです。

field:value

フィールドには 5 つの可能性があります。

• 空:: で始まります。これはコメントを意味し、接続が中断されないようにサーバーからクライアントに送信されるハートビートとして理解できます。
• データ: データ
• イベント: イベント、デフォルト値
• id: データ識別子は、各データの番号に相当する id フィールドによって表されます。
• 再試行: 再接続時間

2.SSE実戦

SpringBoot を使用して SSE サーバーを実装するだけで、データをフロントエンドにアクティブにプッシュできます。受け入れられた後、フロントエンド ページに進行状況バーが表示されます。

1. SseEmitter クラスの概要

SpringBoot 利用 SseEmitter 来支持SSE，并对SSE规范做了一些封装，使用起来非常简单。SseEmitter オブジェクトを操作し、メッセージ テキストに注目するだけです。

SseEmitter クラスのいくつかのメソッド:

• send(): データを送信します。SseEventBuilder 以外のオブジェクトが渡された場合、渡されたパラメータはデータにカプセル化されます。
• complete(): 実行が完了し、接続が切断されることを示します。
• onTimeout(): 接続がタイムアウトすると、コールバックがトリガーされます。
• onCompletion(): 完了後にコールバックがトリガーされます。
• onError(): エラーが報告されたときにトリガーされるコールバック。

2. 戦闘例

SpringBoot プロジェクトを作成し、依存関係を導入します。

        <!-- 里面包含了 spring-webmvc-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.7.12</version>
        </dependency>

2.1 SseServerの作成

ビジネス操作 SSE のメソッドを単純にカプセル化する SseServer を作成します。

import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

/**
 * SseServer业务封装类来操作SEE
 */
@Slf4j
public class SseServer {
    
    

    /**
     * 当前连接总数
     */
    private static AtomicInteger currentConnectTotal = new AtomicInteger(0);

    /**
     * messageId的 SseEmitter对象映射集
     */
    private static Map<String, SseEmitter> sseEmitterMap = new ConcurrentHashMap<>();

    /**
     * 创建sse连接
     *
     * @param messageId - 消息id（唯一）
     * @return
     */
    public static SseEmitter createConnect(String messageId) {
    
    
        /**
         * 设置连接超时时间。0表示不过期，默认是30秒，超过时间未完成会抛出异常
         */
        SseEmitter sseEmitter = new SseEmitter(0L);
        /*
        // 超时时间设置为3s，设置前端的重试时间为1s。重连时，注意总数的统计
        SseEmitter sseEmitter = new SseEmitter(3_000L);
        try {
            sseEmitter.send(
                    SseEmitter.event()
                    .reconnectTime(1000L)
                    //.data("前端重连成功") // 重连成功的提示信息
            );
        } catch (IOException e) {
            log.error("前端重连异常 ==> messageId={}, 异常信息：", messageId, e.getMessage());
            e.printStackTrace();
        }*/


        // 注册回调
        sseEmitter.onCompletion(completionCallBack(messageId));
        sseEmitter.onTimeout(timeOutCallBack(messageId));
        sseEmitter.onError(errorCallBack(messageId));
        sseEmitterMap.put(messageId, sseEmitter);

        //记录一下连接总数。数量+1
        int count = currentConnectTotal.incrementAndGet();
        log.info("创建sse连接成功 ==> 当前连接总数={}， messageId={}", count, messageId);
        return sseEmitter;
    }

    /**
     * 给指定 messageId发消息
     *
     * @param messageId - 消息id（唯一）
     * @param message   - 消息文本
     */
    public static void sendMessage(String messageId, String message) {
    
    
        if (sseEmitterMap.containsKey(messageId)) {
    
    
            try {
    
    
                sseEmitterMap.get(messageId).send(message);
            } catch (IOException e) {
    
    
                log.error("发送消息异常 ==> messageId={}, 异常信息：", messageId, e.getMessage());
                e.printStackTrace();
            }
        } else {
    
    
            throw new RuntimeException("连接不存在或者超时， messageId=" + messageId);
        }
    }

    /**
     * 给所有 messageId广播发送消息
     *
     * @param message
     */
    public static void batchAllSendMessage(String message) {
    
    
        sseEmitterMap.forEach((messageId, sseEmitter) -> {
    
    
            try {
    
    
                sseEmitter.send(message, MediaType.APPLICATION_JSON);
            } catch (IOException e) {
    
    
                log.error("广播发送消息异常 ==> messageId={}, 异常信息：", messageId, e.getMessage());
                removeMessageId(messageId);
            }
        });
    }

    /**
     * 给指定 messageId集合群发消息
     *
     * @param messageIds
     * @param message
     */
    public static void batchSendMessage(List<String> messageIds, String message) {
    
    
        if (CollectionUtils.isEmpty(messageIds)) {
    
    
            return;
        }
        // 去重
        messageIds = messageIds.stream().distinct().collect(Collectors.toList());
        messageIds.forEach(userId -> sendMessage(userId, message));
    }


    /**
     * 给指定组群发消息（即组播，我们让 messageId满足我们的组命名确定即可）
     *
     * @param groupId
     * @param message
     */
    public static void groupSendMessage(String groupId, String message) {
    
    
        if (MapUtils.isEmpty(sseEmitterMap)) {
    
    
            return;
        }
        sseEmitterMap.forEach((messageId, sseEmitter) -> {
    
    
            try {
    
    
                // 这里 groupId作为前缀
                if (messageId.startsWith(groupId)) {
    
    
                    sseEmitter.send(message, MediaType.APPLICATION_JSON);
                }
            } catch (IOException e) {
    
    
                log.error("组播发送消息异常 ==> groupId={}, 异常信息：", groupId, e.getMessage());
                removeMessageId(messageId);
            }
        });
    }

    /**
     * 移除 MessageId
     *
     * @param messageId
     */
    public static void removeMessageId(String messageId) {
    
    
        sseEmitterMap.remove(messageId);
        //数量-1
        currentConnectTotal.getAndDecrement();
        log.info("remove messageId={}", messageId);
    }

    /**
     * 获取所有的 MessageId集合
     *
     * @return
     */
    public static List<String> getMessageIds() {
    
    
        return new ArrayList<>(sseEmitterMap.keySet());
    }

    /**
     * 获取当前连接总数
     *
     * @return
     */
    public static int getConnectTotal() {
    
    
        return currentConnectTotal.intValue();
    }

    /**
     * 断开SSE连接时的回调
     *
     * @param messageId
     * @return
     */
    private static Runnable completionCallBack(String messageId) {
    
    
        return () -> {
    
    
            log.info("结束连接 ==> messageId={}", messageId);
            removeMessageId(messageId);
        };
    }

    /**
     * 连接超时时回调触发
     *
     * @param messageId
     * @return
     */
    private static Runnable timeOutCallBack(String messageId) {
    
    
        return () -> {
    
    
            log.info("连接超时 ==> messageId={}", messageId);
            removeMessageId(messageId);
        };
    }

    /**
     * 连接报错时回调触发。
     *
     * @param messageId
     * @return
     */
    private static Consumer<Throwable> errorCallBack(String messageId) {
    
    
        return throwable -> {
    
    
            log.error("连接异常 ==> messageId={}", messageId);
            removeMessageId(messageId);
        };
    }
}

2.2 ビジネスコントローラー

@RestController
@CrossOrigin
@RequestMapping("/sse")
public class SseDemoController {
    
    

    /**
     * 用户SSE连接
     * 它返回一个SseEmitter实例，这时候连接就已经创建了.
     *
     * @return
     */
    @GetMapping("/userConnect")
    public SseEmitter connect() {
    
    
        /**
         * 一般取登录用户账号作为 messageId。分组的话需要约定 messageId的格式。
         * 这里模拟创建一个用户连接
         */
        String userId = "userId-" + RandomUtils.nextInt(1, 10);
        return SseServer.createConnect(userId);
    }

    /**
     * 模拟实例：下载进度条显示。 前端访问下载接口之前，先建立用户SSE连接，然后访问下载接口，服务端推送消息。
     * http://localhost:8080/sse/downLoad/userId-1
     *
     * @throws InterruptedException
     */
    @GetMapping("/downLoad/{userId}")
    public void pushOne(@PathVariable("userId") String userId) throws InterruptedException {
    
    
        for (int i = 0; i <= 100; i++) {
    
    
            if (i > 50 && i < 70) {
    
    
                Thread.sleep(500L);
            } else {
    
    
                Thread.sleep(100L);
            }
            System.out.println("sendMessage --> 消息=" + i);
            SseServer.sendMessage(userId, String.valueOf(i));
        }
        System.out.println("下载成功");
    }


    /**
     * 广播发送。http://localhost:8080/sse/pushAllUser
     *
     * @throws InterruptedException
     */
    @GetMapping("/pushAllUser")
    public void pushAllUser() throws InterruptedException {
    
    
        for (int i = 0; i <= 100; i++) {
    
    
            if (i > 50 && i < 70) {
    
    
                Thread.sleep(500L);
            } else {
    
    
                Thread.sleep(100L);
            }
            System.out.println("batchAllSendMessage --> 消息=" + i);
            SseServer.batchAllSendMessage(String.valueOf(i));
        }
    }

}

2.3 フロントエンドHTML

HTML を記述するだけで効果を実証できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <script>
        var sseSource = new EventSource("http://localhost:8080/sse/userConnect");
        <!-- 添加一个信息回调 -->
        sseSource.onmessage = function(event){
      
      
            console.log("test=>",event)
            document.getElementById("result").innerText = event.data+'%';
            document.getElementById("my-progress").value = event.data;
        }
        // 使用vue交互事件，可以添加一些SSE的回调
        // sseSource.dispatchEvent();
        // sseSource.close();
    </script>
</head>
<body>
    <div id="result"></div>
        下载进度条：<progress style="width: 300px" id="my-progress" value="0" max="100"></progress>
    </body>
</html>

3.実証効果

参考記事：

• HTML-server-sent-events：https://html.spec.whatwg.org/multipage/server-sent-events.html

– 知識に飢えているなら、愚かでも謙虚であれ。