使用HTML5服務器量事件（SSE）接收實時數據。

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

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

什麼是Server-Sent Events？

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

它的基本使用方式是創建一個EventSource實例，並指向服務器端的一個URL：

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

只要服務器持續發送數據，客戶端就能不斷接收。

如何設置服務器端支持SSE？

不同的後端語言有不同的實現方式，但核心要點是一樣的：保持連接打開，並按照SSE 的格式輸出內容。

以Node.js Express 為例：

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

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

關鍵點：

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

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

常見問題和注意事項

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

 Access-Control-Allow-Origin: *

或者指定具體域名。

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

 retry: 5000

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

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

前端監聽：

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

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

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

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

優勢包括：

• 簡化開發流程，前後端都容易實現
• 支持自動重連
• 可以使用標準HTTP 協議，更容易穿透防火牆

缺點也很明顯：

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

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

以上是使用HTML5服務器量事件（SSE）接收實時數據。的詳細內容。更多資訊請關注PHP中文網其他相關文章！