long polling with ajax/jquery/php [closed]
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
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" me开发者_Python百科dia="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!
加载中,请稍侯......
精彩评论