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

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

什麼是Server-Sent Events？

Server-Sent Events 是HTML5 的一部分，允許服務(wù)器通過HTTP 長連接將數(shù)據(jù)推送到瀏覽器。與傳統(tǒng)的輪詢方式不同，SSE 在建立連接後會(huì)保持打開狀態(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ù)，客戶端就能不斷接收。

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

不同的後端語言有不同的實(shí)現(xiàn)方式，但核心要點(diǎ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)鍵點(diǎn)：

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

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

常見問題和注意事項(xiàng)

1. 跨域問題如果前端和後端不在同一個(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. 自定義事件類型除了默認(rèn)的onmessage ，你還可以定義其他事件名：

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

前端監(jiān)聽：

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

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

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

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

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

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

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

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

基本上就這些。 SSE 並不復(fù)雜，但在實(shí)際部署中要注意連接管理、錯(cuò)誤處理和性能優(yōu)化。如果你只是想做個(gè)簡單的實(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)文章！