Server-sent Events（SSE）是一种在浏览器与服务器之间进行实时通信的技术。相比于 WebSocket，SSE 更加轻量级、易于实现，并且能够在不支持 WebSocket 的浏览器中工作。
然而，SSE 在不同浏览器之间的兼容性问题仍然存在。本文将会探讨这些兼容性问题，并提供解决方法。
浏览器兼容性问题
Internet Explorer
Internet Explorer 11 及以下版本不支持 SSE。这是由于 IE 不支持 EventSource 对象。
Safari
Safari 在 iOS 和 macOS 上的版本不支持 SSE。这是由于 Safari 不支持 EventSource 对象。
Android
Android 的默认浏览器不支持 SSE。这是由于该浏览器不支持 EventSource 对象。
Chrome
Chrome 支持 SSE，但是在某些情况下可能会出现连接断开的问题。这是由于 Chrome 的 HTTP 连接池机制，在一些长时间保持连接的场景下可能会关闭连接。
解决方法
Polyfill
为了解决浏览器不支持 EventSource 对象的问题，我们可以使用 polyfill。其中比较流行的一个 polyfill 是 EventSource polyfill，它可以在不支持 SSE 的浏览器中模拟 EventSource 对象。
使用 EventSource polyfill 的示例代码如下：
if (!window.EventSource) {
window.EventSource = EventSourcePolyfill;
}
var source = new EventSource('/sse');
source.onmessage = function (event) {
console.log('received message:', event.data);
};心跳机制
为了避免 Chrome 在长时间保持连接的场景下关闭 SSE 连接的问题，我们可以使用心跳机制。在 SSE 连接建立后，我们可以定时向服务器发送一个空的 SSE 事件，以保持连接。
使用心跳机制的示例代码如下：
-- -------------------- ---- -------
--- ------ - --- --------------------
------------------------------- -------- -- -
-------------------- -- -
------------------------ --------------------
-- -------
---
------------------------------------ -------- -- -
--------------------- ------------
---
---------------------------------- -------- ------- -
--------------------- ---------- ------------
---结论
SSE 技术虽然比 WebSocket 更加轻量级、易于实现，但是在不同浏览器之间的兼容性问题仍然需要解决。通过使用 polyfill 和心跳机制，我们可以在大多数浏览器中使用 SSE 技术，从而实现实时通信的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67596b5a5dff5c9760c845a8