随着Web应用程序的发展，服务器推送成为一个非常重要的功能。SSE(Server-Sent Events) 是一种基于 HTTP 的服务端推送技术，它允许 Web 应用程序通过 HTTP 连接从服务器获取实时数据更新。SSE 使用非常简单，而且可以轻松地实现服务端与客户端之间的实时通讯。
然而，SSE 并不是所有浏览器都支持的。在 Internet Explorer 10 之前的版本以及 Safari 5 之前的版本中，不支持 SSE 技术。为了解决这个问题，我们可以使用一些 JavaScript 库来解决跨浏览器兼容性问题。
解决方案
使用 EventSource.js 库
EventSource.js 是一个 JavaScript 库，它提供了 SSE 的跨浏览器兼容性解决方案。它使得使用 SSE 不需要考虑浏览器的兼容性问题，同时还提供了一些有用的功能，比如自动重连，事件消息队列等等。
使用 EventSource.js 很简单，只需要将它引入到你的 HTML 文件中，并通过创建一个新的 EventSource 对象来连接到服务器：
<script src="eventsource.js"></script> <script> var source = new EventSource('/sse'); source.addEventListener('message', function(event) { console.log(event.data); }); </script>
使用 jQuery 插件
jquery-sse 是一个 jQuery 插件，它同样提供了 SSE 的跨浏览器兼容性解决方案。使用 jquery-sse 只需要引入 jquery.sse.js 文件并调用 $.sse 方法即可：
-- -------------------- ---- ------- ------- ----------------------------- ------- ----------------------------- -------- ------------- - ---------- --------------- - ------------------------ - --- ---------展开代码
使用 Polyfill
如果你不想引入第三方库，也可以选择使用 Polyfill 来解决 SSE 的跨浏览器兼容性问题。Polyfill 是一种 JavaScript 代码，它为旧版浏览器提供了 Web API 的实现。使用 Polyfill 可以让你的 Web 应用程序在不支持 SSE 的浏览器上仍然能够正常工作。
EventSource Polyfill 是一个比较好的 SSE Polyfill 库，它提供了 SSE 的实现，并支持多种浏览器和平台。
<script src="eventsource.polyfill.js"></script> <script> var source = new EventSourcePolyfill('/sse'); source.onmessage = function(event) { console.log(event.data); }; </script>
总结
上面介绍了三种解决 SSE 跨浏览器兼容性问题的方案：使用 EventSource.js、使用 jquery-sse 插件以及使用 Polyfill。这些解决方案都可以使用，具体使用哪一个根据你的项目需求和个人喜好来决定。
在 Web 应用程序开发中，我们经常需要进行服务器推送的功能，在使用 SSE 技术的时候，需要考虑浏览器的兼容性问题。通过本文所介绍的解决方案，即使在不支持 SSE 技术的浏览器上也可以实现服务端与客户端之间的实时通讯。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a270e148841e9894ed0dd4
