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

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

什么是 Server-Sent Events？

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

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

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

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

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

不同的后端語(yǔ)言有不同的實(shí)現(xiàn)方式，但核心要點(diǎn)是一樣的：保持連接打開(kāi)，并按照 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)鍵點(diǎn)：

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

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

常見(jiàn)問(wèn)題和注意事項(xiàng)

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

Access-Control-Allow-Origin: *

或者指定具體域名。

2. 自動(dòng)重連機(jī)制 當(dāng)連接中斷時(shí)，瀏覽器會(huì)自動(dòng)嘗試重新連接，默認(rèn)等待時(shí)間是 3 秒。你可以在服務(wù)器端控制這個(gè)間隔：

retry: 5000

3. 自定義事件類(lèi)型 除了默認(rèn)的 onmessage，你還可以定義其他事件名：

event: update
data: {"type": "news", "content": "新消息來(lái)了"}

前端監(jiān)聽(tīng)：

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

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

什么時(shí)候該用 SSE 而不是 WebSocket？

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

優(yōu)勢(shì)包括：

• 簡(jiǎn)化開(kāi)發(fā)流程，前后端都容易實(shí)現(xiàn)
• 支持自動(dòng)重連
• 可以使用標(biāo)準(zhǔn) HTTP 協(xié)議，更容易穿透防火墻

缺點(diǎn)也很明顯：

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

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

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