什么是 SSE
Server-Sent Events（SSE，服务器推送事件）是一种建立在 HTTP 和 JavaScript 之上的协议，允许服务器向浏览器推送数据，使浏览器能够实时地获取数据更新而无需不断地发起请求。与使用 WebSocket 相比，SSE 更加简单并且更容易实现。
SSE 的基本用法
在发送 SSE 的页面上，我们需要建立一个链接到服务器的源（source），并且在源上注册相应的事件。源的链接使用 EventSource 对象创建：
let source = new EventSource('/sse', { withCredentials: true });在这里，我们指定了 SSE 的服务器地址为 /sse，并且允许在跨域请求时携带凭证（Cookies）。
我们可以在源上注册各种事件：
-- -------------------- ---- -------
------------------------------- -- -- -
---------------- --------
---
---------------------------------- ----- -- -
--------------- --- -------------------
---
-------------------------------- -- -- -
---------------- -------
---------------
---在这里，我们注册了 open、message、error 三个事件。在连接建立时，我们向控制台输出一个消息。在收到数据时，我们向控制台输出数据的内容。在出现错误时，我们向控制台输出错误信息，并且关闭 SSI 的连接。
SSE 的兼容性问题
在不同的浏览器类型和版本中，对 SSE 的兼容程度存在一定的不同。以下是一些典型的兼容性问题：
Safari 的缓存问题
在 Safari 中，每个 SSE 请求只会在第一次连接时成功，之后的请求可能会被缓存而不会被真正发送到服务器。为了解决这个问题，我们可以在每个请求上添加一个随机参数：
let source = new EventSource(`/sse?${Math.random()}`, { withCredentials: true });这样，每个请求都会携带一个不同的参数，避免被缓存。
IE 和 Edge 的 MIME 类型问题
在 IE 和 Edge 中，使用 SSE 时可能会遇到 MIME 类型错误的问题。这是因为这两个浏览器对于 SSE 中使用的 MIME 类型 text/event-stream 不够兼容。我们可以通过在服务器端设置 Content-Type 的方式来解决这个问题：
response.writeHead(200, {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/event-stream;charset=UTF-8',
'Cache-Control': 'no-cache'
});在这里，我们通过在 Content-Type 中指定编码类型，来弥补 IE 和 Edge 对 MIME 类型的不兼容性。
Firefox 的超时时间问题
在 Firefox 中，SSE 连接默认的超时时间较短，只有 30 秒。当服务器没有发送数据时，Firefox 会关闭连接并重新发起连接。如果你的 SSE 服务器端产生数据的间隔时间较长则会被认为是超时并断开连接。在这种情况下，我们需要在服务器端发送控制字符以避免超时。我们可以在服务器端每隔一段时间就发送一个含有空数据的事件以保持连接活跃：
res.write(`:\n\n`);
总结
通过学习本文，你应该能够了解 SSE 的基本用法以及在不同浏览器类型和版本中遇到的兼容性问题，并且学会如何兼容这些问题。在使用 SSE 时，请确保针对不同的浏览器存在不同的兼容性处理，以确保 SSE 的功能能够在所有浏览器中顺利使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647abca9968c7c53b0666646