在我的项目中,我有一个由 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 文件做某事的例子。