精通服务器推送事件（SSE）与 Python 和 Go 实现实时数据流 [特殊字符]

在当今的互动型 Web 应用程序中，实时数据更新在提升用户体验方面起着至关重要的作用。无论是实时股票更新、即时聊天消息，还是流式评论，实时数据流都是不可或缺的。在各种可用于实时通信的技术中，服务器推送事件（SSE）作为一种广泛使用且高效的解决方案脱颖而出。SSE 允许服务器通过 HTTP 向客户端推送实时更新，提供了一种轻量且高效的方式。

为什么选择服务器推送事件（SSE）？ 🤔

服务器推送事件 是 HTML5 规范的一部分，专门设计用于将事件从服务器推送到客户端。其简单性、自动重连和事件追踪功能，使其非常适合需要持续数据流的场景。在单向数据流的情况下，SSE 尤其表现出色。

概述 📚

服务器推送事件（SSE）是一项技术，允许服务器向浏览器推送实时更新。它是 HTML5 规范的一部分，主要涉及：

通信协议：使用 HTTP。
EventSource 对象：在浏览器端的 JavaScript 中可用。

虽然 SSE 和 WebSocket 都支持从服务器到客户端的实时通信，但它们有一些区别：

SSE	WebSocket
基于 HTTP	基于 TCP
单向通信（从服务器到客户端）	双向通信（全双工）
轻量且简单	更复杂
内置重连和消息追踪功能	需要手动实现这些功能
支持文本或 Base64 编码并压缩的二进制数据	支持各种数据类型
支持自定义事件类型	不支持自定义事件类型
限制在 HTTP/1.1 或 HTTP/2 连接数上	连接数无限制

服务器实现 🌐

协议实现

基本上，浏览器发起一个 HTTP 请求，服务器返回 HTTP 状态及数据，并包含以下头信息：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

SSE 指定事件流的 MIME 类型必须为 text/event-stream，浏览器不应缓存数据，并且连接应保持持久（keep-alive）。

消息格式

事件流是 UTF-8 编码的文本，或经过 Base64 编码并使用 gzip 压缩的二进制消息。每条消息由一行或多行字段组成，格式为 field-name: field-value。每个字段以 \n 结束。以冒号（:）开头的行是注释，浏览器会忽略这些行。每次推送可以由多个消息组成，消息之间用一个空行（\n\n）分隔。

关键字段包括：

event：指定事件类型。
id：事件 ID，用于浏览器跟踪最后接收到的事件，以便重连时使用。
retry：当连接失败时，浏览器等待重新连接的时间（以毫秒为单位）。
data：消息数据。

示例：Python 服务器实现 SSE

from flask import Flask, Responseapp = Flask(__name__)@app.route('/events')
def sse_handler():def generate():paragraph = ["Hello, this is an example of a continuous text output.","It contains multiple sentences, each of which will be sent to the client as an event.","This is to simulate the functionality of Server-Sent Events (SSE).","We can use this method to push real-time updates.","End of sample text, thank you!",]for sentence in paragraph:yield f"data: {sentence}\n\n"import timetime.sleep(1)return Response(generate(), mimetype='text/event-stream')if __name__ == '__main__':app.run(host='0.0.0.0', port=8081, debug=True)

示例：Go 服务器实现 SSE

package mainimport ("fmt""log""net/http""time"
)func main() {http.HandleFunc("/events", sseHandler)fmt.Println("Starting server on :8080")if err := http.ListenAndServe(":8080", nil); err != nil {log.Fatalf("Server error: %v", err)}
}func sseHandler(w http.ResponseWriter, r *http.Request) {flusher, ok := w.(http.Flusher)if !ok {http.Error(w, "Streaming unsupported!", http.StatusInternalServerError)return}w.Header().Set("Content-Type", "text/event-stream")w.Header().Set("Cache-Control", "no-cache")w.Header().Set("Connection", "keep-alive")paragraph := []string{"Hello, this is an example of a continuous text output.","It contains multiple sentences, each of which will be sent to the client as an event.","This is to simulate the functionality of Server-Sent Events (SSE).","We can use this method to push real-time updates.","End of sample text, thank you!",}for _, sentence := range paragraph {_, err := fmt.Fprintf(w, "data: %s\n\n", sentence)if err != nil {return}flusher.Flush()time.Sleep(1 * time.Second) // Wait 1 second before sending the next piece of text}
}

浏览器 API 🖥️

在客户端，JavaScript 的 EventSource API 允许你创建一个 EventSource 对象，监听服务器发送的事件。一旦连接建立，服务器可以通过具有 text/event-stream 内容类型的 HTTP 响应向浏览器发送事件消息。浏览器可以通过监听 EventSource 对象的 onmessage、onopen 和 onerror 事件来处理这些消息。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SSE Example 🌟</title>
</head>
<body><h1>Server-Sent Events Example 🚀</h1><div id="messages"></div><script>window.onload = function() {if (typeof(EventSource) !== "undefined") {const eventSource = new EventSource('/events');eventSource.onmessage = function(event) {const newElement = document.createElement("p");newElement.textContent = "Message: " + event.data;document.getElementById("messages").appendChild(newElement);};eventSource.onerror = function(event) {console.error("Error occurred: ", event);const newElement = document.createElement("p");newElement.textContent = "An error occurred while connecting to the event source.";document.getElementById("messages").appendChild(newElement);eventSource.close(); };} else {document.getElementById("messages").textContent = "Sorry, your browser does not support server-sent events...";}};</script>
</body>
</html>