event: userconnectdata: {"username": "Alice"}
在客户端,可以这样监听这个命名事宜:
source.addEventListener('userconnect', function(event) {var data = JSON.parse(event.data);console.log(data.username + " connected");});
断线重连:如果连接意外中断,EventSource 工具会自动考试测验重新建立连接,除非明确被关闭或者达到最大重试次数。默认情形下,重连会在断开连接后立即发生。如果做事器想要关照客户端在一段韶光后重连,可以包含一个 retry 字段:
retry: 10000\ndata: Please wait 10 seconds before reconnecting\n\n
见告客户端在10秒后考试测验重新连接。
客户端代码(html+js):

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>EventSource Example</title></head><body> <h1>Server-sent Events Example</h1> <div id="events"></div> <script> const eventSource = new EventSource('http://localhost:8080/events'); const eventsDiv = document.getElementById('events'); eventSource.onmessage = function(event) { eventsDiv.innerHTML += `<p>Received: ${event.data}</p>`; }; eventSource.onerror = function(error) { console.error('EventSource failed:', error); eventSource.close(); }; </script></body></html>
做事端代码(Golang):
package mainimport ("fmt""log""net/http""time")func main() {http.HandleFunc("/events", eventsHandler)log.Println("Server started on :8080")if err := http.ListenAndServe(":8080", nil); err != nil {log.Fatal("ListenAndServe:", err)}}func eventsHandler(w http.ResponseWriter, r http.Request) {// 设置相应头w.Header().Set("Content-Type", "text/event-stream")w.Header().Set("Cache-Control", "no-cache")w.Header().Set("Connection", "keep-alive")w.Header().Set("Access-Control-Allow-Origin", "")// 发送事宜数据for {timeMsg := fmt.Sprintf("data: The server time is %v\n\n", time.Now())w.Write([]byte(timeMsg))flusher, ok := w.(http.Flusher)if !ok {log.Println("Streaming unsupported!")return}flusher.Flush()time.Sleep(1 time.Second)}}
小结
EventSource 是一个强大又大略的 API,为开拓者供应了一种在 Web 运用中实现做事器到客户真个实时通信的方法。只管有很多局限性,但在适当的场景下是一个非常有用的工具。
文章持续更新中,微信搜索【路多辛】阅读更多优质文章