SSE（Server-Sent Events）是一种基于 HTTP 的单向实时通信技术，常用于前端页面的实时更新和通知。然而，在异步调用中，SSE 可能会出现死锁问题，导致前端页面无法更新或响应变慢。本文将介绍该问题的原因和解决方法，并提供示例代码，帮助前端开发者更好地掌握 SSE 的使用。
问题描述
在 SSE 异步调用中，前端通过 EventSource 的 onmessage 事件来监听服务器推送的消息，并在回调函数中进行页面更新操作。然而，如果回调函数中包含了异步调用，如 AJAX 请求或 Promise，就可能会出现死锁问题。
具体来说，假设页面中有两个 SSE 事件源，分别对应不同的消息推送，代码如下所示：
-- -------------------- ---- ------- ----- ------- - --- ----------------------------- ----- ------- - --- ----------------------------- ----------------- - --------------- - ------------------------ ------------------------- -- ---- -- ----------------- - --------------- - ------------------------ ------------------------- -- ---- --
在上述代码中，当 source1 接收到服务器的消息后，会触发 onmessage 回调函数，并发起 ajaxRequest1 异步请求；类似地，当 source2 接收到服务器的消息时，也会触发 onmessage 回调函数，并发起 ajaxRequest2 异步请求。
现在，假设 ajaxRequest1 和 ajaxRequest2 都需要向服务器请求相同的资源，如下所示：
-- -------------------- ---- -------
-------- ------------------ -
--------------------- -
------- -------
----- ---------------- ---- --
--
-------------- -- ----------------
------------ -- --------------------
------------ -- ----------------------
-
-------- ------------------ -
--------------------- -
------- -------
----- ---------------- ---- --
--
-------------- -- ----------------
------------ -- --------------------
------------ -- ----------------------
-由于 ajaxRequest1 和 ajaxRequest2 都需要向服务器发送 POST 请求，因此它们之间会出现竞争条件，导致其中一个请求被阻塞。此时，因为 EventSource 的 onmessage 是同步调用，所以两个 SSE 事件源都会被阻塞，页面将无法更新或响应变慢，从而出现死锁问题。
解决方法
要解决 SSE 在异步调用中出现的死锁问题，可以采用以下两种方法：
方法一：使用同步 AJAX 请求
一种简单的解决方法是使用同步 AJAX 请求，而不是异步请求。这样可以确保在同一时间只能执行一个请求，避免出现竞争条件和死锁问题。示例代码如下：
-- -------------------- ---- -------
-------- ------------------ -
----- --- - --- -----------------
---------------- --------------- ------- -- ----
------------------------------------ ----------------------------------
---------------------- - ---------- -
-- --------------- --- ------------------- -- ---------- --- ---- -
----- ------ - -----------------------------
--------------------
-
--
------------------------- ---- ----
-
-------- ------------------ -
------------------- -- --------
-在上述代码中，通过将 AJAX 请求调整为同步请求，避免了出现竞争条件和死锁问题。然后在 ajaxRequest2 函数中直接调用 ajaxRequest1 函数，从而共享同一条请求并避免重复请求的问题。
方法二：使用异步请求控制器
另一种解决方法是使用异步请求控制器，通过控制并发数来避免出现竞争条件和死锁问题。具体来说，可以使用一个异步请求队列，将所有的异步请求加入队列，然后控制并发数不超过一定的阈值。这样可以保证任意时刻只有至多一个异步请求被发送，避免出现竞争条件和死锁问题。示例代码如下：
-- -------------------- ---- -------
----- ---------------------- -
--------------------------- -
------------------- - ---------------
------------ - --
---------- - ---
-
------------ -
-- ------------- - -------------------- -
-------------------
- ---- -
-------------------------
-
-
------------- -
---------------
-------------------- -- -
---------------
-- ------------------ - -- -
------------------------------
-
---
-
-
----- ---------- - --- -------------------------- -- ------ -
-------- ------------------ -
------ --------------------- -
------- -------
----- ---------------- ---- --
--
-------------- -- ----------------
------------ -- --------------------
------------ -- ----------------------
-
-------- ------------------ -
----------------- -- -------------------- -- ---------
-在上述代码中，定义了一个 AsyncRequestController 类，用于控制异步请求的并发数。该类包含三个属性和两个方法：
- maxConcurrency：最大并发数。
- running：当前正在运行的异步请求数。
- queue：异步请求队列，用于存储等待执行的异步请求。
- add()：添加一个异步请求到队列中。
- _run()：从队列中取出一个异步请求并执行。
其中，add() 方法负责将一个异步请求加入队列，并判断当前是否可以直接执行该请求，如果当前正在运行的请求数已经达到最大并发数，则将该请求加入队列中；_run() 方法负责从队列中取出一个异步请求，并执行该请求。
然后，在 ajaxRequest2 函数中，通过异步请求控制器的 add() 方法，将 ajaxRequest1 函数封装成一个异步请求，并添加到异步请求队列中。异步请求控制器会负责控制并发数，确保同时只能有一个异步请求在运行，从而避免出现竞争条件和死锁问题。
总结
在 SSE 异步调用中，采用异步操作可能会出现死锁问题。为了避免这种问题，可以采用同步 AJAX 请求或异步请求控制器等方式进行控制，并保证任何时候并发数都不超过一定的阈值。这样可以保证异步请求的有序执行，避免竞争条件和死锁问题的出现。希望本文的内容能够帮助前端开发者更好地掌握 SSE 的使用，并解决相关的开发问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd8b7895b1f8cacdce2816