当前位置：首页 > news >正文

gin+sse实现离散的消息通知

news 2025/7/28 9:48:43

虽然网上的都是用sse实现将实时消息流不间断的推给前端，但是sse也可以模拟websocket进行突发的消息通知，而不是一直读取数据并返回数据。即服务端保存所有的连接对象，前端管理界面发送正常的http请求，在后端遍历所有的连接对象，将消息广播。就可以实现一种类似双向通讯的形式了。

代码参考了Server-side Events (SSE) : A deep dive into client-server architecture | Implementation in Golang，在这基础上实现了房间机制，房间ID由前端生成并传递，鉴权机制请自行通过token+中间件等形式实现。

package mainimport ("fmt""net/http""github.com/gin-gonic/gin"
)// 房间号为key，client数组为value
var clients = make(map[string][]chan string)// 广播房间内的所有用户
func broadcast(roomID string, data string) {for _, client := range clients[roomID] {client <- data}
}
//配置跨域
func configCors() gin.HandlerFunc {return func(c *gin.Context) {method := c.Request.Methodc.Header("Access-Control-Allow-Origin", "*")c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")c.Header("Access-Control-Allow-Headers", "*")c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Cache-Control, Content-Language, Content-Type")c.Header("Access-Control-Allow-Credentials", "true")//放行所有OPTIONS方法if method == "OPTIONS" {c.AbortWithStatus(http.StatusNoContent)}// 处理请求c.Next()}
}//前端初始化时连接该接口
func connect(c *gin.Context) {roomID := c.Param("id")// Set the response header to indicate SSE content typec.Header("Content-Type", "text/event-stream")c.Header("Cache-Control", "no-cache")c.Header("Connection", "keep-alive")// Create a channel to send events to the clientprintln("Client connected")eventChan := make(chan string)if clients[roomID] == nil {clients[roomID] = []chan string{}}clients[roomID] = append(clients[roomID], eventChan) // Add the client to the clients mapdefer func() {// 删除该房间的该用户，按值删除数组元素for _, v := range clients[roomID] {if v != eventChan {clients[roomID] = append(clients[roomID], v)}}close(eventChan)}()// Listen for client close and remove the client from the listnotify := c.Writer.CloseNotify()go func() {<-notifyfmt.Println("Client disconnected")}()// Continuously send data to the clientfor {data := <-eventChanprintln("Sending data to client", data)fmt.Fprintf(c.Writer, "data: %s\n\n", data)c.Writer.Flush()}
}// 发送消息接口
func sendMsg(c *gin.Context) {// data := c.PostForm("data")roomID := c.Param("id")data := c.DefaultQuery("name", "urlyy")// print data to consoleprintln("Data received from client :", data)broadcast(roomID, data)c.JSON(http.StatusOK, gin.H{"message": "Data sent to clients"})
}func main() {router := gin.Default()router.Use(configCors())// SSE endpoint that the clients will be listening torouter.GET("/sse/:id", connect)// Handle POST requestrouter.GET("/send/:id", sendMsg)// Start the servererr := router.Run(":6666")if err != nil {fmt.Println(err)}
}

前端代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>SSE Client</title>
</head><body><h1>SSE Client</h1><div id="sse-data"></div><script>const sseDataElement = document.getElementById("sse-data");// Create an EventSource to listen to the /sse endpoint// 注意这里多加了一个路径属性，就是房间ID// 测试时可以另建一个html文件，将它的房间ID更改成不一样的const eventSource = new EventSource("http://localhost:6666/sse/1");// Event listener for messages received from the servereventSource.onmessage = function (event) {const data = event.data;appendDataToDiv(data);};// Event listener for SSE errorseventSource.onerror = function (event) {console.error("SSE Error:", event);};// Function to append data to the SSE data divfunction appendDataToDiv(data) {const p = document.createElement("p");p.textContent = data;sseDataElement.appendChild(p);}</script>
</body></html>