Server-Sent Events（SSE）是一種基於HTTP的單向通信協(xié)議，允許服務(wù)器向客戶端實時推送數(shù)據(jù)。 1. 它是HTML5標(biāo)準(zhǔn)的一部分，通過EventSource接口實現(xiàn)，適用於股票行情、新聞推送等無需客戶端主動發(fā)送數(shù)據(jù)的場景。 2. 相比WebSocket，SSE更簡單易用，兼容性好，自動支持重連，並能更好地穿透防火牆。 3. 前端通過JavaScript創(chuàng)建EventSource連接，後端需設(shè)置特定響應(yīng)頭並以text/event-stream格式持續(xù)返回數(shù)據(jù)流。 4. 使用時需注意瀏覽器兼容性、跨域問題以及性能優(yōu)化，適合服務(wù)端推送頻率高但客戶端無需頻繁發(fā)送請求的應(yīng)用場景。

SSE 是一種輕量級的通信協(xié)議，適用於服務(wù)器向客戶端單向推送實時數(shù)據(jù)的場景。相比WebSocket，它更簡單、更容易實現(xiàn)，尤其適合不需要雙向通信的應(yīng)用。

什麼是Server-Sent Events (SSE)？

SSE 是HTML5 標(biāo)準(zhǔn)的一部分，允許服務(wù)器通過HTTP 協(xié)議持續(xù)向瀏覽器推送數(shù)據(jù)。與WebSocket 不同的是，它是單向的：服務(wù)器可以隨時發(fā)送消息給客戶端，但客戶端不能主動發(fā)消息給服務(wù)器（除非重新發(fā)起請求）。

SSE 的核心是EventSource接口，前端用JavaScript 創(chuàng)建一個連接，後端則以特定格式返回數(shù)據(jù)流。這種方式比輪詢高效得多，也比WebSocket 更容易部署和調(diào)試。

SSE 和WebSocket 的適用場景對比

雖然WebSocket 支持全雙工通信，但很多實際應(yīng)用並不需要客戶端主動發(fā)送數(shù)據(jù)。比如：

• 股票行情更新
• 實時新聞推送
• 社交媒體通知
• 日誌監(jiān)控系統(tǒng)

在這些場景中，使用SSE 往往更合適。因為它基於HTTP，更容易穿透防火牆和代理；而且自動重連機制內(nèi)建，開發(fā)起來更省心。

如果你的應(yīng)用確實需要客戶端頻繁地發(fā)送指令或數(shù)據(jù)，WebSocket 可能還是更好的選擇。

如何在前後端之間建立SSE 連接？

前端部分：

使用EventSource對象來監(jiān)聽服務(wù)器事件，基本寫法如下：

 const eventSource = new EventSource('https://your-api.com/stream');

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

eventSource.onerror = function(err) {
  console.error('發(fā)生錯誤:', err);
};

你也可以監(jiān)聽特定事件類型，比如eventSource.addEventListener('update', ...) 。

後端部分：

關(guān)鍵在於設(shè)置正確的響應(yīng)頭，並保持連接打開，不斷輸出數(shù)據(jù)。例如在Node.js Express 中：

 res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');

setInterval(() => {
  res.write(`data: ${new Date()}\n\n`);
}, 1000);

注意每條消息要以data:開頭，結(jié)尾兩個換行\n\n表示一條完整的消息。

使用SSE 時需要注意的地方

• 兼容性：主流現(xiàn)代瀏覽器都支持SSE，但在IE 上不支持，移動端支持較好。
• 跨域問題：和普通請求一樣，需要處理CORS，確保服務(wù)器設(shè)置了正確的Access-Control-Allow-Origin 。
• 自動重連機制：SSE 默認(rèn)會在斷開後自動嘗試重連，也可以通過eventSource.readyState手動控制。
• 性能優(yōu)化：
  • 避免頻繁發(fā)送大量數(shù)據(jù)，以免影響頁面性能
  • 合理使用消息格式，如帶上事件名、ID 等字段便於前端識別
  • 如果服務(wù)端壓力大，可以考慮使用Redis 或消息隊列做數(shù)據(jù)廣播

基本上就這些。 SSE 雖然功能不如WebSocket 強大，但在合適的場景下，它更簡單、穩(wěn)定，也更容易維護(hù)。

以上是使用服務(wù)器量事件（SSE）作為HTML5 Websockets的替代方案。的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！