前言
众所周知，Server-Sent Events（以下简称SSE）是一种 HTML5 新规范提供的服务器主动推送技术，它可以让浏览器和服务端建立一条持久化连接，服务端可以不断地向浏览器推送数据。通常情况下，服务端推送数据的速率是比较快的，但是由于网络原因或者其他一些不可预见的问题，导致客户端无法接收到数据，这对于数据响应的实时性来说是非常不利的。在本篇文章中，我将阐述如何解决 SSE 的消费者处理错误的问题。
问题描述
在使用 SSE 进行推送数据的过程中，我们通常将其称为生产者，其作用就是推送数据；而客户端则是消费者，客户端通过建立 SSE 连接，订阅服务端的事件，接收到服务器推送的数据。在对 SSE 连接进行监听的过程中，我们通常会将错误事件放置在error事件中进行处理，以确保 SSE 连接异常的情况下，可以对其进行灵活的处理和优化，以维护 SSE 连接的实时性。
但是，在实际的项目中，我们会发现 SSE 的消费者处理错误不是那么简单，不同的浏览器会对错误事件进行不同的处理，因此，我们需要寻找一种通用的解决方案来处理 SSE 的消费者错误问题。
解决方案
1. 兼容性处理
不同版本的浏览器，对 SSE 的消费者错误处理事件进行处理的方式存在不同点。以下是不同浏览器 SSE error 事件的处理方式：
- Chrome ：
readyState从OPEN转换为CLOSED； - Firefox ：不会改变
readyState； - Safari ：
readyState从OPEN转换为CONNECTING，然后再由CONNECTING转换为CLOSED。
因此，我们需要为各个浏览器编写不同的错误处理函数，以确保 SSE 在各种环境下的正常运行。
以下是一个通用的 SSE 错误处理函数，可以针对不同的浏览器进行兼容：
-- -------------------- ---- -------
-------- --------------------- -
--- ---------------- --- ------------------ - - -- ---- --- --
---------------- ---------- ---------
- ---- -
------- ----------------------- - - -- ---- ----- --- ------
---- -----------------------
---------------- ---------- -------------
------
---- -----------------
---------------- ---------- -------
------
---- -------------------
---------------- ---------- ---------
------
--------
-------------------- ------- -------
------
-
-
-2. SSE 自动重连
在实际的应用中，我们需要 SSE 不断地稳定地推送数据，因此，需要对 SSE 进行自动重连。在 SSE 连接失败后，我们需要在一段时间内进行 SSE 的自动重连，以确保 SSE 连接不断，从而保证实时性。
以下是一个 SSE 自动重连函数，可以在 SSE 连接断开后自动重连：
-- -------------------- ---- -------
-------- --------------------- --------------- ---------------- -
--- ------------------- - --- ------------ --- --
--- ---------------------- --- ----------- - -
-------------- - ---
-
--- ----------------------- --- ----------- - -
--------------- - -------- ---------------------- -
------------------------ ------ -----------
----------------------------
---------------------------- ------ -- --------- ---
--
-
--------------------------- - ---------------- -- --------- ---------------
-------------------------------------------- ---------------------- -
----------------------------------------- ---------------------
---
-结束语
在本文中，我们讲述了如何针对 SSE 的消费者错误问题进行解决。通过本文所提供的 SSE 错误处理和自动重连函数，我们可以更加稳定和高效地进行 SSE 连接，从而维护实时性，更好地用户体验。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6794c342504e4ea9bd966163