SSE 是什么？
SSE（Server-Sent Events 服务器推送事件），是一种 HTML5 新增的推送技术，它可以让服务器实时向浏览器推送数据，也可以让浏览器实时向服务器发送数据。与 WebSocket 相比，它更简单易用，并且可以兼容所有的浏览器。使用 SSE 技术可以实现各种实时数据操作，例如聊天室、提醒通知、实时监控等场景。
SSE 遇到的坑
虽然 SSE 技术十分方便，但在实际使用过程中还是会遇到一些坑，下面我们将结合实例进行讲解。
断线重连
在使用 SSE 技术时，由于网络或服务器等各种原因，可能会导致连接断开，为了保证数据的实时性，需要在连接断开时进行断线重连处理。
我们通常会初始化一个 SSE 对象，如下所示：
let es = new EventSource('/api/sse')
es.onmessage = function(event) {
console.log(event.data)
}
es.onerror = function(error) {
console.log(error)
}然后在浏览器中打开网页时，该 URL 地址将会与服务器建立一个 SSE 连接。但是，如果该连接在使用过程中断开了，如何重连呢？
我们可以在 es.onerror 回调函数中进行判断，如果是连接断开了，则进行断线重连操作。代码如下所示：
-- -------------------- ---- -------
--- -- - --- -----------------------
------------ - --------------- -
-----------------------
-
---------- - --------------- -
-- -------------- --- ------------------- -
------------------------------
-- - --- -----------------------
-
-在断线重连操作中，我们重新初始化一个 SSE 对象，然后将其赋值给原来的变量 es，从而达到断线重连的效果。这样就可以保证 SSE 连接一直处于连接状态，实时接收数据。
浏览器兼容性
虽然 SSE 技术在各种浏览器中都可以使用，但是在某些浏览器中，可能会出现一些奇怪的问题，特别是在 IE 浏览器中。
在实践中，我们遇到了一个问题，即在使用 SSE 技术进行长连接推送时，如果在 IE 中打开多个页面，会导致所有页面都连接到同一个 SSE 连接上，从而发生数据互相覆盖的问题。这个问题花费了我们很长时间才找到解决方案。
解决方案如下所示：
-- -------------------- ---- -------
--- -- - --- ---------------------------- - --------------
------------ - --------------- -
-----------------------
-
---------- - --------------- -
------------------
----------
------------- -- -
-- - --- ---------------------------- - --------------
-- -----
-我们在初始化 SSE 对象时，多加了一个随机数参数，这样每次打开页面时都会生成一个不同的 URL，避免了所有页面连接到同一个 SSE 连接上的情况。同时，在 es.onerror 回调函数中，我们将原来的 SSE 对象关闭并延时 1 秒后重新初始化一个 SSE 对象，这样就避免了 IE 浏览器出现数据互相覆盖的问题。
总结
SSE 技术虽然十分方便，但在实践中还是会有一些问题，例如断线重连、浏览器兼容性等。解决这些问题，需要我们结合实际情况进行优化，找到合适的解决方案。希望以上的经验总结对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a20c4248841e9894e52493