I have found a lot of information how long polling works
- Comet tutorial: http://www.screenr.com/SNH
- A thred in stackoverflow: simple Long polling example
And more..
So I tried to make one of my own, but I can't get grasp the backend of it, the php part.
Heres is my html/jquery/ajax:
<!DOCTYPE html>
<html>
<head>
<title>Arduino event poller</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type = "text/css" media="screen">
body{ font:13px/1.5 "helvetica neue", helvetica, arial, san-serif; background:#FFF; }
#main{ width:430px; height: 300px; display:block; padding:10px 0; float: left; overflow: auto;}
.event { display:block; background: #ececec; width:380px; padding:10px; margin:10px; overflow:hidden; text-align: left; }
.event img { display:block; float:left; margin-right:10px; }
.event p { font-weight: bold; }
.event img + p { display:inline; }
.patient-name { display:inline; color: #999999; font-size: 9px; line-height:inherit; padding-left: 5px; }
.event-text{ color: #999999; font-size: 12px; padding-left: 5px; }
.event-timestamp{ color: #000; padding-left: 5px; font-size: 9px;}
</style>
<script type="text/javascript" charset="utf-8">
/* Simple helper to add some divs.*/
function addevents(patientroom, patientname, eventtyp, timestamp)
{
$("#main").append(
"<div class='event'>"
"<p>" + patientroom + "</p>"
"<p class='patient-name'>" + patientname + "</p>"
"<p class='event-text'>" + eventtyp + "</p>"
"<p class='event-timestamp'>" + timestamp + "</p>"
"</div>"
);
}
/*This requests the url "getevents.php" When it complete*/
function waitForEvents()
{
$.ajax({
type: "GET",
url: "getevents.php",
async: true, /* If set to non-async, browser shows page as "Loading.."*/
cache: false,
timeout:50000, /* Timeout in ms */
success: function(patientroom, patientname, eventtyp, timestamp) /* called when request to getevents.php completes */
{
addevents(patientroom, patientname, eventtyp, timestamp);
setTimeout(
'waitForEvents()', /* Request next event */
1000 /* ..after 1 seconds */
);
},
error: function (XMLHttpRequest, textStatus, errorThrown){
alert("Error:" + textStatus + " (" + errorThrown + ")");
setTimeout(
'waitForEvents()', /* Try again after.. */
"15000"); /* milliseconds (15seconds) */
},
});
};
$(document).ready(function(){
waitForEvents(); /* Start the inital request */
});
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>
Here is the regular "backend" php part that I have written:
<?php
//row loop
$con = mysql_connect("localhost","something","something");
if(!con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("arduino_db",$con);
$result = mysql_query("SELECT * FROM events ORDER BY eventID DESC");
//Start container
while($row = mysql_fetch_array($result))
{
echo "<div class='event'>";
echo "<img src='img/ev_img/red.jpg' alt='picture' />";
echo "<p>" . $row['rumNr'] . "</p>";
echo "<p class='patient-name'>" . $row['inneboendeNamn'] . "</p>";
echo "<p class='event-text'>" . $row['handelse'] . "</p>";
echo "<p class='event-timestamp'>" . $row['tid'] . "</p>";
echo "</div>";
}
mysql_close($con);
?>
Any tips or ideas? The example doesn't have to be scaleable, secure or complete, it just needs to work!
