前戏

• 今天最近chatgtp很火，使用过程中无聊打开了f12查看接口，想看下是怎么实现的这种实时通信；发现不是websocket，又发现响应头中的text/event-stream，好奇心就上来了。。。

SSE

"Server-Sent Events" (SSE) 是一种 Web 技术，用于实现服务器主动向客户端发送数据。SSE 使用了 HTTP 协议，但是与普通的 HTTP 请求不同，SSE 可以保持长连接，从而实现服务器主动向客户端发送数据。

text/event-stream

text/event-stream 是 SSE 的一个重要实现细节，它是一种 HTTP 响应类型，用于发送 SSE 数据流。当服务器向客户端发送 SSE 数据时，它会使用 text/event-stream 响应类型。

• text/event-stream 是一种 HTTP 响应类型，常用于提供服务器发送事件 (Server-Sent Events) 的数据流。它允许服务器在客户端不发送请求的情况下，主动地向客户端发送数据，从而实现实时交互。

1. 特点

1. 单向通信：只允许服务器向客户端发送数据，客户端不能向服务器发送数据。
2. 持久连接：服务器和客户端之间的连接在不断地发送数据的同时保持活跃，除非其中一方主动关闭连接。
3. 数据流：客户端可以在接收到服务器发送的数据时，即时地对数据进行处理。
4. 跨浏览器支持：text/event-stream 在大多数主流浏览器中都支持，比如 Google Chrome、Mozilla Firefox、Safari 等。
5. 一般来说，如果浏览器 HTTP 请求一个资源，当资源未全部传完时，浏览器是会一直等待的，此时页面还是空白一片。而当响应头中Content-Type: text/event-stream时，虽然 HTTP 连接还未被关闭，但浏览器会渲染这个持久化的连接的响应内容。当有新的数据被传输过来时，浏览器会继续显示出来。

2. 消息格式

• 数据以单行文本的形式发送，每个数据块以两个换行符分隔。

• 数据块可以是事件，并具有类型名称。

• 数据块可以带有事件 ID，以保证事件的正确顺序。

• 数据块可以带有一个可选的数据块标识符，以便重新订阅事件。

• 数据块可以带有一个可选的超时，以便控制服务器如何处理空闲连接。

  event: message
  data: This is a message
  
  event: update
  data: This is an update
  id: 123
  
  event: new_data
  data: This is some new data
  id: 456
  retry: 2000
  
  

• 每个数据块

  event: <type>
  data: <data>
  id: <id>
  retry: <timeout>
  
  

3. demo（go）

package main

import (
	"fmt"
	"net/http"
)

func main() {
	http.HandleFunc("/events", func(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")
		w.Header().Set("Access-Control-Allow-Origin", "*")

		for i := 0; i < 5; i++ {
			fmt.Fprintf(w, "data: %d\n\n", i)
			flusher.Flush()
			time.Sleep(time.Second)
		}
	})

	err := http.ListenAndServe(":8080", nil)
	if err != nil {
		fmt.Println(err)
	}
}