Latest web development tutorials

HTML5 Server-Sent Events (Server-Sent Events)

HTML5 Server mengirim peristiwa (server-mengirim event) memungkinkan halaman web untuk mendapatkan update dari server.

Server-Sent Events - pesan cara

Acara Server-Sent adalah website secara otomatis mendapatkan update dari server.

Sebelumnya juga dapat melakukannya, asalkan halaman harus bertanya jika pembaruan tersedia. server akan mengirimkan acara, update akan tiba secara otomatis.

Contoh: update Facebook / Twitter, update valuasi, blog baru, hasil turnamen dan sebagainya.

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Semua browser utama yang didukung oleh server akan mengirimkan acara, selain Internet Explorer.

Menerima Server-Sent Pemberitahuan Kegiatan

EventSource objek digunakan untuk menerima pemberitahuan acara dikirim oleh server:

contoh

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

Coba »

contoh analisis:

  • EventSource membuat objek baru, dan kemudian mengirim URL pembaruan peraturan halaman (dalam hal ini, "demo_sse.php")
  • Setiap menerima update, acara onmessage terjadi
  • Ketika acara onmessage terjadi, data yang diterima didorong ke dalam id "hasil" elemen dalam

Deteksi Server-Sent Events Dukungan

Contoh-contoh berikut, kita menulis beberapa kode tambahan untuk mendeteksi browser ke server untuk mengirim acara yang didukung oleh:

if (typeof (EventSource)! == "undefined")
{
// Browser mendukung Server-Sent
//Beberapa kode .....
}
lain
{
// Browser tidak mendukung Server-Sent ..
}

Contoh kode sisi server

Untuk membuat contoh di atas, Anda dapat berjalan, Anda juga perlu untuk dapat mengirim data untuk memperbarui server (seperti PHP dan ASP).

Sintaks server-side event streaming sangat sederhana. The "Content-Type" header diatur ke "text / event-stream". Sekarang Anda dapat mulai mengirim aliran acara.

contoh

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

$ Waktu = date ( 'r' );
echo "Data: Waktu server : {$ waktu} \ n \ n";
flush ();
?>

kode ASP (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

Kode penjelasan:

  • Header "Content-Type" diatur ke "text / event-stream"
  • Penyediaan tidak cache halaman
  • Tanggal transmisi keluaran (selalu "Data:" di awal)
  • Refresh halaman untuk output data

benda EventSource

Dalam contoh di atas, kita digunakan untuk mendapatkan event pesan onmessage. Namun, Anda juga dapat menggunakan acara lainnya:

事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误