jQuery ile Laz İşi Ajax Push

Özellikle Friendfeed, Twitter, FaceBook gibi sosyal ağlarda sayfa yenilenmeden verilerin güncellendiğini biliyoruz. Bu tür bir durumu gerçekleştirmek için akla ilk gelen yöntem ajax ile verinin bulunduğu yeri belirli zaman aralıklarında yenilemek geliyor, fakat veri trafiğinin çok üst düzey olduğu bu sistemlerde sürekli yenileme yapmak aşırı kaynak tüketimine hatta sistemin durmasına sebep olur. Bu işi şüphesiz en iyi yapan site FriendFeed, o kadar iyi yaptılar ki FaceBook bu siteyi ve geliştiricilerini satın aldı :) Neyse oralara daha fazla girmeden konumuza dönelim.

Bundan epey zaman önce Facebook’ un davranışlarını epeyce inceliyordum, özellikle sayfa sabitken verilerin güncellenmesi aklımı resmen alıyordu. Bir gün farkettim ki akıllı Facebook mühendisleri kullanıcı deneyimlerini o kadar iyi gözlemlemişler ki bu işi şu şekilde çözmüşler Window Focus ! Kullanıcı sayfada kaldığı sürece sağa sola tıklamıyor olabilir. Bu durum farklı sekmelere yada farklı sayfalara gidip tekrar gelmeyeceği anlamına gelmiyor ! Javascript ile pencerenin focus olayını kullanarak basit bir şekilde sanki veriler anlık güncelleniyor hissini kullanıcı üzerinde yaratabiliriz.

Index sayfamızdaki kodlarımız.

<script type="text/javascript">
    var focus = false;
    $(document).ready(function () {

        $(window).bind('focus', function () {
            getData();
        });

        // ie
        $(document).bind('focusin', function () {
            getData();
        });

    });

    function getData() {
        if (focus) {
            focus = false;
        }
        else {
            focus = true;
            $.ajax({
                url: "/home/getData/" + $("#grid ul li:last").attr("id"),
                dataType: 'json',
                success: function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            $("#grid ul").append("<li id=\"" + data[i]["id"] + "\"><strong>" + data[i]["adSoyad"] + "</strong> " + data[i]["icerik"] + "</li>");
                            $("#grid ul li:last").fadeOut().fadeIn();
                        }
                    }
                }
            });
        }
    }
</script>

Gördüğünüz gibi sadece pencere aktif olunduğunda bir ajax sorgusu yapıyor, varsa güncel verileri alıyor ve kullanıyoruz. Burada ajax isteğimizi yaparken ekranda ki son kaydın id sinide gönderiyoruz ki veritabanından sorgulama yaparken o id den büyükleri yani güncelleri bulabilelim.

Sonuç olarak; kullanıcı sekmeler arasında dolaşırken bizim sitemizin bulunduğu sekmeye her gelmesinde veriler aynı FaceBook’ da ki gibi güncellenmiş olacak. Burada ben olayın mantığını basitçe anlatmak istedim. Bu yöntemi iyileştirmek ve geliştirmek de mümkün ;)

Demo için, buradan kayıt girebilir, şuradan da olayı görüntüleyebilirsiniz. Projenin çalışır halini buradan indirebilirsiniz.