Ajax response while remote php runs - php

i want to get data echoed in the remote php after i sent the main request and before i get the complete response.
the intent is to show "i am almost there - 5 items remaining" or similer...
This is my current js script:
function getdetails(){
$("div#urltable").fadeOut('fast');
$("div#ajaxLoading").fadeIn('fast');
var checkurl = $('input#remoteurl').attr('value');
if($("#checkBrokenLinks").prop('checked') == true){
var checkonline = 'check';
}
else {
var checkonline = 'skip';
}
$.ajax({
type: "POST",
url: "ajax-outlink_checker.php",
data: {checkurl:checkurl, checkonline: checkonline}
}).always(function(data) {
var $response = $(data);
var whileRuningCount = $response.filter('#whileRuningCount').html();
$("div#whileRuningCount").fadeOut('fast');
$("div#whileRuningCount").fadeIn('fast');
$("div#whileRuningCount").html(whileRuningCount);
}).done(function(result) {
var $response=$(result);
var urltable = $response.filter('#urltable').html();
var whileRuningCount = $response.filter('#whileRuningCount').html();
$("div#ajaxLoading").fadeOut('fast');
$("div#urltable").fadeIn('fast');
$("div#urltable").html(urltable);
});
}
As you can see
i added .always() trying to grab the echo's the run in the php file.
but... i guess i missunderstand how to make it work and if .always
is even the way to go about it.
Any help would be most apreaciated.
Best regards, Sagive.

You'll need to make 2 separate ajax calls. 1 for the initial request, and then a second one repeated as often as needed to check for status updates. The action responder will need to update some variable for the status responder to check. How you communicate the status to the other responder is up to you. One method is to simply use a file. Your action responder will call handleaction() while the status responder will only call statuscheck():
<?php
function handleaction()
{
$actions_left = 0;
while ($actions_left > 0)
{
perform_action();
status_update(--$actions_left);
}
}
function status_update($remaining)
{
$filename = "/" . session_id() . "_action_status.txt";
$fh = fopen($filename, "w");
fputs($fh, $remaining);
fclose($fh);
}
function statuscheck()
{
$filename = "/" . session_id() . "_action_status.txt";
echo #file_get_contents($filename); // js treats empty response as 0.
}
?>

.always() is not for that. It just means that whether the request was success/done() or fail() run what is in that snippet.
If you are trying to show an "almost there.." message, a better way would be to have another async call to the server which polls every N seconds, looks at some data state in the server, (a flag maybe?) and based on that shows a message in the front end..

Related

Never-ending ajax request, good idea / bad idea?

