Jadual Kandungan
Bagaimana Acara Dihantar Pelayan Berfungsi dalam HTML?
Terima Pemberitahuan Acara Dihantar Pelayan
Contoh #3
Contoh Acara Dihantar Pelayan HTML
Kesimpulan
Rumah hujung hadapan web html tutorial Acara Dihantar Pelayan HTML

Acara Dihantar Pelayan HTML

Sep 04, 2024 pm 04:38 PM
html html5 HTML Tutorial HTML Properties HTML tags

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>
Salin selepas log masuk
  • 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
}
Salin selepas log masuk
  • 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>";
}
Salin selepas log masuk
  • 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>
Salin selepas log masuk

Output:

Kami melihat masa dalam nombor pada skrin output, yang bermaksud penyemak imbas kami akan menyokong Acara Hantar Pelayan HTML.

Acara Dihantar 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>
Salin selepas log masuk

Output:

Seperti yang dilihat dalam skrin output di bawah, ia menunjukkan 1 saat sebagai masa pemuatan.

Acara Dihantar Pelayan HTML

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>
Salin selepas log masuk

Output:

Sebaik sahaja kod di atas berjalan pada tetingkap penyemak imbas, ia akan menjana output apabila sambungan pelayan gagal.

Acara Dihantar Pelayan HTML

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1662
14
Tutorial PHP
1261
29
Tutorial C#
1234
24
Sempadan Jadual dalam HTML 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 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 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 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 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? 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 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 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.

See all articles