Server-Sent Events（SSE）是HTML5提供的服務器向瀏覽器推送實時更新的輕量級方案。它通過HTTP長連接實現(xiàn)單向通信，適合股票行情、通知等場景。使用時創(chuàng)建EventSource實例并監(jiān)聽消息：const eventSource = new EventSource('/stream'); eventSource.onmessage = function(event) { console.log('收到消息:', event.data); }; 服務器端需設(shè)置Content-Type為text/event-stream，保持連接打開，并按格式輸出data: 內(nèi)容\n\n。常見注意事項包括：1. 配置CORS解決跨域問題；2. 控制retry時間實現(xiàn)自動重連；3. 使用event: 定義自定義事件類型；4. 管理連接超時防止資源泄漏。相比WebSocket，SSE更簡單易用，支持HTTP協(xié)議穿透防火墻，但僅限單向通信且兼容性略差，適用于無需頻繁交互的實時推送場景。

在 web 開發(fā)中，如果你需要從服務器向瀏覽器推送實時更新，HTML5 提供了一個輕量級的解決方案：Server-Sent Events（SSE）。相比 WebSocket，它更簡單、更容易實現(xiàn)，尤其適合只需要服務器向客戶端單向通信的場景。

什么是 Server-Sent Events？

Server-Sent Events 是 HTML5 的一部分，允許服務器通過 HTTP 長連接將數(shù)據(jù)推送到瀏覽器。與傳統(tǒng)的輪詢方式不同，SSE 在建立連接后會保持打開狀態(tài)，服務器可以隨時發(fā)送新數(shù)據(jù)，比如股票行情、實時通知或聊天消息。

它的基本使用方式是創(chuàng)建一個 EventSource 實例，并指向服務器端的一個 URL：

const eventSource = new EventSource('/stream');
eventSource.onmessage = function(event) {
    console.log('收到消息:', event.data);
};

只要服務器持續(xù)發(fā)送數(shù)據(jù)，客戶端就能不斷接收。

如何設(shè)置服務器端支持 SSE？

不同的后端語言有不同的實現(xiàn)方式，但核心要點是一樣的：保持連接打開，并按照 SSE 的格式輸出內(nèi)容。

以 Node.js Express 為例：

app.get('/stream', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');

    // 模擬發(fā)送數(shù)據(jù)
    setInterval(() => {
        res.write(`data: ${new Date()}\n\n`);
    }, 1000);
});

關(guān)鍵點：

• 設(shè)置正確的響應頭，特別是 text/event-stream
• 不要過早結(jié)束響應，保持連接打開
• 數(shù)據(jù)格式必須是 data: 內(nèi)容\n\n，兩個換行符表示一條消息結(jié)束

其他語言如 Python（Flask）、PHP 或 Java Spring Boot 也可以類似地實現(xiàn)。

常見問題和注意事項

1. 跨域問題 如果前端和后端不在同一個域名下，需要配置 CORS，確保允許 EventSource 發(fā)起的請求：

Access-Control-Allow-Origin: *

或者指定具體域名。

2. 自動重連機制 當連接中斷時，瀏覽器會自動嘗試重新連接，默認等待時間是 3 秒。你可以在服務器端控制這個間隔：

retry: 5000

3. 自定義事件類型 除了默認的 onmessage，你還可以定義其他事件名：

event: update
data: {"type": "news", "content": "新消息來了"}

前端監(jiān)聽：

eventSource.addEventListener('update', function(event) {
    console.log('收到更新:', event.data);
});

4. 連接超時與資源釋放 注意不要讓連接無限期掛起。服務器應有機制檢測客戶端是否斷開，并及時釋放資源，避免內(nèi)存泄漏。

什么時候該用 SSE 而不是 WebSocket？

WebSocket 更強大，支持雙向通信，但復雜度也更高。如果你只需要服務器往客戶端推送信息，而且不需要頻繁交互，SSE 是更好的選擇。

優(yōu)勢包括：

• 簡化開發(fā)流程，前后端都容易實現(xiàn)
• 支持自動重連
• 可以使用標準 HTTP 協(xié)議，更容易穿透防火墻

缺點也很明顯：

• 僅支持服務器到客戶端的單向通信
• 瀏覽器兼容性略差（IE 和舊版 Edge 不支持）

基本上就這些。SSE 并不復雜，但在實際部署中要注意連接管理、錯誤處理和性能優(yōu)化。如果你只是想做個簡單的實時通知系統(tǒng)，SSE 是個輕量又實用的選擇。

以上是使用HTML5服務器量事件（SSE）接收實時數(shù)據(jù)。的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！