SSE（Server-Sent Events）是一种服务端主动生成事件的 web 技术，它可以向客户端持续推送数据，而无需客户端轮询服务器，常常用于实现一些实时性较高的 web 应用场景，如聊天室、股票行情等。
在使用 SSE 的过程中，代码注释和错误处理是非常重要的，它们可以帮助我们更好地理解 SSE 的工作流程，提高代码的质量和稳定性，本文将从这两个方面来探讨。
代码注释
代码注释是一种辅助阅读的方式，可以让其他人更好地理解代码的作用和流程，对于复杂的 SSE 代码，注释更是不可或缺的。
EventSource 类的注释
SSE 的核心是 EventSource 类，它用于与服务器建立连接并接收服务端发送的事件，这里我们需要给 EventSource 类添加一些注释，方便其他人阅读和使用。
-- -------------------- ---- -------
----- ----------- -
---------------- -------- -
-- ----- ---
-------- - ----
-- ---- ------------
-------------------- - ------------------------ -- ------
-- ---- ----- ------------------
---------------- - ---
-- --------
-------------- - ---
-- ------
---------- - -----------------------
-- --------
---------------- - -----------
-- -------
---------------- - ---
-- ----
----------------
-
-- -------- --------------------
------ -
-- -- -------
-
-- --------------
---------- -
-- -- -------------- --
----- --- - --- -----------------
--------------- --------- ------
------------------- - ---------------------
------------------------------------- ------------
------------------------------ ---------------------
---------------------------------- --------------
------------------------------------- ------------------
-- -- ---------------- --------
---------------------- - -- -- -
-- --------------- --- ---------------------- -
-- -----
---------------------- ----
- ---- -- --------------- --- -------------------------------- -
-- -------
-- ----------- --- ---- -
-- ----
---------------- - -----------
------------------------- ----
- ---- -
-- ---------
--------------
-
- ---- -- --------------- --- ----------------------- -
-- -------
--------------------------------------
- ---- -- --------------- --- -------------------- -
-- -----
----------------------- ----------------
-
--
-- -- ----- ---------
----------- - ----- -- -
--------------
--
-- ----
-----------
-
-- ----
------- -
-- ---------------- --- ------- -
--------------- - -------
-- ---------- -
-----------------
-
----------------------- ----
--------------------------
-
-
-- ------
---------------------- --------- -
-- ----------------------- -
-------------------- - ---
-
------------------------------------
-
-- ------
------------------------- --------- -
-- ----------------------- -
-------
-
----- ----- - ---------------------------------------
-- ------ -- -- -
---------------------------------- ---
-
-
-- --------
-------------------- -
-------------- - ---
-
-- ------------
--------------- ------ -
----- --------- - ---------------------
-- ------------ -
-------
-
--- ---- - - -- - - ----------------- ---- -
----------------------- -------
-
-
-- -----------
------------------- -
----- ----- - ------------------------
--- --- - -----
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
-- ------------ --- -- -
-- ------------
--- -- -------------------------
--- - -----
- ---- -- ---------------------- -
-- ------
- ---- -
-- -----
----- --- - ------------------
----- ----- - --- -- - - ----------------- ---- - -----
----- ----- - --- -- - - ------------------ - -- - ---
-- ------ --- -------- -
-- -------- --- --
--- - - ----- ----- --
- ---- -- ------ --- ------- -
-- ------ --- --- ---- ---
-- ----------- -
-------- - ---
-
-------- -- ---- - ------
- ---- -- ------ --- ----- -
-- -- ------ ----------- --
---------------- - ------
- ---- -- ------ --- -------- -
-- ---------- ----- --
---------------- - ----------------
-- ------------------------- -
---------------- - -----------
-
-
-
-
-
-- ---------
------------------- -
----------------------- - -----------------
------------------------ -----
-- --------- --- ---------- -
-- - ------- ----- ----------- --
---------------- - ------------------------
-
-- ---------------- --- ----------- -
-- ------- ---------- --
--------------- - -----
-
-
-- ----
-------- -
-- --------
---------------- -- --
-- ----------------- - ------------------- -
---------------- - -------------------
-
-- ----
------------- -- -
----------------
-- ------------------
-
-- -------- ----------- ------------
------------ ------- -
--------------- - -------
-------- - -----
---------------- - -------
------------------------------ -
----- -----
------- -------
---
--------------------------
-- ----------------- --- ----------- -
-- --------
---------------- - -----------
-
-- ----
------------- -- -
----------------
-- ------------------
-
-事件回调函数的注释
SSE 的事件回调函数通常由我们自己编写，我们需要在回调函数中添加一些注释，用于描述该事件具体的作用和响应值。
例如，下面是一个事件回调函数的示例代码：
eventSource.addEventListener("open", (event) => {
// 连接成功，在控制台输出信息
console.log("Connection opened");
});我们可以对该事件的作用和响应值进行注释：
eventSource.addEventListener("open", (event) => {
// 连接成功
// event：事件对象，包含以下属性
// - type: 事件类型，值为 "open"
console.log("Connection opened");
});这样其他人在阅读代码时，就可以更好地了解这个事件回调函数的作用和响应值。
错误处理
SSE 使用 XMLHttpRequest 对象与服务器建立连接并传送数据，由于网络原因等因素，连接可能会出现错误。在错误处理中，我们需要对各种错误情况进行处理，保证 SSE 服务的稳定性。
请求错误处理
当请求失败时，我们需要进行重试操作。
xhr.onerror = (err) => {
this._retry();
};这里的 _retry 方法会根据实际情况更新重试时间间隔，并在一定时间后重试连接。
连接关闭处理
当连接被关闭时，我们需要更新状态信息，并触发 server_close 事件。
-- -------------------- ---- -------
------------ ------- -
--------------- - -------
-------- - -----
---------------- - -------
------------------------------ -
----- -----
------- -------
---
-- ----
-服务端错误处理
服务端错误可能会导致连接中断或者返回错误信息，我们可以通过错误码来判断是否是服务端错误，并添加对应的错误处理。
-- -------------------- ---- -------
-- ----------- --- ---- -
-- ----
---------------- - -----------
------------------------- ----
- ---- -
-- ---------
-- ----------- -- --- -- ---------- - ---- -
-- ------------
--------------------- --------------------- --------------------
-
--------------
-这里的错误信息会在控制台上输出，方便我们查找错误原因。
总结
代码注释和错误处理是 SSE 服务开发过程中必不可少的一部分，它们可以提高代码的可读性和健壮性，避免出现错误和 bug，保证服务的稳定性和性能。我们需要在开发过程中养成良好的注释和错误处理习惯，这对我们的职业发展和工作效率都有很大的帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a919e848841e98945666ea