Acara Dihantar ...LOGIN

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.

<?php

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 + "<br> ";
};


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

<?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 "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




bahagian seterusnya
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>服务器推送SSE</title> <script type="text/javascript"> $(document).ready(function(){ //检查浏览器支持情况 if(typeof(EventSource)!=="undefined") { //定义个对象,用于初始化事件源,这里用c.php这个页面实现 var eSource = new EventSource("c.php"); //detect message receipt eSource.onmessage = function(event) { //将收到的数据展示到页面的ID=content元素中 document.getElementById("content").innerHTML += event.data+'<br />'; }; }else { document.getElementById("content").innerHTML="没有收到服务端Server-Sent数据."; } }); </script> </head> <body> <div id="content"></div> </body> <p>服务器端c.php 页面写在HTML外部</p> </html> <?php // 要声明头部 header("Content-Type: text/event-stream"); header("Cache-Control: no-cache"); // 直接打印当前时间 echo "data: ".date('Y-m-d H:i:s').PHP_EOL; flush(); ?>
babperisian kursus