前言
Server-Sent Events（SSE）是一种 HTML5 技术，用于在客户端和服务器之间进行实时、持续的数据传输。SSE 通过 HTTP 连接传输基于文本的消息，服务器可以随时向客户端推送更新。相对于 WebSocket，SSE 更为简单方便，但在某些浏览器上存在兼容性问题。
本文将介绍如何实现跨浏览器兼容的 SSE，包括技巧和注意事项，并提供示例代码。
技巧
服务器端
为了兼容性，服务器端需要发送以下首部：
------------- ----------------- -------------- --------
其中 Content-Type 指定返回的 MIME 类型为 text/event-stream，表示是 SSE 的数据流。Cache-Control: no-cache 用于确保客户端的缓存被禁用，以确保接收到最新的数据。其它服务器端的 SSE 配置如下所示：
PHP
--------------------- -------------------- ---------------------- -----------
Node.js
----------------------- - --------------- -------------------- ---------------- ---------- ---
Java
--------------------------------------------- ----------------------------------- ------------
客户端
客户端使用 EventSource 对象来连接 SSE 数据流。以下是使用 EventSource 的示例代码：
----- ------ - --- -------------------- ---------------- - --------------- - ------------------------ --
这将连接到 /sse 路径的 SSE 数据流，并在收到消息时将消息内容打印到控制台。
然而，在一些浏览器中，如果 SSE 连接断开，EventSource 对象不会自动重新连接。因此，需要手动处理连接断开和重试，以确保连接可靠性和稳定性。以下是一个完整的 SSE 客户端实现：
-------- -------------------- ---------- -
----- ------ - --- ----------------------
---------------- - -------- ------- -
----------------------
--
-------------- - -------- -- -
------------------ ---------- ------ -------- -- -----
------------------- -- -
-------------------- -----------
-- ------
--
-注意事项
Internet Explorer
在 Internet Explorer 中，必须打开 Content-Type 头中的 text/event-stream 才能正常使用 SSE。以下是 Internet Explorer SSE 配置的示例代码：
-- ---------------------- -
----- ------ - --- --------------------
---------------- - --------------- -
------------------------
--
- ---- -- ------------------------ -
----- --- - --- -----------------------------------
--------------- ------- ------
------------------------------ ---------------------
---------------------- - -------- -- -
-- --------------- --- -- -
------------------------------
-
--
-----------
-浏览器支持
SSE 并不是所有浏览器都支持的技术，以下是 SSE 的浏览器支持列表：
- Internet Explorer：11
- Edge：10
- Firefox：6
- Chrome：6
- Safari：5.1
结论
通过以上介绍，我们可以学习到如何实现跨浏览器兼容的 SSE。在服务器端，我们需要为 SSE 设置正确的 MIME 类型和缓存控制头；在客户端，我们需要处理连接断开和重试，并在 Internet Explorer 中，我们需要特殊处理 SSE 的配置。此外，我们还可以了解到 SSE 的浏览器支持范围，以便在实际应用中使用时进行评估。
代码参考：
https://github.com/mdn/dom-examples/tree/master/server-sent-events
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711d192ad1e889fe200fcf8