在前端开发中，要保证应用程序在与服务器交互时具有良好的鲁棒性，以应对服务器端出现异常情况的情况。SSE（Server-Sent Events）是一种服务器推送技术，通过 SSE 可以实现服务器端向客户端实时推送事件通知。在处理这些事件通知的过程中，需要考虑如何应对服务器端出现异常等不良情况。
什么是 SSE？
SSE 是一种 HTML5 中的 API，它使得服务器可以向客户端发送一系列消息。使用 SSE，服务器只需向客户端发送事件流，而无需关闭连接，客户端可以通过绑定事件监听器来接收这些事件。SSE 技术通常用于实现实时应用程序，例如聊天和股票报价等。
SSE 的核心组件如下：
- 事件流：指从服务器发送到客户端的连续事件。
- 事件源对象：在客户端上表示服务器端的事件源，并与服务器建立长连接。
- 事件处理函数：当事件源对象接收到事件流时，调用注册的事件监听器函数进行处理。
在客户端上，通过创建事件源对象来建立 SSE 连接：
const eventSource = new EventSource('/events');事件源对象通过 URL 指向事件流服务器端的地址。一旦建立连接，事件源对象就会等待来自服务器的信息。当事件源对象接收到数据时，就会触发相应的事件。我们可以通过 addEventListener 方法来为事件源对象添加监听器：
eventSource.addEventListener('message', function(event) {
const data = event.data;
console.log('received message:', data);
});如何处理出现异常的情况？
当服务器端发生异常时，可能会导致 SSE 连接断开。客户端需要及时对此作出响应，以保证应用程序的稳定性。SSE 提供了以下两种方式来处理出现异常的情况：
1. 服务器返回错误状态码
如果服务器端发生异常并返回错误状态码（例如 500），则可以通过监听 error 事件来处理异常情况，如下所示：
eventSource.addEventListener('error', function(event) {
console.log('server error:', event);
});2. 服务器主动关闭连接
如果服务器端主动关闭连接，则 SSE 对象的 readyState 属性值将变为 2，可以通过监听其 readystatechange 事件来处理异常情况：
eventSource.addEventListener('readystatechange', function(event) {
if(event.target.readyState === 2) {
console.log('connection closed by server');
}
});示例代码
以下是一个使用 SSE 技术的简单示例，我们通过使用 node.js 构建一个简单的 Express 服务器端，并使用 SSE 向客户端推送随机数据。
服务器端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ------------------------------
----- --- - ----------
----- ---- - ---------------- -- -----
----------------------------------
------------------ ---- ------------- ---- -
-- -----------
---------------------- -
-------------- - - ------------- - --------
-- ------
---
----- ------ - -----------------------
------------------- -------- -- -
------------------- ------- -- ---- ----------
---HTML 代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------------
-------
------
-- ----------------
--------
----- ----------- - --- -----------------------
----- ------ - ----------------------------------
--------------------------------------- --------------- -
----- ---- - -----------
--------------------- ---------- ------
------------------ -- ---- - -----
---
------------------------------------- --------------- -
------------------- -------- -------
------------------ -- ------- ---------
---
------------------------------------------------ --------------- -
-------------------------- --- -- -
----------------------- ------ -- ---------
------------------ -- ----------- ------ -- ----------
-
---
---------
-------
-------在这个示例中，我们使用 server-sent-events 库来实现 SSE，通过 setInterval 函数每隔一秒钟向客户端推送一个随机数，并在客户端上监听 SSE 的消息、错误和状态变化事件。在客户端上，我们可以根据需要进行事件的处理，以实现不同的效果。
结论
SSE 技术使得服务器端向客户端发送实时数据变得非常容易，并且 SSE 还提供了一些方法来处理不常见但仍然重要的异常状况，例如服务器端发生错误或关闭连接。在使用 SSE 技术时，我们应该注重应用程序的稳定性和鲁棒性，以确保其正确地处理这些异常情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7bc11c5c563ced5a814c1