什么是 SSE
SSE（Server-Sent Events）是一种客户端与服务端之间单向传输数据的技术。它允许服务器向浏览器推送实时数据流，而不需要浏览器发送请求。SSE 协议比起 WebSocket 协议的优点在于它比 WebSocket 更容易上手，因此，它被广泛应用于一些简单的实时数据展示场景。
问题描述
使用 SSE 技术时，如果服务端断开连接，那么浏览器就无法再获取实时数据流了。但是，如果我们需要实现一个实时数据的展示页面，那么有服务端连接断开时自动重连的需求。然而，SSE 协议并没有提供自动重连的机制，这就需要我们自己通过编码实现。
解决方案
实现 SSE 服务端断开连接后自动重连的原理很简单：当浏览器接收到断开连接时，我们利用 JavaScript API 的 setTimeout 实现定时重连，这样就能够达到自动重连的效果。
具体做法如下：
-- -------------------- ---- ------- -------- -------------- - ----- ------ - --- ----------------- ------------- - -------- ------- - ----------------------- --- ----------- -- ---------------- - -------- ------- - ---------------- - ------- ---- ----------- -- -------------- - -------- ------- - ------------------ ------------- -- -- - ------ ------------- -- - --------------- -- ------ -- - ---------------------------------------展开代码
其中，source.onerror 一旦被触发，就会利用 setTimeout 实现 5 秒后再次连接，从而达到自动重连的效果。
深入探讨
当我们使用 SSE 技术时，要注意以下几点：
1. 对 Server-Sent Events 的支持
目前，SSE 技术被所有主流浏览器（IE 除外）所支持。但是，在应用场景中需要保证服务端完全支持 SSE 技术。
2. 数据安全
在使用 SSE 传输数据时，我们需要注意数据的安全性。因为 SSE 协议允许任意 JavaScript 获取返回的数据，所以我们需要在服务端控制数据的访问权限。
3. 连接数限制
与 WebSocket 不同，SSE 连接采用长链接机制，因此连接数限制的考虑会更为重要。服务端需要考虑连接数限制的问题，避免过多的客户端对服务器造成过大的负担。
总结
本文介绍了如何解决 SSE 服务端断开连接后浏览器不自动重连的问题，同时也介绍了如何通过代码实现服务端断开连接后的自动重连机制。当我们使用 SSE 技术时，需要注意数据安全、连接数限制等问题。当然，如果需要更完善、更稳定的实时数据传输技术，WebSocket 无疑是更好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c7634e10032fedd3914c17
