本文由宅小年分享，感謝原作者，下文有修訂和重新排版。

1、引言     
你有沒有想過，為什麼 ChatGPT 能夠像人類聊天一樣，一個字一個字地"蹦"出來回答你的問題？為什麼股票軟件能夠實時更新價格，而不需要你瘋狂刷新頁面？答案就藏在今天我們要聊的技術裏——SSE（Server-Sent Events）!本文將帶你快速認識SSE實時通信協議，包括它的技術原理、常見使用場景、與同類技術的對比以及簡單的示例代碼等。

技術交流：

• 移動端IM開發入門文章：《新手入門一篇就夠：從零開發移動端IM》
• 開源IM框架源碼：https://github.com/JackJiang2011/MobileIMSDK（備用地址點此）
  （本文已同步發佈於：http://www.52im.net/thread-4872-1-1.html）

2、AI大模型實時通信技術專題
技術專題系列文章目錄如下，本文是第 4 篇：

《全民AI時代，大模型客户端和服務端的實時通信到底用什麼協議？》

《大模型時代多模型AI網關的架構設計與實現》

《通俗易懂：AI大模型基於SSE的實時流式響應技術原理和實踐示例》

《ChatGPT如何實現聊天一樣的實時交互？快速讀懂SSE實時“推”技術 》（☜ 本文）

《AI大模型時代爆火的SSE技術到底是什麼？一文讀懂SSE技術的方方面面（下期發佈！）》

3、什麼是SSE？
我們用一個飯店的比喻來解釋：

1）輪詢：你點了菜之後，每隔一會兒就跑去問服務員：“我的菜好了沒？”

2）SSE：你點了菜，安心坐着。飯做好了，服務員主動來告訴你：“上菜啦！”

3）WebSocket：你和服務員之間裝了個對講機，隨時可以互相説話；

4）SSE（Server-Sent Events）：一種基於HTTP的單向通信協議，允許服務器主動向瀏覽器推送數據。它就像一根從服務器連到瀏覽器的“數據水管”，打開後服務器可以隨時通過這根管子“澆水”（推送數據）。

SSE核心技術特點：

1）單向通信：服務器 → 瀏覽器（像廣播電台）

2）基於HTTP：無需特殊協議

3）自動重連：網絡中斷會自動恢復

4）輕量級：原生瀏覽器支持，無需額外庫

5）低延遲：數據實時到達（毫秒級）。

4、SSE與其他實時通信技術的對比我們來看一張直觀的對比表：

 場景選擇指南：

1）選SSE：當只需要服務器單向推送時（如新聞推送、監控儀表盤），SSE 是最簡單省事的選擇。

2）選WebSocket：需要雙向實時通信（如在線遊戲），那就請 WebSocket 登場。

3）選輪詢/長輪詢：如果只是偶爾有數據變化，使用輪詢也許更簡單粗暴。

精妙比喻：

1）SSE 像收音機（只能接收信號）

2）WebSocket 像電話（雙向通話）

3）輪詢 像不斷翻信箱查信

4）長輪詢 像守在信箱旁等郵差

關於SSE跟其它Web端實時通信技術的詳細介紹，可以深入學習以下文章：

Web端即時通訊技術盤點：短輪詢、Comet、Websocket、SSE

使用WebSocket和SSE技術實現Web端消息推送

詳解Web端通信方式的演進：從Ajax、JSONP 到 SSE、Websocket

使用WebSocket和SSE技術實現Web端消息推送

一文讀懂前端技術演進：盤點Web前端20年的技術變遷史

網頁端IM通信技術快速入門：短輪詢、長輪詢、SSE、WebSocket

搞懂現代Web端即時通訊技術一文就夠：WebSocket、socket.io、SSE

5、SSE技術原理我們用一個圖來簡單描繪 SSE 的工作過程：

 關鍵要素解析
1）HTTP 請求頭：客户端發送 Accept: text/event-stream 告訴服務器"我要接收事件流"
2）響應格式：服務器返回 Content-Type: text/event-stream，然後持續發送數據
3）事件格式：每個事件以 data: 內容\n\n 結束，兩個換行符表示事件結束
4）自動重連：連接斷開後，瀏覽器會自動發起新的連接請求

6、SSE的常見應用場景SSE 已經在很多產品中落地，以下是幾個典型場景.ChatGPT 的回答顯示機制：

 ChatGPT 在回答你問題時，是一句一句“打字式”輸出的，沒錯！就是用了 SSE 來流式傳輸生成的內容。後台系統消息提醒，比如：
