什么是 SSE？
SSE 全称为 Server-Sent Events，是一种基于 HTTP 协议的服务器推送技术。它可以让服务器向客户端发送异步消息，使客户端可以实时接收服务器推送的事件，且不必经过客户端的请求。
SSE 是一个轻量级的协议，与 WebSocket 相比，它不需要建立双向通信的连接，仅仅使用 HTTP 进行单向的消息传递。SSE 支持多种数据类型，包括文本、二进制和事件类型。它被广泛应用于聊天室、实时数据展示、新闻资讯等场景中。
如何实现 SSE？
使用 SSE 技术，需要在客户端和服务器之间建立连接，并对服务器发送特定的 HTTP 请求。客户端使用 EventSource 对象来建立连接，服务器端需要返回符合 SSE 协议格式的数据。
下面是一个基本的 SSE 例子：
-- -------------------- ---- ------- ----- ------ - --- -------------------- ------------------------------- ----- -- - ---------------- ---------- ---------- --- ---------------------------------- ----- -- - ---------------- ------- ----------- ------------ --- -------------------------------- ----- -- - ------------------ -------- ------- ---
服务器端返回的 SSE 数据应该符合以下格式：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('data: hello\n\n');在返回的数据中，使用 data: 开头来表示消息内容，空行（\n\n）表示消息结尾。SSE 还支持其他的事件类型，如 event: 和 id: 等。想要更深入地了解 SSE 协议规范，请参考 SSE 规范。
如何实现多浏览器兼容？
SSE 技术兼容性较好，目前主流的浏览器都支持 SSE。但是在实际开发过程中，我们仍然需要注意一些细节，以保证在各种浏览器下都能正常使用 SSE。
设置正确的 Content-Type
服务器返回的数据中，Content-Type 头部应该设置为 text/event-stream，这样客户端才能正确地解析 SSE 数据。同时，由于 SSE 是一种长连接技术，应该使用 Connection: keep-alive 来保持连接不断开。
处理不同浏览器的 SSE 实现差异
不同浏览器对 SSE 实现存在一些差异，比如 Internet Explorer 10 和 11 不支持 EventSource 对象，而是使用 MSEventSource 对象来实现 SSE 技术。在使用 SSE 技术时，我们需要检测当前浏览器的 SSE 实现方式，以兼容不同的浏览器。
const EventSource = window.EventSource || window.MSEventSource;
if (!EventSource) {
console.error('Your browser does not support SSE.');
}处理 SSE 连接断开的情况
由于 SSE 是一种长连接技术，当连接断开时，我们需要手动进行重连，以保持 SSE 连接的正常运行。事件监听 error 可以捕获 SSE 连接断开的情况，我们可以在监听到 error 事件时，进行 SSE 连接的重连。
source.addEventListener('error', event => {
if (event.eventPhase === EventSource.CLOSED) {
console.warn('SSE connection closed, will re-connect after 2 seconds.');
setTimeout(initSSE, 2000);
}
});总结
SSE 技术是一种非常便捷、易于使用的服务器推送技术，它可以帮助我们实现实时推送消息的功能。在使用 SSE 技术时，我们需要注意服务器返回数据的格式、处理不同浏览器的 SSE 实现差异，以及处理 SSE 连接断开的情况，以确保 SSE 技术在各种浏览器下都能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf6866b5eee0b5256b9203