For the backend of my site, visible only to a few people, I have a system whereby I communicate with a php via ajax like so:
function ajax(url, opts) {
var progress = false, all_responses = [], previousResponseLength = "";
var ajaxOptions = {
dataType: "json",
type: "POST",
url: url,
xhrFields: {
onprogress: function(e) {
if (!e.target.responseText.endsWith("\n")) return;
var response = e.target.responseText.substring(previousResponseLength).trim();
previousResponseLength = e.target.responseText.length;
var responses = response.split(/[\r\n]+/g);
var last_response;
for (var k in responses) {
if (responses[k] === "---START PROGRESS---") {
progress = true;
if (opts.onProgressInit) opts.onProgressInit();
} else if (responses[k] === "---END PROGRESS---") progress = false;
else all_responses.push(last_response = responses[k]);
}
if (progress && last_response !== undefined) opts.onProgress(JSON.parse(all_responses[all_responses.length-1]));
}
},
dataFilter: function(data){
return all_responses[all_responses.length-1];
}
}
$.extend(ajaxOptions, {
onProgress: function(data){
console.log(data);
}
});
return $.ajax(ajaxOptions);
}
And an example of a never-ending php script (until the user closes the connection):
const AJAX_START_PROGRESS = "---START PROGRESS---";
const AJAX_END_PROGRESS = "---END PROGRESS---";
session_write_close(); //fixes problem of stalling entire php environment while script runs
set_time_limit(0); //allows to the script to run indefinitely
output(AJAX_START_PROGRESS);
while(true) {
output(json_encode(["asdasd" => "asasdas"]));
sleep(1);
}
function output($msg) {
echo preg_replace("`[\r\n]+`", "", $msg).PHP_EOL;
ob_flush(); flush();
}
This allows me through 1 ajax request to 'poll' (am I using that term correctly?)
So if I want to execute a very long php script I can now check its progress, and the last response is delivered via jqhxr.done(callback).
Or, as in the example php script, I can open a connection and leave it open. Using sleep(1); It issues an update to the $.ajax object every 1 second.
Every response has to be json encoded, and if the response is 1 very long json that comes over multiple 'onprogress' calls, it waits until the end of the message (if responseText.endsWith("\n")) we're ready!)
My remote shared server didn't allow websockets so I made this. If the user closes the connection, so does the php script.
It's only got to work for a few admins with special privileges, and I don't need to worry about old browsers.
Can anyone see anything wrong with this script? Through googling I haven't found anybody else with this kind of method, so I expect something is wrong with it.
Extensive testing tells me it works just fine.
You invented long polling request, actually it's wide used as fallback to websockets, so nothing wrong with it.
About your code it's hard to say without testing, but when using such methods as long-polling, you need to double check memory leaks on browser side and on server side.

AJAX long polling - waiting for php to finish while trying to get to another page

I want to create notification system in my company's erp similar to Facebook one. To maintain good performance, I use long polling - looped ajax querying php script for number of seconds.
Everything works fine, until I try to go to another page inside ERP. When I click any link on the page, everything freezes waiting until background php script is completed, even if I manually killed ajax connection.
JS script is included on every page and starts itself on page load.
function notificationsObject(){
var nl = new Object();
nl.startAjax = function(data){
if(nl.ajaxObject != null) try{ nl.ajaxObject.abort() } catch(e){} finally{nl.ajaxObject = null}
nl.ajaxObject = $.ajax({
url: nl.ajaxUrl, //declared before function declaration
type: 'POST',
data: {data: data}
}).done(function(responseText){nl.ajaxSuccess(responseText)
}).fail(function(responseText){nl.ajaxFail(responseText)});
}
nl.ajaxSuccess = function(response){
console.debug(response);
nl.startAjax();
}
nl.ajaxFail = function(response){
//#todo some code here
}
nl.killConnection = function(){
if(nl.ajaxObject != null) try{ nl.ajaxObject.abort() } catch(e){} finally{nl.ajaxObject = null}
console.debug('killing');
}
(more code here)
return nl;
}
init code looks like this
$(document).ready(function(){
var notifications = notificationsObject();
notifications.startAjax({name: 'startup'});
setTimeout(function(){window.onbeforeunload = function(){notifications.killConnection()};}, 1000);
});
and there's also some PHP code:
public function executeUsersNotificationListener(){
ignore_user_abort(false);
ob_end_flush();
$this->getResponse()->setHttpHeader("Cache-Control", "no-cache");
$this->getResponse()->setHttpHeader("Pragma", "no-cache");
$this->getResponse()->setHttpHeader("Expires", 0);
$timeLimit = 30;
set_time_limit($timeLimit+1);
echo 'test';
$i = 0;
while($i++ < $timeLimit){
echo " ";
sleep(1);
}
return sfView::NONE;
}
as you can see above, I did some research and used ignore_user_abort and so on, but it won't work.

PHP bulk processing solution

