Server Sent Events (SSE) 技术是一种基于 HTTP 协议的服务器向浏览器发送事件流的技术，用于实现实时通信。但是，在实践中我们经常会遇到浏览器兼容性问题，本文就给大家介绍 SSE 技术在浏览器兼容性方面的注意事项以及解决方案。
浏览器支持
SSE 技术是 HTML5 标准中新增的，目前主流的浏览器基本都支持 SSE 技术。但是，IE 浏览器不支持 SSE 技术，而只支持类似的技术 EventSource。
注意事项
在使用 SSE 技术的过程中，需要注意以下几个方面：
1. 浏览器缓存
浏览器对于 SSE 请求的缓存机制不同于一般的网络请求。浏览器会对 SSE 请求缓存连接，然后一直保持连接，不会关闭。如果出现了服务器端的异常，比如断网，浏览器会不断地尝试连接，这样也许会导致后端资源的耗尽。因此，我们在进行 SSE 请求时要注意服务器端的资源利用。
2. 心跳机制
在 SSE 连接保持期间，浏览器与服务器之间的连接可能会因为网络波动或其他原因而断开。为了解决这种问题，需要设置一个心跳机制，将一个空格字符以一定的频率发送到客户端，保持连接的活跃性。如果一段时间内没有数据发送，那么浏览器就会认为服务器断开了 SSE 连接。
3. 其他限制
SSE 技术虽然优越于传统的轮询，但是在浏览器兼容性方面还是存在一些限制点。
- 一次只能发送一个 HTTP 请求，支持的 HTTP 方法只有 GET，不能进行 POST 等序列化操作，否则会抛出异常；
- 响应的消息格式必须是 text/event-stream。
解决方案
为了解决 SSE 的上述限制点，我们需要按照以下方法来使用 SSE：
1. 缓存控制
虽然浏览器会缓存 SSE 请求，但是我们可以在服务端设置相应的头信息来禁止浏览器缓存该请求：
response.setHeader('Cache-Control', 'no-cache');
response.setHeader('Connection', 'keep-alive');
response.setHeader('Content-Type', 'text/event-stream');2. 心跳机制
为了避免连接断开，我们可以在 SSE 响应中加入空格字符，以保持连接的活性：
setInterval(function () {
response.write('data: \n\n');
}, heartbeatInterval);3. 其他限制
受限于 SSE 协议的规定，我们无法发送多个 HTTP 请求以及使用 POST 等序列化操作。但是，我们可以向服务器端去请求一个资源 URI，在该 URI 下进行后续的操作，避免了 HTTP 方法受限的问题：
var source = new EventSource('/sse/resource');
source.addEventListener('message', function (event) {
console.log(event.data);
});示范代码
下面是一个 SSE 技术的示例代码，当服务器端有新的消息时，会通过 SSE 技术向客户端发送消息：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------------- --------- -- -
-- ------------ --- ------- -
---------------------------------- ---------------------
----------------------------------- ------------
-------------------------------- --------------
--- - - --
----- ----- - -------------- -- -
----------------------------
--------------------- ----- --------------
----
-- ------
------------------- -- -- -
---------------------
--
- ---- -
------------------- --------
-
---
--------------------客户端代码如下：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
-------
------
--- ----------------------
--------
----- ----------- - ---------------------------------------
----- ------ - --- --------------------
---------------------------------- ------- -- -
----- -- - -----------------------------
------------ - ------ -------- ---------------
----------------------------
---
---------
-------
-------总结
SSE 技术是实现浏览器与服务器端实时通信的一种好的方式，但是在浏览器兼容性方面需要注意一些问题，如缓存机制、心跳机制、HTTP 方法限制等问题。我们需要遵照规范进行实现，以保证 SSE 技术的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab7fc148841e98947559ee