Ajax (Jquery) ile kullanıcının internet bağlantısını kontrol etme

23 / Eylül / 2008 İsa Engiz    JQuery, ajax, javascript     5 Yorum Yapilmis.

Uzun bir aradan sonra bulduğum bu fırsatı bloga güzel bir yazı yazarak değerlendirmek istiyorum, tasarımı da yeniledik, bu güzel tasarımı, güzel bir yazı ile taçlandıralım

Uygulamanız da ajax kullanıyorsanız, sayfa hiç yeniden yüklenmeden işlemler yapıyorsunuz demektir. Uzun süre yüklenmeyen sayfalar, aktif işlemlerini buna rağmen devam ettiriyorlarsa, kontrol etmeniz gereken bir unsur vardır, kullanıcının internet bağlantısı!

Gmail örneğini ele alalım, sayfa yenilenmemesine rağmen arka planda ajax-post’lar akmakta ve sizin tarayıcınıza devamlı veri akışı gerçekleşmektedir. Ancak bu veri akışı, internet bağlantısının olmaması durumunda kesintiye uğrar ve google size ‘Gmail ürününne ulaşılamıyor, lütfen internet bağlantınızı kontrol ediniz!’ diye bir uyarı verir. İşte bugün biz de böyle bir uygulamanın nasıl yazılacağını tartışalım. Uygulamanın canlı haline buradan erişebilirsiniz. (ve ctrl+u ile kaynağı görüntüleyebilirsiniz!)

HTML kısmı

Uygulamamızın tüm kısımları gibi html kısmı oldukça basit;

<div id="cerceve">
 
        <h1>Ajax (Jquery) ile kullanıcının internet bağlantısını kontrol etme</h1>
 
        <div id="baglantidurumu">
            İnternet bağlantınız mevcut ve kararlı durumda.
        </div>
 
</div>

Sayfa ilk yüklendiğinde kullanıcıyı karşılayan sayfa bu şekilde, id’si ‘baglantidurumu’ olan div etiketinin icerisine, ajax ile gelen veriye göre bağlantı durumunu yazdıracağız.

Javascript ve Jquery ile kolay ajax

Jquery’nin javascript geliştirmeyi ne kadar kolaylaştırdığını bir kez daha burada görme fırsatı yakalayacağız. En kolay şekliyle bir ajax-post isteği oluşturup cevap gelip gelmediğini kontrol edeceğiz:

$(document).ready(function(){
 
    setTimeout(kontrolEt, 2000);
 
    function kontrolEt() {
		$.ajax(
		{
			type: 'POST',
			url:  'index.php',
			data : 'islem=kontrol',
			success: function(ajaxCevap)
			{
				if(ajaxCevap == 'tamam') {
					$('#baglantidurumu').html('İnternet bağlantınız mevcut ve kararlı durumda.');
					$('#baglantidurumu').css('border-top', '2px solid #9ddae6');
					$('#baglantidurumu').css('border-bottom', '2px solid #9ddae6');
					$('#baglantidurumu').css('backround-color', '#e2ecee');
				} else {
					$('#baglantidurumu').html('Şu anda sunucuya erişilemiyor.<br />Lütfen internet bağlantınızı kontrol ediniz.');
					$('#baglantidurumu').css('border-top', '2px solid #fff6bf');
					$('#baglantidurumu').css('border-bottom', '2px solid #fff6bf');
					$('#baglantidurumu').css('background-color', '#ffd324');
				}
				setTimeout(kontrolEt, 2000);
			},
			error: function()
			{
				$('#baglantidurumu').html('Şu anda sunucuya erişilemiyor.<br />Lütfen internet bağlantınızı kontrol ediniz.');
				$('#baglantidurumu').css('border-top', '2px solid #fff6bf');
				$('#baglantidurumu').css('border-bottom', '2px solid #fff6bf');
				$('#baglantidurumu').css('background-color', '#ffd324');
				setTimeout(kontrolEt, 2000);
			}
		});
	}
 
});

Bu uzun gibi görünen kod aslında oldukça basit, adım adım açıklayalım;

1- İlk önce jquery’yi başlatıyoruz:

