SSE则是部署在 HTTP协议之上的，现有的服务器软件都支持此协议。
SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。但SSE只支持单向交互（服务器给客户发送），Websocket支持双向交互。
SSE默认支持断线重连，WebSocket则需要额外部署。
数据格式方面， SSE 使用的是 UTF8 编码的文本格式。
SSE的HTTP response 里header Content-Type 的值是 text/event-stream。不可变！
SSE的数据格式
每个SSE的消息响应分为4个元素：
- retry：重试时间，单位毫秒，只能为数字（SSE请求失败，就会发送新的请求）
- id：消息ID（自定义）
- event：时间类型（自定义）
- data：消息的内容（自定义）
下图是4个消息，注意，多个消息之间中间会有个空行(\n\n)。单个消息之间元素间隔是换行\n
retry: 5000
id: 1cd7bb64-4341-4f5d-a690-4298b8a8ae20
event: eventType
data: Sun Nov 20 18:23:11 CST 2022
retry: 5000
id: 2f57295d-3eaa-4e5c-a787-55fff58d9b05
event: eventType
data: Sun Nov 20 18:23:12 CST 2022
retry: 5000
id: 6a9618de-99e7-4c03-91f8-dcdd7601a8d0
event: eventType
data: Sun Nov 20 18:23:13 CST 2022
retry: 5000
id: c5fdcc90-b1f7-4058-9a3a-d63881ffea8b
event: eventType
data: Sun Nov 20 18:23:14 CST 2022
使用示例：
golang
安装包：
go get gopkg.in/antage/eventsource.v1
广播模式SSE
广播模式SSE指不设置事件名，或者说是不设置通道，所有客户端接收同样的数据。
main.go
package main
import (
"fmt"
"gopkg.in/antage/eventsource.v1"
"log"
"net/http"
"time"
)
// 广播模式SSE，不设置事件名称（也可理解为通道）
func main() {
es := eventsource.New(nil, nil)
defer es.Close()
http.Handle("/", http.FileServer(http.Dir("./public")))
http.Handle("/events", es)
go func() {
for {
// 只设置发送数据，不添加事件名
es.SendEventMessage(fmt.Sprintf("send data: %s", time.Now().Format("2006-01-02 15:04:05")), "", "")
log.Printf("客户端连接数: %d", es.ConsumersCount())
time.Sleep(2 * time.Second)
}
}()
log.Println("Open URL http://localhost:8080/ in your browser.")
err := http.ListenAndServe(":8080", nil)
if err != nil {
log.Fatal(err)
}
}
public/index.html
<!DOCTYPE html>
<html>
<head>
<title>SSE test</title>
<script type="text/javascript">
const es = new EventSource("http://localhost:8080/events");
es.onmessage = function (e) {
document.getElementById("test")
.insertAdjacentHTML("beforeend", "<li>" + e.data + "</li>");
}
es.onerror = function (e) {
// readyState说明
// 0：浏览器与服务端尚未建立连接或连接已被关闭
// 1：浏览器与服务端已成功连接，浏览器正在处理接收到的事件及数据
// 2：浏览器与服务端建立连接失败，客户端不再继续建立与服务端之间的连接
console.log("readyState = " + e.currentTarget.readyState);
}
</script>
</head>
<body>
<h1>SSE test</h1>
<div>
<ul id="test">
</ul>
</div>
</body>
</html>启动服务：
go run main
点对点模式SSE
实现方式和广播模式差不多，只需做简单修改：
服务端代码只需添加事件名称：
// 设置事件名称为：test-event
es.SendEventMessage(fmt.Sprintf("send data: %s", time.Now().Format("2006-01-02 15:04:05")), "test-event", "")
前端修改接收方式
es.addEventListener("test-event", (e) => {
document.getElementById("test")
.insertAdjacentHTML("beforeend", "<li>" + e.data + "</li>");
});
支持跨域的SSE
现在项目开发基本上都是前后端分离，这样就会存在跨域问题，SSE解决跨域的方式只需要在new方法内增加允许跨域请求头：
es := eventsource.New(
eventsource.DefaultSettings(),
func(req *http.Request) [][]byte {
return [][]byte{
[]byte("X-Accel-Buffering: no"),
[]byte("Access-Control-Allow-Origin: *"),
}
})
前端创建sse连接时也可添加允许跨域参数：
const es = new EventSource("http://localhost:8080/events", { withCredentials: true });
解决火狐浏览器断开不会自动重连问题
点击查看源代码
在Chrome浏览器中sse断开后会自动重连，但firefox浏览器中断开后不会重连，解决办法是，前端js通过判断连接状态主动进行重连请求，通过判断readyState的值进行重新调用初始化操作
readyState说明：
- 0：浏览器与服务端尚未建立连接或连接已被关闭
- 1：浏览器与服务端已成功连接，浏览器正在处理接收到的事件及数据
- 2：浏览器与服务端建立连接失败，客户端不再继续建立与服务端之间的连接
前端代码可修改为如下：
<!DOCTYPE html>
<html>
<head>
<title>SSE test</title>
<script type="text/javascript">
let es = null;
// 解决火狐浏览器断开不会自动重连问题
function initES() {
if (es == null || es.readyState == 2) {
es = new EventSource("http://localhost:8080/events", {withCredentials: true});
es.addEventListener("test-event", (e) => {
document.getElementById("test")
.insertAdjacentHTML("beforeend", "<li>" + e.data + "</li>");
});
es.onerror = function (e) {
// readyState说明
// 0：浏览器与服务端尚未建立连接或连接已被关闭
// 1：浏览器与服务端已成功连接，浏览器正在处理接收到的事件及数据
// 2：浏览器与服务端建立连接失败，客户端不再继续建立与服务端之间的连接
console.log("readyState = " + e.currentTarget.readyState);
if (es.readyState == 2) {
setTimeout(initES, 5000)
}
}
}
}
initES()
</script>
</head>
<body>
<h1>SSE test</h1>
<div>
<ul id="test">
</ul>
</div>
</body>
</html>
