HTML5 SSE


HTML5 Acara Dihantar Pelayan

Acara dihantar pelayan HTML5 membenarkan halaman web mendapat kemas kini daripada pelayan.

Acara Dihantar Pelayan - pemesejan sehala

Acara Dihantar Pelayan merujuk kepada halaman web yang mendapat kemas kini secara automatik 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.

Sokongan Pelayar

Internet Explorer

Acara yang dihantar pelayan disokong oleh semua pelayar utama kecuali Internet Explorer.

Terima pemberitahuan acara Dihantar Pelayan

Objek EventSource digunakan untuk menerima pemberitahuan acara dihantar pelayan:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>获取服务端更新数据</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
</script>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Analisis contoh:

  • Penciptaan 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 dihantar pelayan:

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

Contoh Kod Bahagian Pelayan

Untuk membolehkan contoh di atas berfungsi, anda juga memerlukan pelayan yang boleh menghantar kemas kini data (seperti 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.

Instance

<?php
header('Jenis Kandungan: teks/ event-stream');
header('Cache-Control: no-cache' );

$masa = tarikh('r');
gema "data: Masa pelayan ialah: {$time} nn";
siram();
?>

Kod ASP (VB) (demo_sse.asp):

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

Penjelasan kod:

  • Tetapkan pengepala "Jenis Kandungan" kepada "strim teks/acara"

  • Nyatakan bahawa halaman tidak dicache

  • Tarikh penghantaran output (sentiasa bermula dengan "data: ")

  • Muat semula data output ke halaman web

Objek EventSource

Dalam contoh di atas, kami menggunakan acara onmessage untuk mendapatkan mesej. Walau bagaimanapun, acara lain juga boleh digunakan:

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