I'm looking for a PHP component for asynchronous data processing.
Basically what I need is to display a page with a progress bar that's refreshed with javascript which displays the progress on some data processing.
On the backend you'll define your data process limit. This is the start, end and function to call for processing individual items.
There are plenty of solutions for this on CMS and frameworks. I'm looking for something in raw PHP that I can include in my application.
I did something similar not too long ago. I wrote a function that logs the progress to a text file as a JSON object. Then I wrote a PHP function that returns that JSON object to the browser at certain intervals as requested by jQuery.
My PHP code looks similar to this:
function logProgress($task, $status, $progress) {
$basedir = "/var/www/" . SITE_ROOT . "/";
$log_file = $basedir . "logs/progress.log";
$logFileContent = file_get_contents($mrp_log_file);
if($logFileContent){
$logFileArray = json_decode($logFileContent, TRUE);
} else {
$logFileArray = array();
}
$logFileArray[$task]=array('task'=>$task,'status'=>$status,'progress'=>$progress);
$logFile = fopen($log_file, 'w+') or error_log("Failed to open progress file $mrp_log_file for writing");
fwrite($logFile, json_encode($logFileArray));
fclose($logFile);
}
Retrieving the data is as simple as this:
function readProgressLog() {
//Returns a JSON object stored in the progress log.
$basedir = "/var/www/" . SITE_ROOT . "/";
$log_file = $basedir . "logs/progress.log";
$logFileContents = file_get_contents($log_file);
return $logFileContents;
}
From jQuery, you would make two AJAX calls, one to initiate your process, and one to poll the text file. My javascript for the polling call looks like this:
function updateProgress() {
var data = {
action:'getProgressUpdate'};
var settings = {success: function(json){
var done = false;
if(json!=null) {
//Put your code to update the progress bar here.
//I look for a JSON property called Done to flag the process as completed.
if(json.Done==null) {
var t2 = setTimeout("updateProgress()", 1000);
} else {
clearTimeout(t2);
done = true;
clearProgressLog();
}
} else {
var t2 = setTimeout("updateProgress()", 1000);
}
},
data:data,
cache:false,
type: 'POST',
dataType:"json"};
$.ajax('/ajax/polling.ajax.php', settings);
}
One thing I noticed is that you should make sure your polling AJAX call uses a different PHP file than your process AJAX call, otherwise your polling call won't finish until the process call is finished.

How to handle multiple ajax requests

NOTE:
I gave up on trying to do the processing in one go, and just let it return after every x number of sends.
Two paths,
/sms?action=send
/sms?action=status
Let's say that the send path starts sending 10,000 sms messages via REST api calls.
I make a call to that page via ajax.
Then every few seconds, I make a call to /sms?action=status to see how the progress is going, and to update a progress bar.
The status path returns false if no messages are being sent.
What ends up happening is that the ajax call to the SEND path gets the ajax success: function called almost instantly, even though I know the script is taking 1+ minute to complete execution.
My progress bar never gets shown because the status ajax call (which is in a set interval with a few second delay) never seems to actually get called until the send call completes.
I'm trying to put the relevant code in here, but it may not be as clear as it should be without all the context.
<script type="text/javascript">
var smsInterval = 0;
var smsSending = false;
$(document).ready(function() {
var charCount = 0;
var smsText = "";
var smsTotal = <?php echo $options["smsTotal"]; ?>;
<?php if($options["sending"]): ?>
smsStatus();
smsSending = true;
smsInterval = setInterval("smsStatus()", 5000);
<?php endif; ?>
$("span#smsadmin_charcount").html(charCount.toString());
//send button
$("div#smssend").click(function() {
if(smsSending == true) {
return false;
}
smsStatus();
var dataString = $("#smsadmin_form").serialize();
smsSending = true;
$("div#smssend").html("Sending...");
$.ajax({
type: "POST",
url: "<?php echo $base_url; ?>/admin/sms",
data : dataString,
success: function(data) {
},
error: function(request, error) {
$("div.notice.sms").html("ERROR "+error+ "REQUEST "+request);
}
});
});
});
function smsStatus() {
var dataString = "smsaction=status&ajax=true";
$.ajax({
type: "POST",
url: "<?php echo $base_url; ?>/admin/sms",
data : dataString,
success: function(data) {
//data being false here indicates the process finished
if(data == false) {
clearInterval(smsInterval);
var basewidth = $("div.sms_progress_bg").width();
$("div.sms_progress_bar").width(parseInt(basewidth));
$("div.sms_progress_notice").html(parseInt(100) + "% Complete");
smsSending = false;
$("div#smssend").html("Send To <?php echo $options["smsTotal"]; ?> Recipients");
} else {
var pcomplete = parseFloat(data);
$("div.sms_progress_bg").show();
var basewidth = $("div.sms_progress_bg").width();
$("div.sms_progress_bar").width(parseInt(basewidth * pcomplete));
$("div.sms_progress_notice").html(parseInt(pcomplete * 100) + "% Complete");
}
},
error: function(request, error) {
$("div.notice.sms").html("ERROR "+error+ "REQUEST "+request);
}
});
}
I might be missing the point, but inside the $("div#smssend").click you got this line:
smsStatus();
shouldn't it be:
smsInterval = setInterval("smsStatus()", 5000);
and INSIDE the success: function(data) for /admin/sms ?
If the send part is sending out 10k messages, and the status returns true if currently sending a message, and false if in between sending, then you have a design issue.
For example, what is status supposed to be showing?
If status is to show how many of a certain block have been sent, then what you can do is to submit the message to be sent (or addresses), and get back some id for that block.
Then, when you ask for a status, pass the id, and your server can determine how many of that group has been sent, and return back the number that were successful, and unsuccessful, and how many are still pending. If you want to get fancy, you can also give an indication how much longer it may be before finishing, based on how many other requests are also pending.
But, how you approach this really depends on what you expect when you ask for the status.

