介紹

在現代Web開發中，實時數據推送已經成為許多應用的核心需求。無論是股票行情、社交媒體通知，還是在線協作編輯，用戶都希望能夠即時獲取最新的信息。在這種背景下，服務器發送事件（Server-Sent Events，SSE）作為一種輕量級的實時通信技術，提供了一種簡單而高效的解決方案。

什么是服務器發送事件

服務器發送事件（SSE）是一種基于HTTP協議的單向通信技術，允許服務器通過持久連接向客戶端持續推送數據。它使用EventSource API來接收數據，服務器通過text/event-stream格式發送消息。這種方式特別適合需要實時更新數據的應用場景，例如新聞推送、在線監控、社交媒體通知等。

SSE的適用場景：

• 金融數據更新：如股票市場價格變化。
• 社交媒體：實時消息流。
• 日志系統：監控和分析日志流。
• 實時通知：如郵件提醒、任務更新。
• 協作工具：如文檔協作編輯。

與WebSockets相比，SSE更適合單向數據流的場景。它直接基于HTTP協議，無需額外的協議支持，因此更加輕量級。

SSE的主要優點

1. 簡單易用： SSE直接基于HTTP協議，前端可以通過EventSource輕松接收數據，無需復雜的配置或額外的服務器支持。
2. 自動重連： 瀏覽器原生支持SSE連接斷開后的自動重連機制，無需手動實現心跳檢測或重連邏輯。
3. 低資源消耗： SSE運行在HTTP長連接之上，不會占用額外的TCP端口，也沒有額外的握手開銷，適合大多數Web服務器。
4. 兼容性好： SSE適用于所有支持HTTP的環境，包括CDN和代理服務器，并且可以結合緩存策略優化性能。

SSE的消息格式

SSE采用純文本格式發送數據，每條消息以換行符\n\n結束。消息格式如下：

data: 這是一條普通消息

data: {"name": "John", "message": "Hello"}

SSE還支持自定義事件類型，客戶端可以監聽不同類型的消息：

event: update
data: {"status": "success", "timestamp": "2025-02-13T12:00:00Z"}

event: alert
data: {"message": "系統異常"}

在客戶端，可以使用addEventListener監聽特定事件：

eventSource.addEventListener("update", (event) => {
console.log("更新消息：", event.data);
});

服務器還可以通過id字段提供斷點恢復功能。客戶端在重連時會自動帶上Last-Event-ID，服務器可以據此恢復消息流：

id: 12345
data: 這是一條可以恢復的消息

Show You Code

以下是一個完整的SSE服務器和前端代碼示例。

服務器端（Go示例）

package main

import (
"fmt"
"log"
"net/http"
"time"
)

// SSE處理函數
func sseHandler(w http.ResponseWriter, r *http.Request) {
// 設置SSE必要的HTTP頭
 w.Header().Set("Content-Type", "text/event-stream")
 w.Header().Set("Cache-Control", "no-cache")
 w.Header().Set("Connection", "keep-alive")
 w.Header().Set("Access-Control-Allow-Origin", "*") // 允許跨域

// 獲取寫入流
 flusher, ok := w.(http.Flusher)
if !ok {
  http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
return
 }

// 定期發送數據
for {
  _, err := fmt.Fprintf(w, "FunTester data: 當前時間：%s\n\n", time.Now().Format(time.RFC3339))
if err != nil {
   log.Println("FunTester 客戶端連接斷開:", err)
   break
  }
  flusher.Flush() // 立即推送數據到客戶端
  time.Sleep(2 * time.Second)
 }
}

func main() {
 http.HandleFunc("/events", sseHandler)

 port := 8080
 log.Printf("SSE服務器運行在 FunTester http://localhost:%d/events", port)
 log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))
}

代碼解析

1. Content-Type: text/event-stream —— 確保瀏覽器識別為SSE連接。
2. Flusher.Flush() —— 立即推送數據到客戶端，確保數據流不會被緩沖。
3. for循環 —— 持續發送數據，每2秒推送一次時間信息。
4. 跨域支持 —— Access-Control-Allow-Origin: *允許跨域訪問。
5. 錯誤處理 —— 如果客戶端斷開連接，日志記錄并停止推送數據。

前端（JavaScript客戶端）

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
console.log("收到消息：", event.data);
};

eventSource.onerror = () => {
console.log("FunTester 連接丟失，嘗試重連...");
};

瀏覽器會自動維護SSE連接，并在斷開時嘗試重新連接。

SSE與WebSockets的對比

SSE和WebSockets都能實現實時數據推送，但它們的設計目標不同。

如果應用只需要服務器向客戶端推送數據（如股票行情、新聞、社交通知），SSE是更好的選擇。如果需要雙向交互（如在線游戲、WebRTC、IM聊天），WebSockets更適合。

SSE的最佳用例

SSE在以下場景中表現出色：

• 實時數據流：如日志監控、金融數據。
• 社交媒體推送：如Twitter、Facebook。
• 消息通知系統：如郵件提醒、新訂單提醒。
• 物聯網設備監控：如IoT傳感器數據。
• 多人協作系統：如Google Docs、Figma。

如果應用主要是服務器向客戶端推送數據，SSE是最簡單、最穩定的選擇。

專業提示

1. 優化長連接：默認情況下，SSE連接會一直保持打開狀態。建議服務器設置keep-alive以防止超時斷開。
2. 負載均衡：SSE依賴HTTP長連接，不適合大規模并發，建議結合Nginx負載均衡使用，如proxy_buffering off;確保流式傳輸。
3. 數據恢復機制：使用Last-Event-ID允許客戶端在斷開后重新獲取丟失的數據。
4. 跨域支持：如果服務器與前端域名不同，需要設置CORS允許跨域訪問。

res.setHeader('Access-Control-Allow-Origin', '*');

結論

SSE是一種輕量級、易實現的實時數據推送方案，適用于單向數據流場景，如股票市場、新聞推送、社交媒體通知等。相較于WebSockets，SSE更簡單，瀏覽器原生支持自動重連，不需要額外的協議或服務器負擔。

如果你的應用只需要服務器推送數據到客戶端，SSE是一個理想的選擇。而如果你需要雙向實時通信，WebSockets可能更合適。正確選擇技術，才能讓應用更加高效和穩定。

閱讀原文：原文鏈接