[Go实战]：SSE消息推送

前言

在现代Web开发中，前后端分离已成为主流趋势。为了实现实时数据推送，Server-Sent Events (SSE) 是一种高效且易于实现的技术。本文将介绍如何在Go语言中实现SSE服务端，并在前端使用JavaScript进行集成，实现一个完整的实时数据推送系统

1. SSE简介

Server-Sent Events (SSE) 是HTML5的一项技术，用于服务器向浏览器自动发送更新信息。SSE的主要特点包括：

单向通信：数据流是从服务器到客户端的单向流动。
自动重连：如果连接断开，客户端会自动尝试重新建立连接。
简单易用：相比WebSocket，SSE的API更简单，更容易上手。
文本格式：SSE的数据是以文本形式发送的，通常为JSON或纯文本。

2. 后端实现

2.1 设置静态文件目录

首先，我们需要设置静态文件目录，以便前端页面和其他静态资源可以被正确加载。

package mainimport ("encoding/json""fmt""net/http""time"
)func main() {// 设置静态文件目录fs := http.FileServer(http.Dir("./static"))http.Handle("/", fs)// 设置 SSE 处理器http.HandleFunc("/events", handleEvents)// 启动服务器http.ListenAndServe(":8080", nil)
}

2.2 设置SSE处理器

接下来，我们创建一个SSE处理器来处理客户端的SSE请求，并设置正确的响应头。

func handleEvents(w http.ResponseWriter, r *http.Request) {// 设置 CORS 头部//w.Header().Set("Access-Control-Allow-Origin", "*")//w.Header().Set("Access-Control-Allow-Methods", "GET")//w.Header().Set("Access-Control-Allow-Headers", "Content-Type")// 设置响应头w.Header().Set("Content-Type", "text/event-stream")w.Header().Set("Cache-Control", "no-cache")w.Header().Set("Connection", "keep-alive")// 模拟数据流for {// 生成推送消息data, _ := json.Marshal(map[string]string{"timestamp": time.Now().Format(time.RFC3339)})_, err := fmt.Fprintf(w, "data: %s\n\n", data)if err != nil {// 客户端断开连接，输出日志fmt.Println("Client disconnected:", err)return}// 刷新缓冲区if flusher, ok := w.(http.Flusher); ok {flusher.Flush()}// 检查是否应该关闭连接select {case <-r.Context().Done():returndefault:time.Sleep(2 * time.Second) // 每2秒发送一次消息}}
}

2.3 启动HTTP服务器

在上面的代码中，我们定义了两个路由：

/：处理静态文件请求。
/events：处理SSE请求。

3. 前端实现

3.1 创建前端页面

创建一个名为 index.html 的文件，用于展示接收到的消息。将该文件放在 main.go 同级地 static 目录下。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SSE 案例</title><style>body, html {margin: 0;padding: 0;height: 100%;font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;}.container {text-align: center;background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);max-width: 600px;width: 100%;box-sizing: border-box;}h1 {color: #333;margin-bottom: 20px;}#messages {height: 300px; /* 固定高度 */overflow-y: auto;border: 1px solid #ddd;border-radius: 4px;padding: 10px;background-color: #f9f9f9;color: #555;margin-top: 20px;box-sizing: border-box;}p {margin: 5px 0;font-size: 16px;}#clock {font-size: 18px;color: #777;margin-top: 20px;}</style>
</head>
<body>
<div class="container"><h1>服务器发送事件示例</h1><div id="messages"></div><div id="clock"></div>
</div><script>// 创建一个新的 EventSource 实例const eventSource = new EventSource('/events');// 监听消息事件eventSource.onmessage = function (event) {const newMessage = document.createElement('p');newMessage.textContent = 'New message: ' + event.data;document.getElementById('messages').appendChild(newMessage);// 滚动到底部const messagesDiv = document.getElementById('messages');messagesDiv.scrollTop = messagesDiv.scrollHeight;};// 监听错误事件eventSource.onerror = function (error) {console.error('EventSource failed:', error);eventSource.close();};
</script>
</body>
</html>

创建EventSource对象：const eventSource = new EventSource('/events'); 创建一个EventSource对象，连接到服务器的 /events 路由。
处理消息：eventSource.onmessage 事件处理器用于处理从服务器接收到的消息，并将其显示在页面上。
处理错误：eventSource.onerror 事件处理器用于处理连接错误，并在发生错误时关闭连接。
自动滚动：每次接收到新消息时，自动滚动到消息列表的底部，确保用户始终能看到最新的消息。