Как перенести обновления прогресса с PHP на страницу после нажатия пользователем кнопки?

Question

У меня есть серия кнопок на странице, которые, когда пользователь нажимает на них, вызывают PHP скрипт через jQuery.ajax(). В настоящее время я добавляю конкатенированную строку дампа «обновлений прогресса» в хранилище данных DIV через параметр success: function(data) { $('#divplaceholder').append(data); ...}. Моя проблема заключается в том, что я хотел бы распечатать обновления прогресса в реальном времени этого заполнитель DIV, поскольку исполнение «перекликается» с ними.

Я прочитал много примеров SSE, учебников, сделал обширный поиск в Google, и я думаю, что у меня есть идея о том, как отправлять «сообщения» с сервера, но мне не удалось найти пример того, как фактически запускать tasker.php через jQuery для отправки обновлений , когда пользователь на самом деле нажимает кнопку. В настоящее время мой вызов .ajax() запускается событием jQuery .on('click').

Я заблудился и смущен между обучением отправлять обновления обратно через SSE и как вызвать выполнение tasker.php (а в некоторых случаях, посылая ему параметры, как .ajax() позволяет мне делать).

Любая помощь, очищающая это, будет оценена по достоинству.

ОБНОВЛЕНИЕ # 2:Found this example, но как только загрузка JavaScript запускается; Я хочу запустить выполнение при нажатии кнопки.

UPDATE # 1: ДОБАВИТЬ SAMPLE КОД (Пожалуйста, простите форматирование, я отправляю это из мобильного приложения) Это абстрагировать, как я это реализовать прямо сейчас:

<? php 
$output =""; 
/*dummy code*/ 
read_csv_file(); 
$output.= "Opened and read file<br/>"; //Step 1 
parse_csv_file(); 
$output.= "CSV file successfully parsed"; //Step 2 
delete_from_directory(); 
$output.= "CSV file successfully deleted"; //Step 3 
insert_data_into_db(); 
$output.= "successfully inserted records into Database"; //Step 4 

return $output; 
?> 


<div id="placeholder"></div> 
<button id="button">Update</button> 


//jQuery... 

$('#button').on('click', function(){ 
.ajax({ 
url: 'tasker.php', 
dataType: 'txt', 
data: dataVariable, 
success: function (data){ 
$('#placeholder').append(data); 
}); 
}); 

//jQuery... 

Answer 1

Во-первых, на стороне клиента:

var server = null; 
$('#button').on('click', function(){ 
    if(server)server.close(); 
    server = new EventSource('tasker.php?x=123'); 
    server.addEventListener('message', function(e){ 
    process(e.data); 
    if(e.data >= 100){server.close();server=null;} //6 
    }, false); 
    }); 

Очки:

• Вы должны передать параметр с помощью GET
• Я предположил, что process() будет обновлять ваш прогресс и каким-либо образом изменить отображение веб-браузера.
• Если кнопка снова нажата, она закрывает любое предыдущее соединение SSE и запускает новый.
• 6: см #6 на серверную ниже код

На заднем конце, PHP псевдо-код:

<?php 
//Process inputs here 
//If using sessions close them here 
$lastProgress = 0; 
while(true){ 
    $progress = ... //1 
    if($progress == $lastProgress)continue; //2 
    echo "data:$progress\n\n"; //3, 4 
    @ob_flush();flush(); //5 
    //if($progress >= 100)exit; //6 
    } 

Очки:

• 1: Получить прогресс (например, просмотреть файл журнала, опросить базу данных и т. д.)
• 2: Не тратьте трафик; только отправьте назад новый прогресс
• 3: Я принимаю $progress может быть только числом. Если есть шанс, что это может быть текст, вам нужна проверка ошибок, или json-escaping !!
• 4: "data:" префикс, "\n\n" - протокол SSE.
• 5: Идиома PHP, чтобы быть уверенным, что она будет отправлена ​​немедленно.
• 6: Внутренний сервер SSE представляет собой бесконечный цикл: весь процесс PHP уничтожается Apache, когда браузер закрывает сокет. С индикатором прогресса вы хотите, чтобы он умер, как только мы узнаем, что больше не будет прогресса, но это должно произойти от клиента (если сервер отключится, браузер подумает, что сокет умер и попытается снова подключиться). Вот почему эта строка прокомментирована. См. #6 в клиентском коде.

В заключение вы могли бы придерживаться Ajax и слушать readyState 3 (также известный как техника комет). (Вот как вы делаете это работать в браузерах, таких как IE11 и более ранние версии, а также единственный способ использовать POST.) (См. Мою книгу, «Приложения для передачи данных с помощью HTML5 SSE», для большей загрузки по этим темам.)