Acara Dihantar Pelayan HTML5

Acara Dihantar Pelayan - pemesejan sehala

Acara Dihantar Pelayan merujuk kepada halaman web secara automatik mendapat kemas kini daripada pelayan.

Ini juga mungkin sebelum ini, jika halaman web perlu bertanya sama ada kemas kini tersedia. Dengan menghantar acara melalui pelayan, kemas kini boleh tiba secara automatik.

Contoh: Kemas kini Facebook/Twitter, kemas kini penilaian, catatan blog baharu, hasil acara, dsb.

Berikut ialah contoh kod di W3School, termasuk JavaScript sisi klien dan kod PHP sisi pelayan:

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

document.getElementById("result").innerHTML += event.data + "< ; br />";

};

Kod ini secara berterusan mendapat data daripada demo_sse.php dan mengeluarkan hasilnya kepada ID dalam div daripada hasil.

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

gema "data: Masa pelayan ialah: {$time}nn";

flush();

?>

Kod ini mengembalikan masa semasa pelayan kepada klien. Akhirnya, hasil yang serupa dengan yang berikut dipaparkan pada halaman klien:

Masa pelayan ialah: Jum, 29 Ogos 2016 02:03:21 +0800

Masa pelayan ialah: Jum , 29 Ogos 2016 02:03:24 +0800

Masa pelayan ialah: Jum, 29 Ogos 2016 02:03:27 +0800

Masa pelayan ialah: Jum, 29 Ogos 2016 02: 03:30 +0800

Masa pelayan ialah: Jum, 29 Ogos 2016 02:03:33 +0800

...

Terima pemberitahuan acara Dihantar Pelayan

Objek EventSource digunakan untuk menerima pemberitahuan acara yang dihantar oleh pelayan:

Instance

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

Contoh analisis:

Buat objek EventSource baharu, dan kemudian nyatakan URL halaman untuk menghantar kemas kini (dalam kes ini, "demo_sse.php")

Setiap kali kemas kini diterima, acara onmessage akan berlaku

Apabila peristiwa onmessage berlaku, tolak data yang diterima ke dalam elemen dengan id "hasil"

Kesan sokongan acara Dihantar Pelayan

Dalam contoh berikut, kami menulis sekeping kod tambahan untuk mengesan sokongan penyemak imbas untuk acara yang dihantar pelayan:

if(typeof(EventSource)!=="udefined")
{
// Penyemak imbas menyokong Dihantar Pelayan
// Beberapa kod...
}
lain
{
// Penyemak imbas tidak menyokong Dihantar Pelayan..
}

Contoh kod sisi pelayan

Untuk membolehkan contoh di atas berfungsi, anda juga memerlukan pelayan yang boleh menghantar kemas kini data (seperti sebagai PHP dan ASP).

Sintaks penstriman acara sebelah pelayan adalah sangat mudah. Tetapkan pengepala "Jenis Kandungan" kepada "strim teks/acara". Kini anda boleh mula menghantar strim acara.

Contoh

Kod ASP (VB) (demo_sse.asp):

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

Penjelasan kod:

Tetapkan pengepala "Content-Type" kepada "text/event-stream"

Nyatakan bahawa halaman tidak dicache

Output tarikh penghantaran (sentiasa bermula dengan "data: ")

Muat semula data output ke halaman web