什么是 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个人笔记
