介紹
嘿，各位開發人員！ 👋 今天，讓我們深入研究伺服器發送事件（SSE），並探討為什麼它們可能是您下一個最喜歡的即時通訊工具。如果您一直依賴傳統的請求-回應方法或正在努力解決 WebSocket 複雜性，SSE 可能是您一直在尋找的更簡單的解決方案！
目錄
什麼是伺服器發送事件？
SSE 是一種標準，它允許伺服器透過單一 HTTP 連接向客戶端推送即時更新。可以將其視為單向通訊管道，您的伺服器可以在需要時發送更新，而無需客戶端反覆請求。
主要優點
1. 即時更新延遲低
想像一下你正在建立一個聊天應用程式。您的用戶不會不斷詢問“有新訊息嗎？” （輪詢），伺服器可以立即向他們推送新訊息。
2. 高效率利用資源
不再投票！只有當有新內容需要共享時，伺服器才會發送資料。
3. 比 WebSockets 更簡單
雖然 WebSocket 功能強大，但 SSE 使用標準 HTTP，並且實作起來更簡單。
4. 內建重連功能
失去連結？不用擔心！ SSE 會自動為您處理重新連線。
SSE 訊息格式
在我們進入程式碼之前，讓我們先了解一下 SSE 訊息格式。伺服器以以下格式傳送訊息：
event: myevent // Optional: name of the event
data: message // The actual message content
id: 123 // Optional: event ID for resuming connection
retry: 10000 // Optional: reconnection time in milliseconds
每個欄位必須以換行符 ( \n ) 結尾，且訊息必須以兩個換行符 ( \n\n ) 結尾。
簡單程式碼範例
後端（Go）
package main
import (
"fmt"
"net/http"
"time"
)
func sseHandler(w http.ResponseWriter, r *http.Request) {
// Set headers for SSE
w.Header().Set("Content-Type", "text/event-stream")
w.Header().Set("Cache-Control", "no-cache")
w.Header().Set("Connection", "keep-alive")
// Check if the ResponseWriter supports flushing
flusher, ok := w.(http.Flusher)
if !ok {
http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
return
}
// Sending events every second
for i := 0; i < 10; i++ {
// Write SSE event format
fmt.Fprintf(w, "event:welcome\ndata: Message %d\n\n", i)
// Flush the response to send the event immediately
flusher.Flush()
// Simulate a delay
time.Sleep(time.Second)
}
}
func main() {
http.HandleFunc("/events", sseHandler)
fmt.Println("Server listening on :8080")
http.ListenAndServe(":8080", nil)
}要點：
-
w.Header().Set("Content-Type", "text/event-stream")：確保客戶端將其視為 SSE 連線。 -
w.Header().Set("Cache-Control", "no-cache")：防止快取 SSE 流。 -
w.Header().Set("Connection", "keep-alive")：保持連接持續打開
前端（JavaScript）
// Basic SSE connection
const eventSource = new EventSource('http://localhost:8080/events');
// Handle regular messages
eventSource.onmessage = (event) => {
console.log('Received message:', event.data);
document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;
};
// Handle named events
eventSource.addEventListener('welcome', (event) => {
console.log(event.data);
});
// Handle connection open
eventSource.onopen = () => {
console.log('Connection opened!');
};
// Handle errors
eventSource.onerror = (error) => {
console.log('Error occurred:', error);
};
// To close connection when needed
function closeConnection() {
eventSource.close();
}SSE 與 WebSockets：何時使用哪一個？ 🤹
雖然 SSE 和 WebSockets 都用於即時通信，但下面進行快速比較：
|特寫|上交所| WebSockets |
|---------------------|---------------------------------------------|------------------------------------------------|
|通訊|單向（伺服器到客戶端）|雙向（雙向）|
|設定複雜性|更簡單 (透過 HTTP 工作) |更複雜（需要 WebSocket 協定）|
|客戶支援|受到現代瀏覽器的良好支援 |大多數現代瀏覽器都支援 |
|用例|非常適合通知、即時動態、資料更新 |非常適合聊天、多人遊戲、全雙工通訊 |
|重新連接|內建自動重新連線|必須手動處理重新連線|
SSE 的最佳用例
-
即時通知
-
即時儀表板
-
股市更新
-
社群媒體訊息
-
直播體育比分
-
系統監控
專業小秘訣💡
- 訊息類型：您可以傳送不同類型的事件：
// Regular message
data: Your message here\n\n
// Named event
event: userconnected\n
data: John joined\n\n
// Multiple data lines
data: line 1\n
data: line 2\n\n- 重新連線控制：設定自訂重試時間：
retry: 5000\n\n- 事件 ID : 追蹤訊息序列：
id: 12345\n
data: Your message here\n\n- 完整範例：所有 SSE 屬性：
event: notification\n
data: Payment is successful\n
retry: 5000\n
id: transaction-id-12345\n\n
event: notification\n
data: Shipping update: Your package has been dispatched\n
retry: 5000\n
id: shipping-id-98765\n\n結論
SSE 是一個功能強大但簡單的即時更新工具。當您需要伺服器到客戶端的更新而又不需要複雜的 WebSockets 時，它是完美的選擇。自動重新連接和簡單的基於 HTTP 的協定等內建功能使其成為許多即時應用程式的絕佳選擇。
你在專案中使用過 SSE 嗎？你的經驗是怎樣的？請在下面的評論中告訴我！ 👇
祝你編碼愉快！ 🍉
原文出處：https://dev.to/zakariachahboun/say-goodbye-to-websockets-why-sse-might-be-your-new-best-friend-4d7n
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式