Server-Sent Events一种允许服务器向客户端发送实时更新的 Web API

Server-Sent Events（SSE）是一种允许服务器向客户端发送实时更新的 Web API。它基于 HTTP 协议，提供了一种单向的、服务器到客户端的通信机制，客户端可以通过监听服务器发送的事件来接收实时数据。下面从原理、使用场景、代码示例等方面进行详细介绍。

原理

1. 连接建立：客户端通过创建一个 EventSource 对象并指定服务器的 URL 来发起一个 HTTP 请求，建立与服务器的连接。这个连接是一个持久的、单向的 HTTP 连接，服务器可以随时向客户端发送数据。
2. 数据发送：服务器以特定的格式（通常是 text/event-stream）向客户端发送事件流。每个事件由事件类型、数据和可选的 ID 组成，使用简单的文本格式进行编码。
3. 事件监听：客户端通过监听 EventSource 对象的不同事件（如 message、open、error）来处理服务器发送的数据。当接收到新的事件时，会触发相应的事件处理函数。
4. 重连机制：如果连接中断，EventSource 会自动尝试重新连接到服务器，确保数据的连续性。

使用场景

• 实时新闻更新：新闻网站可以使用 SSE 实时向用户推送最新的新闻文章。
• 股票行情：金融应用可以通过 SSE 实时更新股票价格和市场数据。
• 聊天应用：在聊天应用中，服务器可以使用 SSE 向客户端实时推送新消息。
• 监控系统：监控系统可以使用 SSE 实时向管理员发送服务器状态、性能指标等信息。

  代码示例

  下面是一个使用 Server-Sent Events 的简单示例，包括服务器端和客户端（使用 JavaScript）。

  服务器端代码（go +gin）

  // StreamChat 流式输出聊天信息
  // @Summary 流式输出聊天信息
  // @Description 流式输出聊天信息，客户端可以实时接收数据。
  // @Tags Chat
  // @Accept  json
  // @Produce  text/event-stream
  // @Success 200 {string} string	"data: 1\n\n"
  // @Router /web/StreamChat [get]
  func (u ChatController) StreamChat(c *gin.Context) {
  	// 设置响应头，指定内容类型为流式输出
  	c.Writer.Header().Set("Content-Type", "text/event-stream")
  	c.Writer.Header().Set("Cache-Control", "no-cache")
  	c.Writer.Header().Set("Connection", "keep-alive")
  	c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
  	// 循环输出 1 到 100 的数字
  	for i := 1; i 
  		// 发送数据
  		c.Writer.Write([]byte("data: " + string(i+'0') + "\n\n"))
  		// 刷新缓冲区，将数据发送给客户端
  		c.Writer.(http.Flusher).Flush()
  		// 每隔 1 秒输出一个数字
  		time.Sleep(time.Second)
  	}
  }
  # Routers
  web.GET("/StreamChat", func(c *gin.Context) {
  			controllers.ChatController{}.StreamChat(c)
  		})
  

  h5客户端代码（HTML + JavaScript）/h5 pre class="brush:python;toolbar:false" html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleServer-Sent Events Example/title /head body h1Real-time Updates/h1 ul id="messages"/ul script const eventSource = new EventSource('/web/StreamChat'); eventSource.onmessage = (event) => { const messagesList = document.getElementById('messages'); const newMessage = document.createElement('li'); newMessage.textContent = event.data; messagesList.appendChild(newMessage); }; eventSource.onerror = (error) => { console.error('EventSource failed:', error); };

  代码解释

  • 服务器端：设置响应头：在 streamNumbers 函数里，设置了一系列响应头，以此确保响应为流式输出，并且防止缓存。循环输出数字：借助 for 循环，从 1 到 100 输出数字，每次输出一个数字后，刷新缓冲区把数据发送给客户端。定时输出：使用 time.Sleep 函数，使每个数字的输出间隔为 1 秒。

  • 客户端：创建一个 EventSource 对象并监听 /web/StreamChat 事件，当接收到新的事件时，将事件数据添加到页面的列表中。同时监听 error 事件，处理连接错误。

    优缺点

    优点

    • 简单易用：基于 HTTP 协议，使用简单，不需要复杂的握手和连接管理。
    • 自动重连：客户端会自动处理连接中断和重连，确保数据的连续性。
    • 文本格式：数据以文本格式传输，易于理解和处理。

      缺点

      • 单向通信：只能从服务器向客户端发送数据，不支持客户端向服务器发送数据。
      • 浏览器兼容性：虽然现代浏览器大多支持 SSE，但在一些旧版本的浏览器中可能不支持。
      • 性能开销：与 WebSocket 相比，SSE 的性能开销相对较大，因为它是基于 HTTP 协议的。

        Server-Sent Events 是一种简单、易用的实时通信机制，适用于服务器向客户端单向推送实时数据的场景。

        
        （图片来源网络，侵删）
        
        （图片来源网络，侵删）
        
        （图片来源网络，侵删）