SSE 在 AJAX 运行时保持挂起状态

Question

在我的项目中，我有一个长时间运行的进程，它被AJAX调用。持续时间可以是 1 到 15 分钟。

在 AJAX 运行时，我想向用户提供更新。它应该简单地显示要添加到数据库中的剩余行数。

我发现有几种不同的选择来实现这一点。轮询、SSE 或 WebSockets。我从未使用过WebSockets，也找不到一个好的例子。

我现在正在尝试使用我非常理解的SSE，并且它工作正常..但是当AJAX开始运行与eventSource的连接时，将挂起。因此，当 AJAX 运行时，不会收到任何更新。

法典：

<script type="text/javascript">
var es;
function checkProgress(id){
es = new EventSource('checkProgress.php');   
es.addEventListener('message', function(e) {
console.log(e.data);
}, false);
}
checkProgress(1);   
$(function() {
$('.submit').on('click', function() {
var form = $('form')[0];
var form_data = new FormData(form);             
$.ajax({
type: 'POST',
url: 'submit.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
console.log(response);
}
});
return false;
});
});
</script>

截图：

网络日志

现在实际上我仍然没有找到任何关于如何在运行 AJAX 进程时实现 SSE 的参考或示例。所有参考或示例都提供了示例，让 getProgress 文件执行某些操作。

Answer 1

我看到你正在使用PHP。我最好的猜测是你也在使用内置的PHP会话管理。这样做的问题是访问会话是独占操作。我猜您的 AJAX 操作已打开并锁定了会话，从而阻止了您的 SSE 脚本也打开会话。您可以考虑不打开会话或以只读方式打开会话(死链接((已存档(。