Check for database change with SSE - php

Trying to create a small notification system. When user fills out the profile then his verification status is set to 1 in database and then I would like to show a notification once that "hey you are now verified". Been searching a lot on the internet, but nothing has helped me to reach my goal. If the status is 1 in database I get the Event: verification_ok in the test.php but if it is 0 I get Maximum execution time of 120 seconds exceeded. Also I don't see any response in my client side code.
This is the server side code (test.php).
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header("Connection: Keep-alive");
require_once $_SERVER['DOCUMENT_ROOT'].'/PHP/scripts/no_session_redirect.php';
$key = true;
$ver = $user_home->runQuery("SELECT verification_status FROM verification WHERE user_id=:user_id");
$ver->execute(array(":user_id"=>$user_id));
$status = $ver->fetch(PDO::FETCH_ASSOC);
while($key){
if($status["verification_status"] == 1){
pushNotification($status["verification_status"]);
$key = false;
}else{
$status["verification_status"];
sleep(10);
}
}
function pushNotification() {
echo "Event: verification_ok\n";
}
And here is the client side code:
$(document).ready(function() {
if (typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
var source = new EventSource("test.php");
source.addEventListener("verification_ok", function(e) {
console.log(e.data);
}, false);
source.addEventListener("open", function(e) {
}, false);
source.addEventListener("error", function(e) {
if (e.readyState == EventSource.CLOSED) {
console.log("Error - connection was lost.");
}
}, false);
} else {
// Sorry! No server-sent events support..
}
});

Related

SSE echo from PHP duplicating at random intervals

