HTML5 Server-Sent Events Kullanımı - SSE
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Server-Sent Events Kullanımı - SSE

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2578)
RAPOR ET
Bu dersimizde html5 in sse özelliğini yani Server-Sent Events özelliğini anlatacağım.Sse ajax gibidir belirlediğimiz yerden veri çekeriz.Bunun farkı ise bağlantıyı kurduktan sonra belirli aralıklarla bendi otomatik çeker.Veri çekim sıklığı 5-10 saniye kadar.

İndir : http://ustaderslik.com/dosya/server.zip

İncele : http://ustaderslik.com/ornek/server/

Bu özellik facebook,twitter gibi sitelerde bildirim sistemleri için kullanılıyor.Sse ile bir kere bağlantı kurduktan sonra ,belirli aralıklarla kontrol işlemi ediyorlar varsa veriyi çekiyorlar.

Genel örnek :
index.php :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
</head>
<body>

<div id="bilgi"></div>

<script type="text/javascript">

if(typeof(EventSource)!=="undefined"){
var source=new EventSource("deneme.php");
source.onmessage=function(e){document.getElementById("bilgi").innerHTML+=e.data + "<br>"; };
}else{
document.getElementById("bilgi").innerHTML="Tarayıcı bu özelliği desteklemiyor.";
}

</script>

</body>
</html>

deneme.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

echo "data: cArleone\n\n";

flush();
?>


Şimdi kodları inceleyelim.
if(typeof(EventSource)!=="undefined"){}else{desteklemiyorsa }

Burada tarayıcının destekleyip desteklemediğine bakıyoruz.
 var source=new EventSource("deneme.php");
source.onmessage=function(e){document.getElementById("bilgi").innerHTML+=e.data + "<br>"; };

Burada ilk bağlantı yapacağımız sayfayı belirleyip değişkene atıyoruz.Daha sonra onmessage ile veriyi belirli aralıklarla işlem yapıyoruz.

php kısmında da öncelikle header bağlantısını yazmamız gerek ve flush ile bitirmemiz gerek.Veriyi basarken de
echo "data: veri\n\n";

data: yazıp verimizi bastıktan sonra \n\n ile kapatıyoruz.

Temel kullanımı bu şekilde.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol