filemtime alternative for MySQL - php

Question

I'm playing a bit around with push notifications, and want to update a page whenever there's a change in the database.
I have this from http://www.screenr.com/SNH:
<?php
$filename = dirname(__FILE__).'/data.php';
$lastmodif = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
$currentmodif = filemtime($filename);
while ($currentmodif <= $lastmodif) {
usleep(10000);
clearstatcache();
$currentmodif = filemtime($filename);
}
$response = array();
$response['msg'] = file_get_contents($filename);
$response['timestamp'] = $currentmodif;
echo json_encode($response);
?>
My data.php is a script getting data from a JSON file:
<script>function itnews_overview() {
$.getJSON('/ajax.php?type=itnews_overview', function(data) {
$.each(data.data, function(option, type) {
$('.bjqs').append('<li><span class="date">'+ type.submitted +'<br />'+ type.time +'</span><h2>' + type.title + '</h2><p>' + type.content + '</p></li>');
});
});
}
</script>
<script>
itnews_overview();
</script>
<div id="news">
<ul class="bjqs"></ul>
</div>
UPDATE: Code from index.php:
<script type="text/javascript">
var timestamp = null;
function waitForMsg() {
$.ajax({
type: "GET",
url: "getData.php?timestamp=" + timestamp,
async: true,
cache: false,
success: function(data) {
var json = eval('(' + data + ')');
if(json['msg'] != "") {
$(".news").html(json['msg']);
}
timestamp = json['timestamp'];
setTimeout('waitForMsg()',1000);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
setTimeout('waitForMsg()',15000);
}
});
}
$(document).ready(function(){
waitForMsg();
});
</script>
As this file isn't saved when I add something to the database, filemtime won't work — is there another way I can check if new rows has been added to the table?
UPDATE: Trying to solve this with SSE.
I have two files, index.php and send_sse.php (inspiration from http://www.developerdrive.com/2012/03/pushing-updates-to-the-web-page-with-html5-server-sent-events/)
index.php:
<div id="serverData">Content</div>
<script type="text/javascript">
//check for browser support
if(typeof(EventSource)!=="undefined") {
//create an object, passing it the name and location of the server side script
var eSource = new EventSource("send_sse.php");
//detect message receipt
eSource.onmessage = function(event) {
//write the received data to the page
document.getElementById("serverData").innerHTML = event.data;
};
}
else {
document.getElementById("serverData").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
}
</script>
send_sse.php:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$url = "content.json";
$str = file_get_contents($url);
$data = json_decode($str, TRUE);
//generate random number for demonstration
//echo the new number
echo "data: " . json_encode($data);
ob_flush();
?>
This, however, doesn't seem to work, which is probably because SSE needs plain text data. I just can't figure out how to do that and then wrap that content in a couple of HTML tags.
UPDATE: Okay, so now it's sort of working with SSE, thanks to VDP. I have the following:
$sql= "SELECT title, content, submitted FROM `flex_itnews` where valid = 1 order by submitted desc";
$query= mysql_query($sql);
setlocale(LC_ALL, 'da_DK');
while($result = mysql_fetch_array($query)){
echo "data: <li><span class='date'>". strftime('%e. %B', strtotime($result['submitted'])) ."<br />kl. ". strftime('%H.%M', strtotime($result['submitted'])) ."</span><h2>" . $result['title']. "</h2><p>" . $result['content'] ."</p></li>\n";
}
However, when I add anything new, it just echoes data: data: data. If I refresh the page, it displays correctly.
UPDATE: Using livequery plugin:
<script>
var source = new EventSource('data2.php');
source.onmessage = function (event) {
$('.bjqs').html(event.data);
};
$('#news').livequery(function(){
$(this).bjqs({
'animation' : 'slide',
'showMarkers' : false,
'showControls' : false,
'rotationSpeed': 100,
'width' : 1800,
'height' : 160
});
});
</script>
UPDATE: Trying to use delegate()
<script>
$("body").delegate(".news", "click", function(){
$("#news").bjqs({
'animation' : 'slide',
'showMarkers' : false,
'showControls' : false,
'rotationSpeed': 100,
'width' : 1800,
'height' : 160
});
var source = new EventSource('data2.php');
source.onmessage = function (event) {
$('.bjqs').append(event.data);
};
});
</script>

Answer 1

Yes! There are multiple (better) ways:
websocket (the best solution but not supported on older or mobile browsers)
Server sent events (SSE) (sort of polling but optimized just for the task you ask for)
Long polling (like you are doing)
Flash sockets
other plugin based socket stuff
ajax polling
I've posted another answer with examples about it before
I listed several transport methods. websockets being the ideal (because it's the only 2 way communication between server and client), SSE being my second choice. You won't need the $.getJSON method. The overall idea will be the same.
On the server side (php in your case) you query your database for changes. You return the data as JSON (json_encode(data) can do that). On the client side you decode the JSON (JSON.parse(data) can do that). With the data you received you update your page.
Just the polling like you where doing causes more overhead because you are doing lots of request to the server.
SSE is more "I want to subscribe to a stream" and "I want to stop listening". => less overhead
Websockets is more: "I set up a connection. I talk server listens. Server talks client listens" A full duplex connection. => least overhead
SSE Code example
The page the client goes to (for example index.html or index.php)
It's just a normal html page containing this javascript:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
//javascript:
var source = new EventSource('data.php');
source.onmessage = function (event) {
//here you do the stuff with the received messages.
//like log it to the console
console.log(event.data);
//or append it to div
$('#response').append(event.data);
};
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
The 'data.php' page:
<?php
/* set the header first, don't echo/print anything before this header is set! Else the default headers will be set first then this line tries to set the headers and results in an error because the header is already set. */
header("Content-Type: text/event-stream\n\n");
//query the database
$sql= "SELECT COUNT(*) FROM `messages`";
$query= mysql_query($sql);
$result = mysql_fetch_array($query);
$count = $result[0];
//return the data
echo "data: " . $count. "\n";
?>
So you only need those 2 pages.
UPDATE:
I had only seen your comments not the updates.. sorry ;)
if you use .delegate() you shouldn't use body but try a selector as high up the tree as possible (.bjqs in your case).
In you're case you don't even need live,delegate,on or all that! Just apply the bjqs again afther the content is updated.
var source = new EventSource('data2.php');
source.onmessage = function (event) {
$('.bjqs').html(event.data);
$("#news").bjqs({
'animation' : 'slide',
'showMarkers' : false,
'showControls' : false,
'rotationSpeed': 100,
'width' : 1800,
'height' : 160
});
};
This will give you issues too because you are constantly re-initializing bjqs and it isn't written to handle dynamically updating content. What you can do is send only data (with php) if there is new data. Check if the call returns empty, if not update:
var source = new EventSource('data2.php');
source.onmessage = function (event) {
if(event.data !=""){
$('.bjqs').html(event.data);
$("#news").bjqs({
'animation' : 'slide',
'showMarkers' : false,
'showControls' : false,
'rotationSpeed': 100,
'width' : 1800,
'height' : 160
});
}
};

Answer 2

You can count number of rows in a table, and than check if the number of rows is changed.

Answer 3

Without digging into your code too much im answering the question in the title:
add last modified column to your table, this has a built in mysql trigger that updates whenever the row is added or changes:
ALTER TABLE `yourTable`
ADD COLUMN `last_modified` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
ADD INDEX (`last_modified`);
and then query it like,
SELECT * FROM yourTable where last_modified > ?
("?" is the pdo placeholder you replace with last queried timestamp)