1）有新的訂單；
2）用户提交了新評論；
3）後台工單更新了狀態。
4）這些提醒都可以用 SSE 來實時推送。
實時數據面板：
1）股票價格變動
2）區塊鏈交易動態
3）設備温濕度更新
4）只需要後端每隔幾秒推送一次，前端就能不斷展示最新數據。

7、示例代碼（前端+後端）前端代碼（瀏覽器 JS）：
<script>  const eventSource = new EventSource('/sse/stream');   eventSource.onmessage = function(event) {    console.log('收到消息：', event.data);    // 可更新到頁面上  };   eventSource.onerror = function(err) {    console.error('連接出錯', err);    // 可以展示連接斷開的提示  };</script>後端代碼示例（Java，使用 Spring Boot 示例）：@RestControllerpublicclass SseController {    privatestaticfinal Map<string, sseemitter=""> emitters = new ConcurrentHashMap<>();     // 瀏覽器連接入口    @GetMapping("/sse-connect")    public SseEmitter connect(@RequestParam String userId) {        SseEmitter emitter = new SseEmitter(30  60  1000L); // 30分鐘超時        emitters.put(userId, emitter);         // 發送歡迎消息        try {            emitter.send(SseEmitter.event()                    .name("welcome")                    .data("🎉 連接成功！歡迎使用 SSE 服務"));        } catch (IOException e) {            System.err.println("發送歡迎消息失敗: " + e.getMessage());        }         emitter.onCompletion(() -> emitters.remove(userId));        emitter.onTimeout(() -> emitters.remove(userId));         return emitter;    }     // 模擬推送服務    @Scheduled(fixedRate = 2000)    public void pushData() {        emitters.forEach((userId, emitter) -> {            try {                String json = String.format(                        "{\"time\": \"%s\", \"value\": %.2f}",                        LocalTime.now(), Math.random() * 100                );                 // 構建符合SSE格式的消息                emitter.send(SseEmitter.event()                        .id(UUID.randomUUID().toString())                        .name("system-metrics")                        .data(json));            } catch (IOException e) {                emitters.remove(userId);            }        });    }}curl --location 'localhost:18500/sse-connect?userId=1' --header 'Key: Accept' --header 'Value: text/event-stream'

8、本文小結
SSE 就像一個貼心的"消息推送員"，讓服務器能夠主動把最新消息送到你面前，而不需要你頻繁地去"敲門詢問"。它簡單易用，特別適合那些需要服務器主動推送數據的場景。

雖然 SSE 沒有 WebSocket 那麼"全能"（不能雙向通信），但正是這種專一性讓它在特定場景下變得格外實用。就像專門的快遞員雖然只負責送貨，但在送貨這件事上做得特別專業一樣。

如果你正在開發一個需要實時推送但通信不需要太複雜的應用，SSE 是一個輕量又可靠的選擇，特別適合現代網頁、後台系統、數據展示等場景。

寫在最後：Web 開發永遠不止一種解決方案。選擇最合適的技術，而不是最“酷”的技術，才是工程師的智慧體現。

9、參考資料
[1] Web端即時通訊技術盤點：短輪詢、Comet、Websocket、SSE

[2] SSE技術詳解：一種全新的HTML5服務器推送事件技術

[3] 使用WebSocket和SSE技術實現Web端消息推送

[4] 詳解Web端通信方式的演進：從Ajax、JSONP 到 SSE、Websocket

[5] 使用WebSocket和SSE技術實現Web端消息推送

[6] 一文讀懂前端技術演進：盤點Web前端20年的技術變遷史

[7] WebSocket從入門到精通，半小時就夠！

[8] 網頁端IM通信技術快速入門：短輪詢、長輪詢、SSE、WebSocket

[9] 搞懂現代Web端即時通訊技術一文就夠：WebSocket、socket.io、SSE

[10] 大模型時代多模型AI網關的架構設計與實現

[11] 全民AI時代，大模型客户端和服務端的實時通信到底用什麼協議？

[12] 通俗易懂：AI大模型基於SSE的實時流式響應技術原理和實踐示例

[13] Web端實時通信技術SSE在攜程機票業務中的實踐應用

（本文已同步發佈於：http://www.52im.net/thread-4872-1-1.html）