什么是 SSE
SSE（Server-Sent Events，服务器发送事件），为特定目的而扩展的 HTTP 协议，用于实现服务器向客户端推送实时数据的单向通信。如果连接断开，浏览器会自动重连，传输的数据基于文本格式。
SSE 的传输属于流式传输，流式传输的定义就是允许数据在发送方和接收方在建立连接之后，以连续的流的形式传输，不需要频繁的断开和建立连接。
几个重点：
- 单向通信，服务端向客户端推送数据，客户端无法发送数据给客户端
- 基于 HTTP 协议
- 如果连接断开，浏览器会自动重新连接
- SSE 仅支持文本数据传输
SSE demo
node:
const http = require('http');const server = http.createServer((req, res) => {if (req.url === '/events') {res.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache','Connection': 'keep-alive','Access-Control-Allow-Origin': '*'});randmoMessage(res);}
});server.listen(3000, () => {console.log('http://localhost:3000');
});function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;
}function randmoMessage(res) {let time = getRandomInt(2, 5) * 1000;setTimeout(() => {res.write(`data: ${JSON.stringify({ interval: time })}\n\n`);randmoMessage(res);}, time)
}html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SSE</title>
</head>
<body><div id="content"></div><script>const eventSource = new EventSource('http://localhost:3000/events');const el = document.getElementById('content');eventSource.onmessage = function(event) {const elP = document.createElement("p");const data = JSON.parse(event.data);elP.textContent = `From SSE: interval: ${data.interval}`;el.appendChild(elP);};</script>
</body>
</html>结果：
一些探讨
- 占用浏览器连接数：浏览器限制了 HTTP 的并发，这算是一个比较致命的缺点，当然，专门一个域名使用那就不算缺点，否则轮询可能还是比较好的选择
- 请求参数和请求头：参数可以用 url，且本身不支持自定义请求头，请求头需要 Fetch 或 XMLHttpRequest 初始化会话设置（查到了，但是没试验）
- 与 websocket 对比：websocket 拥有更高的传输效率和更低的延迟，抛开技术实现，SSE 对服务器压力会小一些
- 使用场景：MDN 给出的推荐使用场景，处理如社交媒体状态更新、消息来源（news feed）或将数据传递到客户端存储机制（如 IndexedDB 或 web 存储）之类的，所有的技术都不可能十全十美，最重要的是适合，所以什么场景使用都要根据现实情况来决定，比如个人觉得消息通知、数据大屏等就很值得使用
- chatgpt 的交互方式是否也可以用 SSE：看起来流式传输很适合做这样的交互，后端返回什么，前端渲染什么，不过，chatgpt 看起来是使用 websocket，在 network 里面只有找到 websocket 一直在响应
以前确实是不知道有这么个 API，以后要是有机会，某些场景应该是可以尝试一下。
欢迎关注订阅号 coding个人笔记
![[python][Anaconda]使用jupyter打开F盘或其他盘文件](https://img-blog.csdnimg.cn/direct/fbe92607f013438c93f549d39c313974.png)
