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

7.jpg


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:

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

Acara

<🎜><🎜>Penerangan<🎜><🎜>
onopenApabila sambungan ke pelayan dibuka
Apabila mesej diterima
kesalahanApabila ralat berlaku
<🎜><🎜><🎜>
Meneruskan pembelajaran
||
<!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>
  • Cadangan kursus
  • Muat turun perisian kursus
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!