HTML5 SSE
Acara Dihantar Pelayan HTML5
Acara dihantar pelayan HTML5 membolehkan 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 penyemak imbas
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:
<!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>
kod demo_sse.php
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>
Jalankan atur cara dan cuba
Contoh analisis:
Buat objek EventSource baharu , dan kemudian tentukan untuk menghantar kemas kini URL halaman ("demo_sse.php" dalam contoh ini)
Setiap kali kemas kini diterima, acara onmessage akan berlaku
Apabila acara onmessage berlaku, tolak data yang diterima ke dalam elemen dengan id "hasil"
Kesan sokongan acara Dihantar Pelayan
Dalam contoh berikut, kami menulis Kod perenggan tambahan untuk mengesan sokongan penyemak imbas untuk acara yang dihantar oleh pelayan:
if(typeof(EventSource)!=="undefined")
{
// Penyemak imbas menyokong Server-Sent
// Beberapa kod...
}
lain
{
// Penyemak imbas tidak menyokong Server-Sent..
}
Contoh kod sisi pelayan
Untuk membolehkan contoh di atas berfungsi, anda juga perlu dapat untuk menghantar kemas kini data Pelayan (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.
Contoh
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>
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 "text/event-stream"
Menentukan bahawa halaman tidak dicache
Mengoutput tarikh penghantaran (sentiasa bermula dengan "data: " )
Muat semula data output ke halaman web
Objek EventSource
Dalam contoh di atas, kami menggunakan acara onmessage untuk mendapatkan mesej. Tetapi acara lain juga boleh digunakan:
Acara | <🎜><🎜>Penerangan<🎜><🎜> | ||||||||
onopen | Apabila sambungan ke pelayan dibuka | ||||||||
Apabila mesej diterima | |||||||||
kesalahan | Apabila ralat berlaku |