$(document).ready(function(){

2 – Bağlantıyı kontrol edecek fonksiyonu ’setTimeout()’ ile çağırıyoruz;

setTimeout(kontrolEt, 2000);

3 – Bağlantıyı kontrol eden fonksiyon ise basit şekliyle index.php dosyasına ajax-post ile ‘istek=kontrol’ verisini yolluyor:

$.ajax(
		{
			type: 'POST',
			url:  'index.php',
			data : 'islem=kontrol',

4 – index.php dosyasından bize cevap dönerse ki bu durum ’success’ (başarı) durumu, ve bu cevap ‘tamam’ ise kullanıcının internet bağlantısı var sonucunu çıkarıp ekrana ona göre bir uyarı yazdırıyoruz; (tamam dışında bir cevap dönerse demekki bizim sunucumuz sağlıklı durumda değil!)

if(ajaxCevap == 'tamam') {
					$('#baglantidurumu').html('İnternet bağlantınız mevcut ve kararlı durumda.');
					$('#baglantidurumu').css('border-top', '2px solid #9ddae6');
					$('#baglantidurumu').css('border-bottom', '2px solid #9ddae6');
					$('#baglantidurumu').css('backround-color', '#e2ecee');
				} else {
					$('#baglantidurumu').html('Şu anda hizmet veremiyoruz.<br />En kısa sürede geri döneceğiz.');
					$('#baglantidurumu').css('border-top', '2px solid #fff6bf');
					$('#baglantidurumu').css('border-bottom', '2px solid #fff6bf');
					$('#baglantidurumu').css('background-color', '#ffd324');
				}

5- İnternet bağlantısını esas olarak kontrol eden bölüm ise ajax isteğinin gerçekleşmemesi durumu, yani ‘error’ (hata) durumu. Jquery ile bunu da çok kolay bir şekilde yakalayıp gerekli uyarıyı ekrana yazdırıyoruz:

error: function()
			{
				$('#baglantidurumu').html('Şu anda sunucuya erişilemiyor.<br />Lütfen internet bağlantınızı kontrol ediniz.');
				$('#baglantidurumu').css('border-top', '2px solid #fff6bf');
				$('#baglantidurumu').css('border-bottom', '2px solid #fff6bf');
				$('#baglantidurumu').css('background-color', '#ffd324');
				setTimeout(kontrolEt, 2000);
			}

PHP kısmı

Ajax ile veri alışverişi yaptığımız dosya, yine index.php dosyası. index.php dosyasının en başında ise şöyle minik bir kod bulunmakta:

<?php
if($_POST) {
	if($_POST['islem'] == 'kontrol') {
		echo 'tamam';
		die;
	}
}
?>

Post ile gelen bir veri varsa ve kontrol işlemi yapılıyorsa direkt olarak tamam cevabını yazdırıyoruz ve sayfanın geri kalanının çalışmasını engellemek için die() komutunu veriyoruz.

Sonuç

Görüldüğü gibi kullanıcının internet bağlantısını kontrol etmek oldukça kolay ve jquery ile bu daha da kolay oluyor.

Ajaxın en önemli avantajlarından biri, daha önceki yazılarımızda da belirttiğimiz gibi, kullanıcı ile olan etkileşimi kolaylaştırması ve arttırması. Karşı tarafın internet bağlantısını kontrol edip buna göre bilgi vermek de bu unsur açısından oldukça önemli bence.

Peki nerede kullanılabilir bu uygulama örneği? Kullanıcının kısa süre kalacağı sayfalarda kullanılamaz tabii ki, gereksiz yere sunucuya veri akışı gerçekleşecek. Ayrıca bu açıdan değerlendirdiğinizde bu uygulamada verdiğimiz 2000 ms süresini de arttırmak doğru olabilir. Bir diğer doğru hareket de, bağlantı kontrolünü, kullanıcının uzun süre kalmasını planladığınız sayfalarda yapmak.

Bir sonraki ajax yazısında görüşmek üzere!

Not: jquery-ajax işlemleri ile ilgili bilgileri eburhanın bu sayfasından alabilirsiniz.

Bu yazıyı beğendiyseniz, paylaşabilirsiniz: