В моем проекте у меня есть длительный процесс, который вызывается 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>
Снимки экрана:
Сетевой журнал
На самом деле я до сих пор не нашел ни ссылки, ни примера того, как реализовать SSE, пока запущен процесс AJAX.Все ссылки или примеры содержат примеры, позволяющие файлу 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);
}