什么是 SSE？
SSE（Server-Sent Events）是一种服务器向客户端发送实时数据的技术，它基于 HTTP 协议，可以用于实现服务器推送。SSE 可以让服务器向客户端推送数据，并且客户端可以通过监听事件的方式实时接收数据。
SSE 的优点
相比于 Websocket，SSE 的优点在于它更加轻量级且易于实现。SSE 只需要使用纯文本格式发送数据，而 Websocket 需要使用二进制格式。此外，SSE 还支持自定义事件类型，可以更加灵活地处理不同类型的数据。
SSE 的实际应用中的问题
1. SSE 断开连接后如何重连？
在实际应用中，由于网络等原因，SSE 可能会断开连接。为了保证数据的实时性，需要在 SSE 断开连接后进行重连。可以通过以下方式实现：
var source = new EventSource('/api/sse');
source.addEventListener('error', function(event) {
if (event.target.readyState === EventSource.CLOSED) {
// 断开连接，进行重连
source = new EventSource('/api/sse');
}
});2. SSE 接收到的数据如何处理？
SSE 接收到的数据是一个字符串，需要通过解析来获取真正的数据。通常情况下，SSE 返回的数据格式为 JSON，可以通过以下方式解析：
source.addEventListener('message', function(event) {
var data = JSON.parse(event.data);
// 处理数据
});3. SSE 如何处理跨域？
SSE 默认不支持跨域，需要在服务器端进行配置。可以通过设置响应头的方式实现：
res.setHeader('Access-Control-Allow-Origin', '*');SSE 的解决思路
1. SSE 断开连接后如何重连？
在实现重连时，需要注意避免出现无限制的重连，造成服务器压力过大。可以通过设置重连次数和重连时间间隔来避免这种情况的发生。
-- -------------------- ---- -------
--- ------ - --- ------------------------
--- ---------- - --
--- ------------- - --
--- ------------- - -----
-------------------------------- --------------- -
-- ------------------------ --- ------------------- -
-- ----------- - -------------- -
--------------------- -
------ - --- ------------------------
-------------
-- ---------------
-
-
---2. SSE 接收到的数据如何处理？
在处理 SSE 接收到的数据时，需要根据实际情况进行解析。通常情况下，SSE 返回的数据格式为 JSON，可以通过 JSON.parse 方法将字符串解析为 JSON 对象。
source.addEventListener('message', function(event) {
var data = JSON.parse(event.data);
// 处理数据
});3. SSE 如何处理跨域？
在处理跨域时，需要在服务器端进行配置。可以通过设置响应头的方式实现：
res.setHeader('Access-Control-Allow-Origin', '*');总结
SSE 是一种轻量级的服务器推送技术，可以用于实现实时数据推送。在实际应用中，SSE 可能会遇到断开连接、数据解析和跨域等问题，需要采取相应的解决思路来解决这些问题。通过对 SSE 的深入学习和实践，可以更好地应用 SSE 技术，提高应用程序的实时性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662deb10d3423812e4b96cc3