I'm trying to set up a PHP server send event, which works okay. But at random intervals it is pushing the same data repeatedly.
Here's a quick scenario to clarify what I'm describing: Let's say I insert a db record at 1:00:00. The record's data is pushed as it should. However, at 1:03:00 that record's data is pushed a second time. Then at 1:03:17, it is pushed again. And I now have 3 instances of the record displayed.
Why is this happening, and why at random intervals?
I increased php execution time, but the issue is still occurring.
In the browser console, I'm getting this error: net::ERR_INCOMPLETE_CHUNKED_ENCODING.
I have this for client side:
<script>
var source = new EventSource('pdo_updates.php');
var pdo_updates;
source.onmessage = function(e) {
pdo_updates = e.lastEventId + '' + e.data + '<br>';
document.getElementById("videoID").innerHTML += pdo_updates;
};
evtSource.close();
</script>
And this for server side:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0');
function send_msg($id, $msg) {
echo "data: $msg" . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
$last_event_id = floatval(isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? $_SERVER["HTTP_LAST_EVENT_ID"] : False);
if ($last_event_id == 0) {
$last_event_id = floatval(isset($_GET["lastEventId"]) ? $_GET["lastEventId"] : False);
}
$last_id = 0;
try {
$conn = new PDO('mysql:host=localhost;dbname=my_db', $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
while(1) {
$id = $last_event_id != False ? $last_event_id : $last_id;
$stmt = $conn->prepare("SELECT id, message FROM messages WHERE id > :id ORDER BY id DESC LIMIT 1");
$result = $stmt->execute(array('id' => $id));
$stmt->bindValue('id', $id);
if ($result) {
while($data = $stmt->fetch(PDO::FETCH_ASSOC)) {
if ($data) {
send_msg($data['id'], $data['message']);
$last_id = $data['id'];
}
}
}
sleep(1);
}
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
So, after trying just about every keepalive related header, and every apache timeout adjustment config, I ended up running a packet capture. I discovered there was a TCP reset was being triggered by the remote end. I have my site behind Cloudflare, and once I disabled Cloudflare the issue partially disappeared. The TCP session was being refreshed every 100 seconds and would cause the last message to appear again when that happened. This was responsible for the browser console error: net::ERR_INCOMPLETE_CHUNKED_ENCODING
At the same time, however, there was an issue in my submit code. But I'm not 100% sure why.
$.ajax({
type: "POST",
url: url,
data: $("#submitmessage").serialize(), // serializes the form's elements.
success: function(data)
{
$("#myvideo").val("");
}
});
I needed to clear the value in my input field after submit. I haven't had any duplicates since.

Server sent events hangs the browser

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>SSE</title>
<script type="text/javascript">
if (!!window.EventSource) {
var source = new EventSource("sse.php");
} else {
alert("Your browser does not support Server-sent events! Please upgrade it!");
}
source.addEventListener("message", function(e) {
console.log(e.data);
if(e.data){
x = document.getElementById("timer");
x.innerHTML=e.data;
console.log(e.data);
}else{
console.log(e.data);
e.close();
}
}, false);
source.addEventListener("open", function(e) {
console.log("Connection was opened.");
}, false);
source.addEventListener("error", function(e) {
console.log("Error - connection was lost."+e);
}, false);
</script>
</head>
<body>
<div id="timer"></div>
</body>
</html>
My Server Side Code
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Connection: keep-alive");
$lastId = 0;
while (true) {
$data =10;
if ($data) {
sendMessage($lastId, $data);
$lastId++;
$data--;
}else{
exit;
}
}
function sendMessage($id, $data) {
//echo "id: $id\n";
echo "$data\n\n";
ob_flush();
flush();
}
?>
What is wrong with my code? Please let me know.
SERVER-SIDE: normally this kind of demo has a sleep between sending each message. What it will do, as it stands, is send 10 packets out in the space of 10ms (or something).
So, the client will get them all at almost the same time, and you will see just the "1" in your timer <div>.
CLIENT-SIDE: It looks okay. It'd be useful to have seen what is being logged to console though. (Probably 10, 10, 9, 9, .., 1, 1, 10, 10, 9, 9, ... repeating forever - see next bit.)
BOTH: I think what will happen when you exit is that the socket will close, the browser will detect that and reconnect. Giving you the same sequence again!
Putting that altogether, change your server-side code main loop to something like:
while (true) {
$data =10;
if ($data) {
sendMessage($lastId, $data);
$lastId++;
$data--;
}else{
sendMessage($lastId, "0");
sleep(1); //Give client time to deal with it.
break;
}
sleep(1); //1 sec between messages
}
I.e. send an explicit "0" to tell the client to disconnect.
Then on the client-side, look out for that explicit close code. (Actually I'd go with "END" or something, as "0" is too easy to evaluated as boolean false!)
source.addEventListener("message", function(e) {
console.log(e.data);
if(e.data==="0")e.close();
else if(e.data){
x = document.getElementById("timer");
x.innerHTML=e.data;
}
//else do nothing
}, false);

force-download xlsx from ajax response not working

I have this little problem with downloading my xlsx-file.
I am sending my request for the file over jquery Ajax and on the backend the data is correctly collected and assembled to a xlsx-file. So now on its way back to the frontend i am setting all the headers in preparation to force download the file, but the download never starts.
These are the response headers of my request:
Connection Keep-Alive
Content-Disposition attachment; filename="export.xlsx"
Content-Length 346420
Content-Type application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
Date Mon, 23 Nov 2015 13:23:30 GMT
Keep-Alive timeout=5, max=91
Server Apache/2.4.16 (Win32) OpenSSL/1.0.1p PHP/5.6.12
Set-Cookie <cookiesettings>
content-transfer-encoding binary
x-powered-by PHP/5.6.12
imho the download should start immediately, but nothing happens.
EDIT:
Until now I used a form submit, but the data amount is really big so the time which is needed to assemble the file is also really long and sometimes a couple of minutes or even an hour, so this was no longer possible.
So I built a java-job to build the file and startet an ajax snippet which asks for completion every second or so.
So here is my Code.
Frontend:
This is called on button-click
download: function (type, maximum) {
var
self = this,
oParams = this.oTable.oApi._fnAjaxParameters(this.oTable.fnSettings()),
aoPost = [
{ 'name': 'exportType', 'value': type },
{ 'name': 'exportMax', 'value': maximum },
{ 'name': 'handleId', 'value': self.options.handleId }
],
nIFrame, nContentWindow, nForm, nInput, i
;
// Call a self made function to get extra search parameters
// without call an data update AJAX call.
self.oTable.fnSettings().addAdditionalSearchData(oParams);
// Create an IFrame to do the request
nIFrame = document.createElement('iframe');
nIFrame.setAttribute('id', 'RemotingIFrame');
nIFrame.style.border = '0px';
nIFrame.style.width = '0px';
nIFrame.style.height = '0px';
document.body.appendChild(nIFrame);
nContentWindow = nIFrame.contentWindow;
nContentWindow.document.open();
nContentWindow.document.close();
nForm = nContentWindow.document.createElement('form');
nForm.className = 'export-table';
nForm.setAttribute('method', 'post');
// Add POST data.
var formData = {};
for (i = 0; i < aoPost.length; i++) {
nInput = nContentWindow.document.createElement('input');
nInput.setAttribute('name', aoPost[ i ].name);
nInput.setAttribute('type', 'text');
nInput.value = aoPost[ i ].value;
nForm.appendChild(nInput);
formData[aoPost[ i ].name] = aoPost[ i ].value;
}
// Add dataTables POST.
for (i = 0; i < oParams.length; i++) {
nInput = nContentWindow.document.createElement('input');
nInput.setAttribute('name', oParams[ i ].name);
nInput.setAttribute('type', 'text');
nInput.value = oParams[ i ].value;
nForm.appendChild(nInput);
formData[oParams[ i ].name] = oParams[ i ].value;
}
nForm.setAttribute('action', '/service/exportTableData');
// Add the form and the iFrame.
nContentWindow.document.body.appendChild(nForm);
// Send the request.
//nForm.submit();
// Send the request.
var form = $(nContentWindow.document.body).find('form.export-table');
var jobId = 0;
form.ajaxForm(
{
'showMessagesOnSuccess': false
},
{
'getData': function () {
return formData;
}
}
).data('ajaxForm').submit();
}
The Ajax request on submit:
$.ajax({
type: 'POST',
url: self.handler.getServiceUrl(),
timeout: GLOBALS.AJAX_REQUEST_TIMEOUT,
cache: false,
data: (<get the Data>)
,
success: function (response) {
if (response.success === true) {
// Check if we have to wait for a result.
if (response.jobId !== undefined && response.jobId !== 0) {
self.checkJobStatus(response.jobId);
} else {
<success - show some messages>
}
} else {
self.handler.error(response);
}
},
error: function () {
<Show error Message>
}
});
The CheckJobStatus:
checkJobStatus: function (jobId) {
var self = this;
$.ajax({
type: 'POST',
timeout: GLOBALS.AJAX_REQUEST_TIMEOUT,
cache: false,
data: { 'jobId': jobId },
url: self.handler.getServiceUrl(),
success: function (response) {
if(response !== null && response.data !== undefined) {
if (response.data.isFinished === true) {
if (response.success === true) {
// Check if we have to wait for a result.
self.handler.success(response);
} else {
self.handler.error(response);
}
} else if (response.success === true && response.data !== null) {
setTimeout(
function () {
self.checkJobStatus(jobId);
},
500
);
} else {
Helper.logFrontendError();
}
} else if (response !== null && response.success === true) {
setTimeout(
function () {
self.checkJobStatus(jobId);
},
1000
);
} else {
Helper.logFrontendError();
}
},
error: function (response) {
Helper.logFrontendError();
}
});
}
Backend - php:
(...)
if ($action == 'exportTableData' || $action == 'exportChartData') {
$responseData = $service->execute();
if(isset($responseData->data['contentType']) && $responseData->data['contentType'] != null && isset($responseData->data['data'])) {
$this->sendTextData($responseData->data['contentType'], $responseData->data['data']);
} else {
$this->sendJsonData($responseData);
}
} else {
$this->sendJsonData($service->execute());
}
(...)
private function sendTextData($contentType, $data) {
$this->set('filename', 'export.xlsx');
$this->set('data', $data);
$this->response->type($contentType);
$this->render('/Layouts/excel', 'excel');
}
(...)
$handlerResult = new HandlerResult();
if($dataServiceResult == null) {
$service = new DataService();
$dataServiceResult = $service->exportTableData(
$controller->Auth->User('id'),
json_encode($request->data),
null
);
} else {
if ($dataServiceResult->header->resultKey == 0) {
$handlerResult->wsData['data'] = $dataServiceResult->data;
$handlerResult->wsData['contentType'] = $dataServiceResult->contentType;
}
}
$handlerResult->wsResultHeader = $dataServiceResult->header;
return $handlerResult; // ++++ this result returns to the first codeblock in this section ++++
Backend - java - This is where the File is assembled:
(...)
if (jobId > 0) {
FrontendJobStatus status = FrontendJobQueue.getJobStatus(context.userId, jobId);
this.result = (WSExportTableDataResult) status.getResult();
logger.info((this.result.data == null) ? "ByteArray is EMPTY" : "ByteArray is NOT EMPTY");
} else {
this.jobId = FrontendJobQueue.addJob(this.context.userId, new ExportTableDataJob(this.context, this.postData));
this.result.header.jobId = this.jobId;
}
(...)
The Jop:
<Workbook assembly>
ByteArrayOutputStream out = new ByteArrayOutputStream();
wb.write(out);
this.result.data = out.toByteArray();
this.result.contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
// this.result.contentType = "application/vnd.ms-excel";
this.result.setResultHeader(APIConstants.RESULT_SUCCESS);
Layout/excel:
<?php
header('Content-Disposition: attachment; filename="'.$filename.'"');
header('Content-Transfer-Encoding: binary');
ob_clean();
echo $data;
EDIT 2:
So I tried to open a new window on success with the Data, and i could start the download, but the file ist no valid xlsx File anymore.
var reader = new FileReader();
var blob = new Blob([response.responseText], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
reader.readAsDataURL(blob);
reader.onloadend = function (e) {
window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no', '_blank');
}
Any Ideas?
After a lot of research i found this site and the essence of its statment is that jquery ajax does not support receiving binary data, but provides a solution for implementing plain xhr request which support blob transfer.
The Site:
http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/
To expand on my comment, instead of trying to send back binary data via ajax, simply save to a temp file , send the file reference back to js. On receiving the file reference, simply set window.location.href to point to a filereading endpoint, passing the file reference. I have done this a few times and it works fine even on ancient browsers:
$('#start').click(function(){
$.post('/createfile.php', {some:data}, function(response){
if(response.started){
pollFile(response.fileId);
}
});
);
function pollFile(fileId){
$.get('/filestatus.php?fileid=' + fileId, function(response){
if(response.fileCompleted){
window.location.href = '/downloadfile.php?fileid=' + fileId;
}else{
setTimeout('pollFile', 5000, fileId);
}
});
}
//createfile.php
$fileId = uniqid();
SomePersistentStorage::addJob($fileID);
//start file job here, code should run in a seperate process/thread, so
//either use a job queue system, use shell_exec or make an http request,
//then once job is queued/started:
header('Content-Type: application/json');
echo json_encode(['started'=>true, 'fileId'=>$fileId]);
//processjob.php - the file that does the work, could be your java
//program for example, just using php here for consistency
//after file is done
file_put_contents($filepath, $data);
SomePersistentStorage::updateJob($fileID, true);
//filestatus.php
$fileId = $_GET['fileid'];
header('Content-Type: application/json');
echo json_encode(['fileCompleted'=>SomePersistentStorage::isJobCompleted($fileID)]);
//downloadfile.php
$fileId = $_GET['fileid'];
$filepath = 'tmp/' . $fileId . '.tmp';
//correct headers here, then
readfile($filepath);
unlink($filepath);
If you dont want to imediatly delete the file, then you could just run a cron to delete files in the specific folder, that are older than x.

PHP/JQuery - Send data to a client from another client

I'm building a person to person chat, and want person A's page to refresh, loading new messages from Person B when Person B sends them. How would I send a message/data to Person A when Person B sends a message via PHP? I know I can check on Person A's page via Ajax, but constantly running a MySQL query would drastically bring down the server's speed. Any ideas?
EDIT: Using Server Sent Events, here's my script code:
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("update.php?user=<? echo $recip ?>");
source.onmessage = function(event) {
document.write(event.data);
if (event.data=="yes"){
window.location.href="/chat?with=<? echo $recip ?>";
}
};
} else {
document.getElementById('info-text').innerHTML="Hmm... looks like your browser doesn't support auto updating. Please refresh the page to check for new messages." //'
}
And here's my PHP code:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$user=$_GET['user'];
$sql=mysql_query("SELECT * FROM chatmsg WHERE sender='$myusername' AND receiver='$recip' OR sender='$recip' AND receiver='$myusername'");
$newrows=mysql_num_rows($sql);
if ($newrows!=$_SESSION['chat'.$user]) {
echo "data: yes";
flush();
}
else {
echo "data: no";
flush();
The problem is, nothing is happening when there's a new row in MySQL.
I found the solution, everyone. I still used the Server Sent Events, but made some changes and found the error. Here's the final working code:
PHP:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header("Access-Control-Allow-Origin: *");
$user=$_GET['user'];
$sql=mysql_query("SELECT * FROM chatmsg WHERE sender='$myusername' AND receiver='$user' OR sender='$user' AND receiver='$myusername'");
$newrows=mysql_num_rows($sql);
if ($newrows!==$_SESSION['chat'.$user]) {
$msg="yes";
}
else {
$msg="no";
}
echo "data: {$msg}\n\n";
flush();
sleep(10);
(sleep is to save server resources).
JS:
var source = new EventSource('update.php?user=<? echo $recip ?>');
source.onmessage = function(e) {
if (e.data=="yes") {
window.location.href="viewchat.php?viewer=<? echo $viewer ?>&recip=<? echo $recip ?>";
}
}

Incorporating jquery UI progress bar for long running PHP process

I'm working on a chat log manager - I wanted more control over Thunderbird's chat log archives. There's a synch functionality that basically parses the log files and uploads the messages to a database, zips the logs and stores them in an archive folder.
This process takes a long time to run, and I'd like to display a progress bar. I'm using both jQueryUI and Bootstrap - so a solution that would utilize either of these would be acceptable.
I've tried implementing both of these to no avail so far. The progress bar doesn't show up, and there's no way for me to tell if it's being incremented or not.
I've pasted the code I've got so far. Any help would be appreciated... I have basic knowledge of CSS and my knowledge of javascript is limited at best.
HTML Head
<script>
function UpdatePBar(x){
$( "#progressbar" ).progressbar( "value", x );}
</script>
HTML Body
<div id="progressbar"></div>
Synch process PHP
if(count($this->Contacts) > 0)
{
//GET CONTACTS ALIASES
$result = $this->GetContacts_aliases($folderPath);
if($result) {
echo '<script>UpdatePBar(10)</script>';
flush();
//SYNCH CONTACTS
$result = $this->synch_Contacts();
echo '<script>UpdatePBar(20)</script>';
flush();
if ($result) {
//SYNCH MESSAGES
$result = $this->synch_Messages($folderPath);
echo '<script>UpdatePBar(50)</script>';
flush();
if ($result) {
//SYNCHING SUCCESSFULLY COMPLETED
$log = "Synching of Messages Complete without errors. <br><br>";
$this->log = $this->log . $log;
//UPDATE LAST SYNCHED
$result = $this->UpdateLastSynched();
echo '<script>UpdatePBar(70)</script>';
flush();
if (!$result) {
//Update lastSynched failed
$log = "Updating lastSynched failed! <br><br>";
$this->log .= $log;
} else {
$log = "Updated Last Synched date stamp without errors <br><br>";
$this->log .= $log;
//ARCHIVE LOGS
$result = $this->ArchiveLogs($folderPath);
echo '<script>UpdatePBar(100)</script>';
flush();
if ($result) {
$log = "Archiving of log files successful!<br><br>";
$this->log .= $log;
} else {
$log = "Archiving of log files unsuccessful.<br><br>";
$this->log .= $log;
}
}
} else {
...
Thank you for your time
I think you should do that trough recursive ajax calls.
create a file on php that returns the percentage;
Example: getPercentage.php
<?
//do your stuff
echo $PERCENTAGE;
?>
Then on jquery:
<script>
readPHP();
function readPHP () {
var file="getPercentage.php";
$.ajax({
url: file,
cache: false,
success: function (data , status ) {
percentage=data;
if (percentage < 100)
{
$("#progressbar").progressbar({
value:percentage
})
setTimeout(readPHP(),1000);
}
else
{
$("#progressbar").progressbar({
value:percentage
})
}
}
})
}
</script>

Categories