介紹

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

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

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

SSE的適用場(chǎng)景：

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

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

SSE的主要優(yōu)點(diǎn)

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

SSE的消息格式

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

data: 這是一條普通消息

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

SSE還支持自定義事件類(lèi)型，客戶(hù)端可以監(jiān)聽(tīng)不同類(lèi)型的消息：

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

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

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

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

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

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

Show You Code

以下是一個(gè)完整的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", "*") // 允許跨域

// 獲取寫(xiě)入流
 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)前時(shí)間：%s\n\n", time.Now().Format(time.RFC3339))
if err != nil {
   log.Println("FunTester 客戶(hù)端連接斷開(kāi):", err)
   break
  }
  flusher.Flush() // 立即推送數(shù)據(jù)到客戶(hù)端
  time.Sleep(2 * time.Second)
 }
}

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

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

代碼解析

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

前端（JavaScript客戶(hù)端）

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

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

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

瀏覽器會(huì)自動(dòng)維護(hù)SSE連接，并在斷開(kāi)時(shí)嘗試重新連接。

SSE與WebSockets的對(duì)比

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

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

SSE的最佳用例

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

• 實(shí)時(shí)數(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ù)器向客戶(hù)端推送數(shù)據(jù)，SSE是最簡(jiǎn)單、最穩(wěn)定的選擇。

專(zhuān)業(yè)提示

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

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

結(jié)論

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

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

閱讀原文：原文鏈接