Ben başlangıçta düşündüğünüzden daha basittir .. göndermek istediğiniz verileri (örneğin, yeni bir mesaj geldiğinde) hazır olana kadar Temelde, hiçbir şey yapmaz bir sayfa var.
Burada 2-10 saniye sonra basit bir dize gönderir, gerçekten temel bir örnektir. Bir hata dönmeden 1 3 şans 404 (önümüzdeki JavaScript örnekte hata işleme göstermek için)
msgsrv.php
<?php
if(rand(1,3) == 1){
/* Fake an error */
header("HTTP/1.0 404 Not Found");
die();
}
/* Send a string after a random number of seconds (2-10) */
sleep(rand(2,10));
echo("Hi! Have a random number: " . rand(1,10));
?>
Not: Gerçek bir site ile, Apache gibi normal bir web sunucusu üzerinde çalışan bu hızla tüm "işçi konuları" kravat ve diğer istekleri .. Bu etrafında yolu vardır cevap veremiyoruz bırakın, ama yazmak için önerilir olacak Python en twisted, istek başına bir iş parçacığı üzerinde dayanmaz ki gibi bir şey, bir "uzun anket sunucusu". cometD (birçok dilde mevcuttur) bir popüler olanıdır, ve Tornado (o FriendFeed uzun yoklama kodu için inşa edildi) gibi görevler için özel olarak yapılmış yeni bir çerçeve .. . ama basit bir örnek olarak, Apache yeterli fazla! Bu komut kolayca (çok yaygın olarak Apache / PHP seçti ve ben yerel olarak çalışıyor olması oldu) herhangi bir dilde yazılmış olabilir
Sonra, Javascript, sen (msg_srv.php) Yukarıdaki dosyayı talep ve cevap bekleyin. Eğer bir tane olsun, verilerin üzerine hareket. Sonra dosyayı talep ve tekrar beklemek, veri (ve tekrar) üzerine hareket
Aşağıda sayfa yüklendiğinde, o başarılı olursa, biz {mesajı ekleme .. msgsrv.php dosyası için ilk isteği gönderir .. Böyle bir sayfanın bir örneğidir [(1)] } div, sonra 1 saniye sonra biz beklemek tetikler, yine waitForMsg işlevini çağırın.
1 saniye setTimeout() Bu olmadan çalışıyor, gerçekten temel bir oran-sınırlayıcı, ama msgsrv.php always, örneğin, bir sözdizimi hatası ile (anında dönerse ) - Eğer tarayıcı sel ve hızlı bir şekilde dondurabilirsiniz. Bu, daha iyi dosya geçerli bir JSON yanıt içerip içermediğini kontrol yapılır ve / veya requests-per-minute/second bir çalışan toplam tutmak ve uygun duraklatma olacaktır.
Sayfa hataları varsa, bu #messages div hatayı ekler 15 saniye bekler ve sonra (biz her mesajdan sonra 1 saniye beklemek nasıl aynı) tekrar dener
Bu yaklaşım hakkında güzel bir şey, çok esnek olmasıdır. Müşterilerine internet bağlantısı ölürse, o zaman aşımı sonra denemek ve yeniden - bu nasıl çalıştığını uzun yoklama doğasında vardır, hiçbir karmaşık hata işleme gereklidir
Neyse, jQuery framework kullanarak long_poller.htm kodu:
<html>
<head>
<title>BargePoller</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{ background:#000;color:#fff;font-size:.9em; }
.msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
.old{ background-color:#246499;}
.new{ background-color:#3B9957;}
.error{ background-color:#992E36;}
</style>
<script type="text/javascript" charset="utf-8">
function addmsg(type, msg){
/* Simple helper to add a div.
type is the name of a CSS class (old/new/error).
msg is the contents of the div */
$("#messages").append(
"<div class='msg "+ type +"'>"+ msg +"</div>"
);
}
function waitForMsg(){
/* This requests the url "msgsrv.php"
When it complete (or errors)*/
$.ajax({
type: "GET",
url: "msgsrv.php",
async: true, /* If set to non-async, browser shows page as "Loading.."*/
cache: false,
timeout:50000, /* Timeout in ms */
success: function(data){ /* called when request to barge.php completes */
addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
setTimeout(
waitForMsg, /* Request next message */
1000 /* ..after 1 seconds */
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
addmsg("error", textStatus + " (" + errorThrown + ")");
setTimeout(
waitForMsg, /* Try again after.. */
15000); /* milliseconds (15seconds) */
}
});
};
$(document).ready(function(){
waitForMsg(); /* Start the inital request */
});
</script>
</head>
<body>
<div id="messages">
<div class="msg old">
BargePoll message requester!
</div>
</div>
</body>
</html>
