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>

屏幕截图：

Network log

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

PHP：

checkProgress.php

   <?php
require_once './core/init.php';
$Jobs = new Core\Jobs();
$data = $Jobs->getUpdate(1);
// var_dump($data);
// die();
header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache'); 


    echo "id: 1" . PHP_EOL;
    echo "retry: 100\n\n";
    echo "data: " . json_encode($data) . PHP_EOL;
    echo PHP_EOL;

    ob_flush();
    flush();

Submit.php

<?php
require_once 'core/init.php';



//'long running' job for debug
for($i = 1; $i <= 10; $i++) {
    Core\Jobs::pushUpdate('1', array("rows"=>$i,"job_id"=>1)); 
    sleep(2);
}

当AJAX发布正在运行时，SSE请求停止

0 个答案: