介绍
Server-sent Events(SSE) 是一种浏览器和服务器之间实现实时通信的技术。它基于 HTTP 协议，而不需要 WebSocket 协议。 SSE 主要用于单向通信，即服务器推送消息给客户端，目前主要用于实时通知、股票行情等场景。
虽然 SSE 简单易用，但它在不同浏览器的兼容性上存在一些问题。本文将介绍如何进行 SSE 的兼容性测试，并提供解决方案以确保在各种浏览器下 SSE 的正常运行。
兼容性测试
在测试 SSE 兼容性之前，我们需要了解 SSE 的基本用法。SSE 包括一个客户端和一个服务器端，客户端向服务器发送连接请求，服务器接受请求并保持连接直到有数据需要发送给客户端。以下是客户端的示例代码：
-- -------------------- ---- ------- --- ------ - --- -------------------- ---------- --- ---------------------------------- ----------- - -------------------- -- ------- ------------------------------- ----------- - ----------------------- ---------- -- ------- -------------------------------- ----------- - --------------- -- -------
其中，EventSource 对象负责与服务器建立连接并监听响应。message 事件用于监听服务器推送的消息，open 事件用于监听连接打开，error 事件用于监听连接错误。
在不同的浏览器中，SSE 可能会存在一些问题，例如 IE 浏览器无法识别 EventSource 对象。为了找到并解决这些兼容性问题，我们需要进行兼容性测试。
可以使用 https://caniuse.com/ 查询 SSE 的支持情况，并测试浏览器是否支持 SSE 和相关特性。
兼容性解决方案
由于不同浏览器的支持情况不同，我们需要采取一些措施来解决 SSE 在不同浏览器中的兼容性问题：
为不支持 SSE 的浏览器提供 Polyfill
Polyfill 是一种 JavaScript 库，它在不支持某些技术的浏览器上提供此技术的部分或全部特性。使用 Polyfill 可以让不支持 SSE 的浏览器具有 SSE 的能力。
Polyfill 的实现方式有很多，这里我们介绍一个常用的 Polyfill 库 EventSource Polyfill。
解决连接问题
在连接 SSE 服务时，可能会发生连接错误或者连接中断的情况。为了确保 SSE 连接的稳定，我们需要使用心跳机制和重连机制。
心跳机制是指在两次 SSE 连接消息之间发送一个保持连接的空消息。这样一来，服务器就会一直保持连接状态，始终可用。例如，在客户端代码中加入以下代码：
setInterval(function() {source.send('');}, 60000); //60s发送一个空消息重连机制是指在连接发生错误或连接中断时，自动重连 SSE 服务。例如，在 error 事件中加入以下代码：
-- -------------------- ---- -------
-------------------------------- ----------- -
-- ------------- --- ------------------- -
---------------
--------------------- -------- - ------ ---------
------
----------------
--------------------- -------- - ------ ---------
-
-- -------解决消息传递问题
在消息传递中，可能出现消息传递过程中的丢失、乱序等问题。为了解决这些问题，我们需要在服务器端和客户端都实现针对消息的唯一编号以及按编号顺序处理消息的机制。
我们可以在服务器端为每个消息生成一个唯一编号，并与消息一起发送。在客户端，我们可以将收到的消息按照编号的顺序进行排序然后进行处理。例如：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
-- - -------------------- -----
---------- - -------------------------
----- - ------------------------
----- ------ -
-----------------
------------- - -------------------------
------------ - ------------------------
-- -------------- -- ---------- -- ------------ -- ------ -
----------------
------- - ---------
-------- - ---------- -------
----- --------------- - -- ----------------- -------
---- ---- ------------- --------------
---- ------ ----------- - -------- ------
-------- ------
---------- - -------------- ------------
----- - ------------- -----------
-
--------- -----------
-
-----------在客户端，我们需要将收到的消息按照编号的顺序进行排序。可以使用一个数组来对消息进行排序：
-- -------------------- ---- -------
--- ------ - --- -------------------- ---------- ---
--- -------- - --- ---------
---------------------------------- ----------- -
--------------
-----------------
------------------
----------------------------
------ ------------------------- - --------------------------
---
----------
------- - - -- - - ---------------- ----
-
------------------------------
-
-- -------结论
SSE 是一种简单易用的实时通信技术，可以应用于很多场景。通过兼容性测试和解决方案，我们可以确保 SSE 在不同浏览器中的正常运行，从而提高我们的应用的兼容性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f37e96e1e8e99bfaf799d5