Acara Dihantar Pelayan HTML5

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

Sokongan Penyemak Imbas

Semua penyemak imbas utama menyokong acara yang dihantar pelayan kecuali Internet Explorer.

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.

Dapatkan data yang dihantar oleh pelayan di sisi klien dan kemas kini

<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result">
</div>
<script>if(typeof(EventSource)!=="undefined"){ 
 var source=new EventSource("http://www.w3school.com.cn/example/html5/demo_sse.php"); 
  source.onmessage=function(event) 
   {  
      document.getElementById("result").innerHTML+=event.data + "<br />"; 
       };
       }else{  
       document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";}
       </script>
       </body>
       </html>

Kod pelayan sokongan (PHP atau ASP) adalah seperti berikut:

<?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();
    ?>

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

Kesan sokongan acara Dihantar Pelayan

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

if(typeof(EventSource)!=="undefined")
{
  // 浏览器支持 Server-Sent
  // 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}

Contoh kod sisi pelayan

Untuk 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.

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();
?>
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 akan tidak boleh dicache

Tarikh dihantar keluaran (sentiasa bermula dengan "data: ")

Muat semula data output ke halaman web

objek EventSource

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

acara Penerangan Apabila Diterima mesej

onerror Apabila ralat berlaku

<🎜

Meneruskan pembelajaran