引言
前端页面与服务端通信是非常常见的，如果需要实时获得服务端数据，那么就需要实时通信，一些传统的做法有轮询（polling）和长轮询（long-polling），但是存在效率低下的问题，比较新颖的方法是使用 Server-sent Events（下简称 SSE）。SSE 能够实现单向实时通信，即服务端向客户端推送数据，相比于轮询和长轮询，SSE 更加高效、轻量、易用，适合在 Web 页面中使用。
然而，SSE 并不被所有浏览器支持，而且不同浏览器的 SSE 实现也有差异，这就需要我们在开发中注意兼容性问题。本文将会介绍不同浏览器对 SSE 的支持程度，并提供一些解决方案来解决 SSE 在多浏览器中的兼容性问题。
浏览器兼容性
SSE 通常在现代浏览器中都被支持，但并不是所有浏览器都支持 SSE。下面是 SSE 的浏览器支持情况：
- 支持 SSE 的浏览器：Chrome, Safari, Firefox, Opera, Edge
- 不支持 SSE 的浏览器：Internet Explorer（包括 EdgeHTML 和特定版本的 Edge），Safari 10.0 以下
由于 IE 在市场占有率上的优势，通常我们在实际开发中需要尤为注意 IE 的 SSE 兼容性情况。
解决方案
检查浏览器是否支持 SSE
我们可以使用 JavaScript 来检查当前浏览器是否支持 SSE，代码如下：
if (typeof EventSource !== 'undefined') {
// 支持 SSE
} else {
// 不支持 SSE
}使用 polyfill
polyfill 是指，在不支持某些技术的浏览器中，我们可以自己实现这些技术的相同或相似的效果。对于 SSE，我们可以使用 polyfill 来实现 SSE 缺失的功能。在 Github 上，有一个叫 EventSource polyfill 的库，可以实现 SSE 的兼容性，使用方法如下：
- 在 HTML 中引入 polyfill
<script src="path/to/eventsource.min.js"></script>
- 使用 polyfill 来处理 SSE
-- -------------------- ---- -------
-- ------- ----------- --- ------------ -
-- -- --------
- ---- -
-- --- ------ --------
--- ------ - --- ---------------------------------------
---------------------------------- ----------- -
-- -- --------- ---- ------
---
-使用 polyfill 的劣势是会增加页面的请求和处理压力，同时可能存在一些性能上的问题，因此需要在合适的情况下使用。
处理 IE 中的兼容性问题
在 IE 中使用 SSE 需要特殊处理，因为 IE 与其他浏览器对 SSE 的实现有一些差异：
- 需要使用 XDomainRequest 对象来代替 XMLHttpRequest，这意味着 SSE 只能通过 HTTP GET 请求实现
- 需要通过 responseText 属性来获取响应内容，而不是像其他浏览器一样使用 response 属性
- 在 onmessage 事件中，IE 只能使用 event.data 属性来获取消息内容，而不能使用 event.originalEvent.data
由于 IE 对 SSE 的支持缺陷比较多，我们需要通过特殊处理来适配 SSE 在 IE 中的使用，代码如下：
-- -------------------- ---- -------
-- ------- ----------- --- ------------ -
-- -- ---
--- ------ - --- -------------------------------
---------------------------------- ----------- -
-- ----
--- ---- - -------
------------------
---
- ---- -
-- --- ------ -------------- --
--- ------ - --- -----------------
------------------ -------------------
------------- - ---------- -
-- ----
--- ---- - ------------------
------------------
--
-------------- - ---------- -
-- ------
------------------------ ---- ---------
--
--------------
-总结
本文介绍了 SSE 在多浏览器中的兼容性问题，并提供了一些解决方案。在实际开发中，我们需要根据实际情况选择不同的解决方案，以提高 SSE 在各种浏览器中的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64914d5148841e9894f4d7c7