Rumah >hujung hadapan web >html tutorial >Acara Dihantar Pelayan HTML
Acara Dihantar Pelayan HTML
- WBOYasal
- 2024-09-04 16:38:17406semak imbas
Acara yang dihantar pelayan HTML ialah salah satu senario yang disertakan dalam API HTML untuk mendapatkan kemas kini secara automatik daripada pelayan menggunakan halaman web. Konsep ini termasuk satu jenis acara yang berfungsi antara pelayan web dan penyemak imbas web, yang dikenali sebagai acara dihantar Pelayan.
Kami mula-mula ingin menambah beberapa kod untuk menyemak sama ada penyemak imbas kami akan menyokong acara yang dihantar pelayan atau tidak; selepas itu, kami akan memproses kod lain untuk mendapatkan output yang tepat. Tidak seperti WebSockets, membangunkan aplikasi web yang menggunakan acara dihantar pelayan sentiasa lebih mudah.
Bagaimana Acara Dihantar Pelayan Berfungsi dalam HTML?
- Sebagai pengguna, apabila kita cuba melakukan beberapa acara dan menghantarnya ke pelayan, seperti pada butang log masuk klik, butiran log masuk akan dihantar ke pelayan. Jadi semasa melaksanakan jenis acara ini, yang berpindah dari penyemak imbas web ke pelayan web, acara ini dikenali sebagai acara sebelah pelanggan.
- Tetapi kami melakukan perkara yang bertentangan dengan proses di atas, yang bermaksud menghantar data atau peristiwa dari pelayan ke penyemak imbas web dikenali sebagai acara dihantar pelayan. Oleh itu, jenis peristiwa tersebut berlaku dalam sistem apabila penyemak imbas dikemas kini secara automatik daripada pelayan.
- Acara yang dihantar pelayan sentiasa dianggap sebagai satu arah kerana ia hanya melakukan proses dalam satu arah, dari pelayan ke pelanggan. Oleh itu, salah satu atribut utama proses ini ialah atribut EventSource dengan objeknya.
- Jadi objek ini dilampirkan dengan istilah seperti url, permintaan, masa penyambungan semula dan rentetan ID acara terakhir. Jadi mari kita lihat satu persatu.
- Url: Ini akan ditetapkan semasa proses Pembinaan.
- Permintaan: kita mesti perlu memulakannya menjadi batal untuk permulaan.
- Masa penyambungan semula: ini ialah cap masa yang diukur dalam milisaat.
- Rentetan ID acara terakhir: Kita juga mesti perlu memulakan nilai rentetan sebagai rentetan kosong.
Terima Pemberitahuan Acara Dihantar Pelayan
Terdahulu, kami membincangkan atribut EventSource; ia juga digunakan dengan objeknya dalam menerima pemberitahuan acara pelayan.
Contoh
Penggunaan sebenar atribut EventSource adalah dalam contoh berikut:
Kod:
<!DOCTYPE html>
<html>
<body>
<h1>Receive Sever-sent Event</h1>
<div id="demo"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ssedemo.html");
source.onmessage = function(event) {
document.getElementById("demo").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("demo").innerHTML = "Oops, your browser is not going to support Secure-sent event";
}
</script>
</body>
</html>
- Dalam contoh di atas, kami mentakrifkan objek atribut EventSource, termasuk url halaman yang melaluinya kami menghantar kemas kini; semua kemas kini diterima pada acara yang dipanggil pada mesej, yang membantu id yang ditentukan dipanggil demo.
Sintaks:
- Langkah pertama ialah menyemak sama ada penyemak imbas kami akan menyokong acara yang dihantar pelayan atau tidak. Jadi kami akan meletakkan kod kecil dalam program kami untuk menyemak sama ada penyemak imbasnya disokong atau tidak.
if(typeof(EventSource) !== "undefined") {
// Server-sent event supported code
// Program code
}
else {
//Oops! Server-sent event is not supported code
}
- Sekarang kita akan melihat sintaks untuk menerima acara daripada acara yang dihantar pelayan adalah seperti berikut:
Sintaks:
if(typeof(EventSource) !== "undefined") {
var object = new EventSource("File_URL");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}
- Seperti yang ditunjukkan dalam sintaks di atas, pertama, kita perlu mencipta objek baharu atribut EventSource bersama-sama dengan kita mentakrifkan url fail. Ini akan membantu kami menghantar kemas kini kepada penyemak imbas web.
- Jadi apabila sebarang kemas kini datang daripada pelayan, acara itu akan berlaku pada mesej dan ia akan mencetak mesej yang diperlukan pada dokumen web.
Contoh Acara Dihantar Pelayan HTML
Contoh acara yang dihantar pelayan html diberikan di bawah:
Contoh #1
Dalam contoh pertama ini, kami akan menyemak sama ada penyemak imbas kami akan menyokong acara penghantaran Pelayan atau tidak. Jika semuanya ok, ia akan memaparkan masa dalam tetingkap output, dan jika ia tidak menyokong penyemak imbas, ia mencetak mesej ralat pada tetingkap penyemak imbas. Kod:
<!DOCTYPE html>
<html>
<head>
<title>HTML Server-sent Event</title>
</head>
<body>
<div id="sse_demo">
</div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined")
{
alert("Yes Your browser is going to support Server-Sent Event");
}
else
{
alert("Sorry! Yes Your browser is not going to support Server-
Sent Event");
}
</script>
</body>
</html><strong> </strong>
Output:
Kami melihat masa dalam nombor pada skrin output, yang bermaksud penyemak imbas kami akan menyokong Acara Hantar Pelayan HTML.
Contoh #2
Contoh ini adalah untuk acara penghantaran pelayan, di mana kami mengira masa yang diperlukan untuk memuatkan acara yang dihantar pelayan pada penyemak imbas. Cap masa ini dalam beberapa saat.
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML API _ Server-Sent Events</title>
<script>
window.onload = function()
{
var path = new EventSource("server_time.html");
path.onmessage = function(event)
{
document.getElementById("sse_output").innerHTML += "Required
timestamp received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="sse_output">
<!--This will display required time of server to load contents-->
</div>
</body>
</html>
Output:
Seperti yang dilihat dalam skrin output di bawah, ia menunjukkan 1 saat sebagai masa pemuatan.
Contoh #3
Ini adalah contoh di mana kami cuba menunjukkan penubuhan sambungan. Mari jalankan kod dan akan apa yang akan menjadi output:
Kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height" />
<title> Server-Sent Events </title>
<style type="text/css">
font-family: ‘Times new Roman’;
</style>
</head>
<body>
<h4> Server-Sent Events Example </h4>
<ul></ul>
<script>
(function()
{ "use strict";
var ev_check = document.querySelector('ul');
var ssl = new EventSource('/events');
function li(text) {
var li = document.createElement('li');
li.innerText = text;
ev_check.appendChild(li);
}
ssl.addEventListener('open', function()
{
li('Server connection done succussfully.');
});
ssl.addEventListener('my-custom-event', function(event)
{
li(event.data);
});
ssl.addEventListener('error', function()
{
li('Server connection failed.');
});
})();
</script>
</body>
</html>
Output:
Sebaik sahaja kod di atas berjalan pada tetingkap penyemak imbas, ia akan menjana output apabila sambungan pelayan gagal.
Kesimpulan
Daripada semua maklumat di atas, HTML Server-send Event ialah API baharu yang digunakan sebagai proses acara mono-directional di mana pengguna boleh mencipta acara daripada pelayan web kepada penyemak imbas web. Ia menggunakan atribut EventSource. Seseorang boleh melihat masa muat acara menggunakannya. Ini digunakan di Facebook, suapan berita, kemas kini harga saham, dsb.
Atas ialah kandungan terperinci Acara Dihantar Pelayan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!