告别WebSockets？一文读懂服务器发送事件(SSE)如何成为你的新宠儿

嘿，各位开发者朋友们！👋 今天，我们就一起来深入了解服务器发送事件（SSE），并探讨一下为什么它们可能会成为您进行实时通信的下一个利器。如果您一直依赖传统的请求-响应方法，或者觉得WebSocket太复杂难懂，SSE可能正是您一直在寻找的简单解决方案！

• 引言
• 什么是服务器发送事件？
• 主要好处
• SSE 消息格式
• 简单示例代码
• SSE 与 WebSocket 的区别
• 最佳用法场景
• 实用技巧
• 结论

SSE 是一种标准，让服务器能够通过单一的 HTTP 连接向客户端推送实时更新。可以把它想象成一条单向的信息传递管道，服务器可以在任何时候向客户端发送更新信息，而客户端无需主动请求即可接收这些更新。

1. 实时低延迟更新特性

想象你在开发一个聊天应用。不用让用户一直问有没有新消息，服务器可以立刻推送新消息给他们。

2. 高效利用资源

再也不用轮询了！服务器只有有新数据要分享时才会发送哦。

3. 比 WebSocket 简单。

虽然 WebSockets 非常强大，但 SSE 则使用标准的 HTTP，实现起来要简单得多。

4. 内置自动重连

断线了？没事的！SSE 会自动帮你恢复连接。

在我们开始看代码之前，先来了解一下SSE消息的格式。服务器会用这种格式发送消息。

    event:  可选： 事件名称    // 可选： 事件名称
    data:  实际的消息体     // 实际的消息体
    id: 123          // 可选： 连接恢复时使用的事件ID
    retry: 10000     // 可选： 重连时间（以毫秒为单位）

全屏 退出全屏

每个字段后面要跟一个换行符（\n），消息后面要跟两个换行符（\n\n）。

后端开发 (Go)

package main

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

func sseHandler(w http.ResponseWriter, r *http.Request) {
    // 设置服务器发送事件（SSE）的头部信息
    w.Header().Set("Content-Type", "text/event-stream")
    w.Header().Set("Cache-Control", "no-cache")
    w.Header().Set("Connection", "keep-alive")

    // 检查ResponseWriter是否支持刷新
    flusher, ok := w.(http.Flusher)
    if !ok {
        http.Error(w, "不支持流式传输", http.StatusInternalServerError)
        return
    }

    // 每秒发送一次事件
    for i := 0; i < 10; i++ {
        // 写入SSE事件格式
        fmt.Fprintf(w, "event:welcome\ndata: 消息 %d 次\n\n", i)

        // 刷新响应以立即发送事件
        flusher.Flush()

        // 模拟延时
        time.Sleep(time.Second)
    }
}

func main() {
    http.HandleFunc("/events", sseHandler)
    fmt.Println("服务器正在监听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）

（JS）

    // 基本的 SSE 连接
    const eventSource = new EventSource('http://localhost:8080/events');

    // 接收常规消息
    eventSource.onmessage = (event) => {
        console.log('收到消息:', event.data);
        document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;
    };

    // 处理特定事件
    eventSource.addEventListener('welcome', (event) => {
        console.log(event.data);
    });

    // 连接打开
    eventSource.onopen = () => {
        console.log('连接打开');
    };

    // 处理错误
    eventSource.onerror = (error) => {
        console.log('发生错误:', error);
    };

    // 关闭连接
    function closeConnection() {
        eventSource.close();
    }

进入全屏模式，退出全屏

SSE 和 WebSockets 都用于实时通信，下面是对两者的快速比较：

1. 实时消息通知
2. 实时仪表板
3. 股市行情更新
4. 社交媒体流
5. 实时体育直播比分
6. 系统监视

1. 消息种类：你可以发送各种类型的事件：

       // 你的消息
       data: 你的消息在这里\n\n

       // 命名事件：
       event: 用户连接\n
       data: John 加入啦\n\n

       // 多行数据：
       data: 第一行内容\n
       data: 第二行内容\n\n

切换到全屏模式 退出全屏模式并返回

1. 重连设置：设置自定义重试时间：

重试: 5000毫秒\n\n

全屏 退出全屏

1. 事件ID ：消息序列跟踪：

       id: 12345\n
       消息内容: 你的消息在这里\n

进入全屏，退出全屏

1. 所有 SSE 属性示例：

       事件: 通知\n
       data: 支付成功\n
       重试: 5秒\n
       id: transaction-id-12345\n\n

       事件: 通知\n
       data: 运送更新：您的包裹已发出，正在途中\n
       重试: 5秒\n
       id: shipping-id-98765\n\n

进入全屏模式 关闭全屏模式

SSE 是一个既强大又简单的实时更新工具。当您需要服务器向客户端推送更新时，而又不想处理 WebSocket 的复杂性时，SSE 就是完美的选择。它内置了自动重连和简单的基于 HTTP 的协议等功能，使它成为许多实时应用的绝佳选择。

你有没有在项目中使用过SSE（流式计算）？你的体验怎么样？下面留言告诉我吧！👇

此处省略

编程开心！ 🍉