前言
SSE（Server-Sent Event）是一种新的网页推送技术，它允许浏览器自动接收来自服务器的推送信息。与传统的 AJAX 请求不同，SSE 基于持久连接，可以保持长时间的数据传输并且不需要额外的轮询请求，这种技术在实时应用场景中非常有用。
不过，SSE 在实践中也会遇到一些兼容性问题，本文将结合例子讲解这些问题，并提供了相应的解决方案。
I. 兼容性问题：浏览器不能正确接收服务器的推送信息
SSE 推送信息被认为是一个事件流（EventStream），并以纯文本格式发送。服务将数据作为永久HTTP响应的一部分发送，这意味着浏览器通过HTTP与服务器建立一次长连接，通过持续不断的数据包，服务可以随时向浏览器推送新的数据。
然而，在一些浏览器上，特别是 IE 浏览器下，推送信息会出现丢失或者无法正确解析等问题。
II. 解决方案
1. 设置 ContentType
SSE 推送流数据时，需要在 HTTP 响应头中设置特定的内容类型，即 "text/event-stream" ，客户端在收到这种数据时，就可以正确的把数据流化为事件流。 对于一些浏览器（比如 IE），可能需要设置更多的响应头来使 SSE 可用。解决方案如下：
res.setHeader('Connection', 'keep-alive');
res.setHeader('Content-Type', 'text/event-stream;charset=UTF-8');
res.setHeader('Transfer-Encoding', 'chunked');
2. 消息分割符号
每一个 SSE 消息用 "\n\n" 来分隔,也就是两个回车符构成的，而且每个消息应该以 “data:” 开头，用另一个回车符在结尾，否则浏览器可能无法正确解析。解决方案如下：
res.write(`data: ${JSON.stringify(data)}\n\n`);
3. 服务器发送负载
一般情况下，SSE 传递消息时是逐条传递的，即在前一条消息被完全传递之前不能传递下一条消息。因此在发送消息前，需要确保前一条消息已经完全的被传输完成。解决方案如下：
-- -------------------- ---- -------
--- ---------- - -------------- -- -
-- ------------------- -
--------------------------
-------
-
---------------- -----------
-- ------
该示例为通过定时发送 PING 消息来确保连接处于活动状态的例子。
4. 重连机制
由于网络环境的不可控性，在 SSE 连接时，在无法保证消息完整性的情况下，需要考虑一些重新连接的机制来保证数据的可靠传输。解决方案如下：
-- -------------------- ---- -------
--- ---------- - -------------- -- -
-- ------------------- -
--------------------------
-------
-
-- -------------- -
-----------------------------------
-
-- -------
该示例每隔15秒钟，向浏览器发送一条消息。 如果服务器收到了新的更新，则在前一个消息发送后立即发送下一个消息。 如果在上传新的信息之前发生任何故障，会自动进行重连。
总结
本文介绍了 SSE 技术，在实践中可能会遇到的一些兼容性问题，并提供了相应的解决方案。对于前端开发人员来说，使用 SSE 技术可以解决传统 AJAX 请求无法解决的实时需求问题，同时也带来了一些新的技术挑战。我们相信，在深入了解 SSE 的基础知识后，开发人员可以更加高效、高质量的使用 SSE 实现各种实时应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e181f6f6b2d6eab3cad945