介紹

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

什么是服務(wù)器發(fā)送事件

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

SSE的適用場景：

• 金融數(shù)據(jù)更新：如股票市場價格變化。
• 社交媒體：實時消息流。
• 日志系統(tǒng)：監(jiān)控和分析日志流。
• 實時通知：如郵件提醒、任務(wù)更新。
• 協(xié)作工具：如文檔協(xié)作編輯。

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

SSE的主要優(yōu)點

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

SSE的消息格式

SSE采用純文本格式發(fā)送數(shù)據(jù)，每條消息以換行符\n\n結(jié)束。消息格式如下：

data: 這是一條普通消息

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

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

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

event: alert
data: {"message": "系統(tǒng)異常"}

在客戶端，可以使用addEventListener監(jiān)聽特定事件：

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

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

id: 12345
data: 這是一條可以恢復(fù)的消息

Show You Code

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

服務(wù)器端（Go示例）

package main

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

// SSE處理函數(shù)
func sseHandler(w http.ResponseWriter, r *http.Request) {
// 設(shè)置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
 }

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

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

 port := 8080
 log.Printf("SSE服務(wù)器運行在 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() —— 立即推送數(shù)據(jù)到客戶端，確保數(shù)據(jù)流不會被緩沖。
3. for循環(huán) —— 持續(xù)發(fā)送數(shù)據(jù)，每2秒推送一次時間信息。
4. 跨域支持 —— Access-Control-Allow-Origin: *允許跨域訪問。
5. 錯誤處理 —— 如果客戶端斷開連接，日志記錄并停止推送數(shù)據(jù)。

前端（JavaScript客戶端）

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

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

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

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

SSE與WebSockets的對比

SSE和WebSockets都能實現(xiàn)實時數(shù)據(jù)推送，但它們的設(shè)計目標(biāo)不同。

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

SSE的最佳用例

SSE在以下場景中表現(xiàn)出色：

• 實時數(shù)據(jù)流：如日志監(jiān)控、金融數(shù)據(jù)。
• 社交媒體推送：如Twitter、Facebook。
• 消息通知系統(tǒng)：如郵件提醒、新訂單提醒。
• 物聯(lián)網(wǎng)設(shè)備監(jiān)控：如IoT傳感器數(shù)據(jù)。
• 多人協(xié)作系統(tǒng)：如Google Docs、Figma。

如果應(yīng)用主要是服務(wù)器向客戶端推送數(shù)據(jù)，SSE是最簡單、最穩(wěn)定的選擇。

專業(yè)提示

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

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

結(jié)論

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

如果你的應(yīng)用只需要服務(wù)器推送數(shù)據(jù)到客戶端，SSE是一個理想的選擇。而如果你需要雙向?qū)崟r通信，WebSockets可能更合適。正確選擇技術(shù)，才能讓應(yīng)用更加高效和穩(wěn)定。

閱讀原文：原文鏈接