Using JS setTimeout to post AJAX requests in a loop, but setTimeout gets called far too often

This question has been answered. The problem was that myEventMoveTrainManaul() was being called from other locations within the code. Thanks to everyone who offered their help.
Please forgive me for re-posting this, but it was getting almost no attention and it's very important that I find someone to help me with this. Thank you for your kind understanding.
I have been working on a new feature for a facebook game I have written. The game allows a player to travel between cities in Europe by train and deliver goods for profit. This feature that I'm adding adds pathfinding AI to the game: it allows a player to select a city to travel to, then the game automatically moves the player's train along track from it's starting city to the destination city. I am using AJAX and setTimeout() to get the data from the backend and to enable the movement of the train along the track that connects cities. Please refer to the code which will (hopefully) contain a better understanding of what I am attempting to do.
The problem is that setTimeout() gets called too often. I put a global variable called statusFinalDest which may contain two values: ENROUTE and ARRIVED. While the train is ENROUTE, the JS train movement function calls itself using setTimeout until the backend returns a statusFinalDest of ARRIVED, at which time the train movement timeout loop is (supposedly) terminated. However, instead of calling myEventMoveTrainManual() once for each turn the backend processes, it gets called exceedingly more often, as if it is not recognizing the changed state of statusFinalDest. I have attempted to put more limiting structures into the code to put an end to this excessive behavior, the they don't appear to be working.
FYI - myEventMoveTrainManual() is not an event handler, but it does get called from an event handler.
Here's the relevant FBJS (Facebook JS) code:
function myEventMoveTrainManual(evt) {
if(mutexMoveTrainManual == 'CONTINUE') {
//mutexMoveTrainManual = 'LOCKED';
var ajax = new Ajax();
var param = {};
if(evt) {
var cityId = evt.target.getParentNode().getId();
var param = { "city_id": cityId };
}
ajax.responseType = Ajax.JSON;
ajax.ondone = function(data) {
statusFinalDest = data.status_final_dest;
if(data.code != 'ERROR_FINAL_DEST') {
// Draw train at new location
trackAjax = new Ajax();
trackAjax.responseType = Ajax.JSON;
trackAjax.ondone = function(trackData) {
var trains = [];
trains[0] = trackData.train;
removeTrain(trains);
drawTrack(trackData.y1, trackData.x1, trackData.y2, trackData.x2, '#FF0', trains);
if(data.code == 'UNLOAD_CARGO') {
unloadCargo();
} else if (data.code == 'MOVE_TRAIN_AUTO' || data.code == 'TURN_END') {
moveTrainAuto();
} else {
/* handle error */
}
mutexMoveTrainManual = 'CONTINUE';
}
trackAjax.post(baseURL + '/turn/get-track-data');
}
}
ajax.post(baseURL + '/turn/move-train-set-destination', param);
}
// If we still haven't ARRIVED at our final destination, we are ENROUTE so continue
// moving the train until final destination is reached
// statusFinalDest is a global var
if(statusFinalDest == 'ENROUTE') {
setTimeout(myEventMoveTrainManual, 1000);
}
}
And here is the backend PHP code:
public function moveTrainSetDestinationAction() {
require_once 'Train.php';
$trainModel = new Train();
$userNamespace = new Zend_Session_Namespace('User');
$gameNamespace = new Zend_Session_Namespace('Game');
$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender();
$trainRow = $trainModel->getTrain($userNamespace->gamePlayerId);
$statusFinalDest = $trainRow['status_final_dest'];
if($statusFinalDest == 'ARRIVED') {
$originCityId = $trainRow['dest_city_id'];
$destCityId = $this->getRequest()->getPost('city_id');
if(empty($destCityId)) {
// If we arrived at final dest but user supplied no city then this method got called
// incorrectly so return an error
echo Zend_Json::encode(array('code' => 'ERROR_FINAL_DEST', 'status_final_dest' => $statusFinalDest));
exit;
}
$gameNamespace->itinerary = $this->_helper->getTrainItinerary($originCityId, $destCityId);
array_shift($gameNamespace->itinerary); //shift-off the current train city location
$trainModel->setStatusFinalDest('ENROUTE', $userNamespace->gamePlayerId);
$statusFinalDest = 'ENROUTE';
}
$cityId = $trainRow['dest_city_id'];
if($trainRow['status'] == 'ARRIVED') {
if(count($gameNamespace->itinerary) > 0) {
$cityId = array_shift($gameNamespace->itinerary);
}
}
$trainRow = $this->_helper->moveTrain($cityId);
if(count($trainRow) > 0) {
if($trainRow['status'] == 'ARRIVED') {
// If there are no further cities on the itinerary, we have arrived at our final destination
if(count($gameNamespace->itinerary) == 0) {
$trainModel->setStatusFinalDest('ARRIVED', $userNamespace->gamePlayerId);
$statusFinalDest = 'ARRIVED';
}
echo Zend_Json::encode(array('code' => 'UNLOAD_CARGO', 'status_final_dest' => $statusFinalDest));
exit;
// Pass id for last city user selected so we can return user to previous map scroll postion
} else if($trainRow['track_units_remaining'] > 0) {
echo Zend_Json::encode(array('code' => 'MOVE_TRAIN_AUTO', 'status_final_dest' => $statusFinalDest));
exit;
} else { /* Turn has ended */
echo Zend_Json::encode(array('code' => 'TURN_END', 'status_final_dest' => $statusFinalDest));
exit;
}
}
echo Zend_Json::encode(array('code' => 'MOVE_TRAIN_AUTO_ERROR'));
}
Based on #brad's suggestion, I have modified myEventMoveTrainManual() as follows:
function myEventMoveTrainManual(evt) {
//debugger;
if(mutexMoveTrainManual == 'CONTINUE') {
//mutexMoveTrainManual = 'LOCKED';
//statusFinalDest = 'ARRIVED';
var ajax = new Ajax();
var param = {};
if(evt) {
var cityId = evt.target.getParentNode().getId();
var param = { "city_id": cityId };
}
ajax.responseType = Ajax.JSON;
ajax.ondone = function(data) {
statusFinalDest = data.status_final_dest;
//debugger;
consoleLog('statusFinalDest='+statusFinalDest+', data.code='+data.code);
if(data.code != 'ERROR_FINAL_DEST') {
consoleLog('data.code != ERROR_FINAL_DEST');
// Draw train at new location
trackAjax = new Ajax();
trackAjax.responseType = Ajax.JSON;
trackAjax.ondone = function(trackData) {
consoleLog('drawing track');
var trains = [];
trains[0] = trackData.train;
removeTrain(trains);
drawTrack(trackData.y1, trackData.x1, trackData.y2, trackData.x2, '#FF0', trains);
consoleLog('processing data.code = '+data.code);
if(data.code == 'UNLOAD_CARGO') {
unloadCargo();
consoleLog('returned from unloadCargo()');
} else if (data.code == 'MOVE_TRAIN_AUTO' || data.code == 'TURN_END') {
moveTrainAuto();
consoleLog('returned from moveTrainAuto()');
/*
} else if (data.code == 'TURN_END') {
consoleLog('moveTrainManual::turnEnd');
turnEnd();
*/
} else {
/* handle error */
}
mutexMoveTrainManual = 'CONTINUE';
// If we still haven't ARRIVED at our final destination, we are ENROUTE so continue
// moving the train until final destination is reached
if(statusFinalDest == 'ENROUTE') {
myEventMoveTrainManual(null);
}
}
trackAjax.post(baseURL + '/turn/get-track-data');
}
}
ajax.post(baseURL + '/turn/move-train-set-destination', param);
}
// If we still haven't ARRIVED at our final destination, we are ENROUTE so continue
// moving the train until final destination is reached
//if(statusFinalDest == 'ENROUTE') {
// clearTimeout(timerId);
// timerId = setTimeout(myEventMoveTrainManual, 1000);
//}
}
However, the original problem still manifests: myEventMoveTrainManual() gets called too many times.
you need your setTimeout to be within the callback of your ajax call (ajax.onDone if I'm reading this correctly)
I'm assuming you want your ajax call to be called again only after the first call has completed. Currently, this code will execute your function once a second, unconcerned with the pending asynchronous calls.
Is that what you want? Or do you want it to be executed one second after your ajax returns? If the latter, put your setTimeout within that callback and you'll only get the next request 1s after your ajax returns.
edit with adjusted example:
I still don't see your setTimeout within the ajax call. Here's some pseudo code and an explanation:
function myFunc(){
var ajax = new Ajax();
ajax.onDone = function(data){
// do some stuff here (ie modify mutex)
// now trigger your setTimeout within this onDone to call myFunc() again:
setTimeout(myFunc,1000);
}
ajax.post("someURL")
}
explanation
Here's what happens, you call myFunc(), it instantiates your ajax object and makes the call. When that ajax returns, you do whatever you want to do, then call myFunc() again (the setTimeout) after x amount of milliseconds (inside onDone). This instantiates your ajax object and makes the call...
I am not sure of the code but, but problem seems like this:
You are checking if statusFinalDest == 'ENROUTE' at the client side, which does not work.
Place a timer based counter on the server side before setting the global value to ENROUT and not setting it every time ie set 1 sec delay in setting the value also, as any client side method would get overridden by a fresh copy of js code.
Your Ajax-calls are asynchronous. I think even if the back end is ready, the response needs some time to get back to the client. Meanwhile the client sends more Ajax-requests.
(edit: Your changes approve that this is not the problem)
it seems that you registered an event listener for a DOM-event like mouse-click, because you are checking the evt-argument.Please post the code of your event handler and the part of the code, where you register the event.
Who says that there are too much calls? I can't see count-variables in the server/client scripts; Note that log-items are sometimes added very late to the console, they are not a indicator to my eyes.I think it's very important to know your indicators!

Categories