告别 WebSocket？SSE 或将成为你的新朋友

介绍

各位开发者们好！👋 今天，让我们深入探讨服务器发送事件 (SSE)，并探索为什么它可能会成为您下一个心仪的实时通信工具。如果您一直依赖传统的请求-响应方法，或者正在努力应对 WebSocket 的复杂性，那么 SSE 或许就是您一直在寻找的更简单的解决方案！

什么是服务器发送事件？

SSE 是一项标准，它允许服务器通过单个 HTTP 连接向客户端推送实时更新。您可以将其视为一个单向通信通道，服务器可以随时发送更新，而无需客户端反复请求。

主要优点

1. 实时更新的低延迟

想象一下，你正在开发一个聊天应用。用户不再需要不断地询问“有新消息吗？”（轮询），而是服务器可以立即向他们推送新消息。

2. 高效利用资源

不再轮询！服务器仅在有新内容需要共享时才发送数据。

3. 比 WebSockets 更简单

虽然 WebSockets 功能强大，但 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 是一款功能强大且操作简单的实时更新工具。如果您需要服务器到客户端的更新，又不想面对复杂的 WebSocket 连接，那么它就是您的理想之选。它内置的自动重连功能以及基于 HTTP 的简单协议，使其成为众多实时应用的理想之选。

你在项目中使用过 SSE 吗？你的使用体验如何？请在下方评论区留言告诉我！👇

祝你编码愉快！🍉

文章来源：https://dev.to/zakariachahboun/say-goodbye-to-websockets-why-sse-might-be-your-new-best-friend-4d7n

告别 WebSocket？SSE 或将成为你的新朋友

告别 WebSocket？SSE 或将成为你的新朋友

介绍

目录

什么是服务器发送事件？

主要优点

1. 实时更新的低延迟

2. 高效利用资源

3. 比 WebSockets 更简单

4. 内置重连功能

SSE消息格式

简单代码示例

后端（Go）

前端（JavaScript）

SSE 与 WebSockets：何时使用？🤹

SSE 的最佳用例

专业提示💡

结论