Acara Dihantar Pelayan HTML
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1670
14
1428
52
1329
25
1274
29
1256
24
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
