前言
Server-sent Events（以下简称 SSE）是一种浏览器与服务器交互的方式，允许服务器向客户端发送文本流，而不需要客户端发出任何请求。SSE 给前端开发者带来了很多好处，比如实时推送数据、实时更新页面等。
然而，当一个 SSE 连接断开或者超时时，前端开发者可能会面临一些异常情况，需要通过一些特殊处理来保证 SSE 的稳定性。在本文中，我们将会学习如何处理这些异常情况。
超时处理思路
SSE 连接有可能会因为网络原因或者服务器请求响应时间过长等原因，导致连接超时，需要重连。为了保证 SSE 连接的稳定性，我们需要通过设置超时时间来实现超时自动重连的功能。
其中，超时时间通常需要根据应用场景和网络状况来自己选择合适的值。一般来说，超时时间建议设置为大于服务端发送心跳包的时间，这可以避免客户端在服务器发送心脏包时断开 SSE 连接。例如，如果服务器每 25 秒发送一个心跳包，则超时时间可以设置为 30 秒左右。
超时处理的思路如下：
- 客户端与服务端建立 SSE 连接；
- 客户端设置超时时间，并启动定时器；
- 客户端接收服务器的数据，并将定时器归零；
- 当超时时间到达时，客户端清除定时器，然后关闭 SSE 连接；
- 客户端再次与服务端建立 SSE 连接，重复以上步骤。
连接中断处理思路
与超时不同，连接中断是指 SSE 连接在未达到定义的超时时间下由于某种原因被中断，如网络断开、服务器异常等。为了保证 SSE 连接的稳定性，我们需要设置 SSE 连接的自动重连。
连接中断处理的思路如下：
- 客户端与服务端建立 SSE 连接；
- 客户端接收服务器的数据；
- 当 SSE 连接断开时，客户端尝试重新建立 SSE 连接，重复以上步骤。
示例代码
下面是一个简单的 SSE 连接的示例代码。
-- -------------------- ---- -------
--- ------ - --- ----------------------------
--- --------- - -----
---------------------------------- ------- -- -
------------------------
--------- - ------------- -- -
---------------
------------
-- ------- -- ----- -- -
---
-------------- - ------- -- -
------------------ -------- -------
------------
--
-------- ----------- -
------ - --- ----------------------------
-在代码中，我们首先使用 EventSource 对象建立了与服务器的 SSE 连接，并在接收到来自服务器的数据时清除了超时计时器。当 SSE 连接断开或者超时时，我们通过调用 source.close() 方法来关闭 SSE 连接，并在定时器回调函数中重新建立 SSE 连接，以保证 SSE 连接的稳定性。
同时，我们还使用了 onerror 事件来处理 SSE 连接异常情况，如连接被拒绝、连接中断等，这种情况下也会自动尝试重新建立 SSE 连接。
总结
Server-sent Events （SSE）为前端开发者带来了很多好处，但在实际开发中，我们需要通过特殊处理来保证 SSE 连接的稳定性。本文介绍了如何处理 SSE 连接的超时和连接中断的异常情况，并提供了示例代码。在实际应用中，我们需要结合具体场景和实际情况来选择合适的处理方式，以保证 SSE 连接的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d56ac48841e9894ba37bc