Melaksanakan teknologi push menggunakan acara yang dilanda pelayan

mata teras

API Peristiwa Server-Sent (SSE) melaksanakan teknologi menolak, dan data disiarkan kepada klien melalui sambungan terbuka yang berterusan, mengelakkan overhead berulang kali mewujudkan sambungan baru.
Tidak seperti WebSockets yang membolehkan komunikasi bidirectional, SSE hanya membenarkan pelayan untuk menolak mesej kepada pelanggan. Walau bagaimanapun, SSE mempunyai kelebihan tertentu, seperti sokongan untuk jenis mesej tersuai dan penyambungan semula automatik dan pemotongan.
Pelanggan boleh mengendalikan pelbagai jenis acara dalam aliran acara dengan melaksanakan acara bernama. Di samping itu, pengendali acara
• Eventsource boleh digunakan untuk mengendalikan kesilapan, dan pelanggan boleh menamatkan sambungan Eventsource pada bila -bila masa dengan memanggil kaedah onerror. close()

Perbandingan dengan WebSockets

Ramai orang benar -benar tidak menyedari kewujudan SSE, kerana mereka sering dikaburkan oleh API WebSockets yang lebih kuat. Walaupun WebSockets membolehkan komunikasi dua hala penuh antara klien dan pelayan, SSE hanya membolehkan pelayan menolak mesej kepada klien. Aplikasi yang memerlukan prestasi hampir-masa atau komunikasi dua hala mungkin lebih sesuai untuk websocket. Walau bagaimanapun, SSE juga mempunyai beberapa kelebihan ke atas WebSockets. Sebagai contoh, SSE menyokong jenis mesej tersuai dan pemotongan penyambungan semula automatik. Ciri -ciri ini boleh dilaksanakan di WebSockets, tetapi ia boleh didapati secara lalai dalam SSE. Aplikasi WebSockets juga memerlukan pelayan yang menyokong protokol WebSockets. Sebaliknya, SSE dibina di atas HTTP dan boleh dilaksanakan dalam pelayan web standard.

Sokongan pengesanan

SSE agak tinggi sokongan, dan Internet Explorer adalah satu -satunya pelayar utama yang tidak menyokong mereka lagi. Walau bagaimanapun, selagi IE ketinggalan, pengesanan fungsi masih diperlukan. Mengenai pelanggan, SSE menggunakan objek Eventsource untuk melaksanakan -harta objek global. Fungsi berikut mengesan sama ada pembina Eventsource boleh didapati dalam penyemak imbas. Jika fungsi kembali benar, SSE boleh digunakan. Jika tidak, mekanisme sandaran seperti pengundian harus digunakan.

<code class="language-javascript">function supportsSSE() {
  return !!window.EventSource;
}</code>

Sambungan

Untuk menyambung ke aliran acara, hubungi pembina Eventsource seperti yang ditunjukkan di bawah. Anda mesti menentukan URL aliran acara untuk melanggan. Pembina secara automatik akan bertanggungjawab untuk membuka sambungan.

<code class="language-javascript">EventSource(url);</code>

pengendali acara onopen

Selepas mewujudkan sambungan, pengendali acara

eventsource akan dipanggil. Pengendali acara membuka acara sebagai satu -satunya parameter. Contoh berikut menunjukkan pengendali acara onopen biasa. onopen

Pengendali acara

<code class="language-javascript">source.onopen = function(event) {
  // 处理打开事件
};</code>

Eventsource juga boleh ditulis menggunakan kaedah

. Sintaks alternatif ini lebih baik daripada addEventListener() kerana ia membolehkan beberapa pengendali dilampirkan pada peristiwa yang sama. Penggunaan berikut onopen untuk menulis semula pengendali acara addEventListener() sebelumnya. onopen

<code class="language-javascript">source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);</code>

Terima mesej

Pelanggan menafsirkan aliran acara sebagai satu siri acara mesej DOM. Setiap acara yang diterima dari pelayan mencetuskan pengendali acara onmessage untuk Eventsource. onmessage Pengendali mengambil acara mesej sebagai satu -satunya parameter. Contoh berikut mencipta pengendali acara onmessage.

<code class="language-javascript">function supportsSSE() {
  return !!window.EventSource;
}</code>

peristiwa mesej mengandungi tiga sifat penting - data, asal, dan lastEventId. Seperti namanya, data mengandungi data mesej sebenar (format rentetan). Data boleh menjadi rentetan JSON dan boleh diserahkan kepada kaedah JSON.Parse (). Harta asal mengandungi URL akhir aliran acara selepas sebarang pengalihan. Asal harus diperiksa untuk mengesahkan bahawa mesej diterima hanya dari sumber yang diharapkan. Akhirnya, harta LastEventID mengandungi pengenal mesej terakhir yang dilihat dalam aliran acara. Pelayan boleh menggunakan harta ini untuk menambah pengenal kepada mesej individu. Sekiranya tiada pengenal telah dilihat, LastEventID akan menjadi rentetan kosong. Pengendali acara onmessage juga boleh ditulis menggunakan kaedah addEventListener(). Contoh berikut menunjukkan pengendali acara addEventListener() yang ditulis semula menggunakan onmessage.

<code class="language-javascript">EventSource(url);</code>

Naming Event

Dengan melaksanakan Nama Acara , satu aliran acara boleh menentukan pelbagai jenis peristiwa. Acara bernama tidak dikendalikan oleh pengendali acara mesej. Sebaliknya, setiap jenis acara penamaan dikendalikan oleh pengendali uniknya sendiri. Sebagai contoh, jika aliran acara mengandungi acara bernama Foo, pengendali acara berikut diperlukan. Perhatikan bahawa pengendali acara Foo adalah sama dengan pengendali acara mesej, kecuali jenis acara berbeza. Sudah tentu, apa -apa jenis mesej bernama lain memerlukan pengendali acara yang berasingan.

<code class="language-javascript">source.onopen = function(event) {
  // 处理打开事件
};</code>

Ralat pemprosesan

Jika terdapat masalah dengan aliran acara, pengendali acara onerror untuk Eventsource akan dicetuskan. Penyebab kesilapan yang sama adalah gangguan sambungan. Walaupun objek Eventsource secara automatik cuba menyambung semula ke pelayan, peristiwa ralat juga akan dicetuskan apabila sambungan diputuskan. Contoh berikut menunjukkan pengendali acara onerror.

<code class="language-javascript">source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);</code>

Sudah tentu, pengendali acara onerror juga boleh ditulis semula menggunakan addEventListener() seperti yang ditunjukkan di bawah.

<code class="language-javascript">source.onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
};</code>

Putuskan sambungan

Pelanggan boleh menamatkan sambungan Eventsource pada bila -bila masa dengan memanggil kaedah close(). Sintaks close() ditunjukkan di bawah. Kaedah close() tidak menerima sebarang parameter dan tidak mengembalikan sebarang nilai.

<code class="language-javascript">source.addEventListener("message", function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
}, false);</code>

Status sambungan

Status sambungan Eventsource disimpan dalam harta ReadyState. Pada bila -bila masa dalam kitaran hayatnya, sambungan boleh berada di salah satu daripada tiga negeri yang mungkin, dan di luar. Senarai berikut menerangkan setiap negeri.

• Sambungan - Apabila objek Eventsource dibuat, ia pada mulanya akan memasuki keadaan sambungan. Dalam tempoh ini, sambungan belum ditubuhkan. Sekiranya sambungan yang ditetapkan hilang, Eventsource juga akan beralih ke keadaan sambungan. Nilai ReadyState Eventsocket dalam sambungan adalah 0. Nilai ini ditakrifkan sebagai Eventsource.Connecting yang berterusan.
• Buka - Sambungan yang ditetapkan dipanggil terbuka. Objek Eventsource yang terbuka dapat menerima data. Nilai siap sedia 1 sepadan dengan keadaan terbuka. Nilai ini ditakrifkan sebagai Eventsource.Open yang berterusan.
• Tutup - Jika sambungan tidak ditubuhkan dan penyambungan semula tidak dicuba, Eventsource dipanggil ditutup. Keadaan ini biasanya dimasukkan dengan memanggil kaedah close(). Nilai Readystate dari Eventsource dalam keadaan tertutup ialah 2. Nilai ini ditakrifkan sebagai Eventsource.closed yang berterusan.

Contoh berikut menunjukkan cara menyemak sambungan Eventsource menggunakan harta ReadyState. Untuk mengelakkan nilai Readystate yang dikodkan keras, contoh ini menggunakan pemalar negeri.

<code class="language-javascript">function supportsSSE() {
  return !!window.EventSource;
}</code>

Kesimpulan

Artikel ini memperkenalkan aspek klien SSE. Jika anda berminat untuk mempelajari lebih lanjut mengenai SSE, saya cadangkan anda membaca SSE Server. Saya juga menulis artikel yang lebih praktikal mengenai SSE di Node.js. Nikmati!

soalan yang sering ditanya mengenai penggunaan SSE untuk melaksanakan teknologi push (FAQ)

Apakah prasyarat untuk melaksanakan SSE?

Untuk melaksanakan SSE, anda memerlukan pemahaman asas JavaScript dan Node.js. Anda juga harus akrab dengan konsep HTTP dan bagaimana ia berfungsi. Selain itu, pemahaman pengaturcaraan yang didorong oleh peristiwa mungkin bermanfaat kerana SSE didasarkan pada konsep ini.

Bagaimana SSE berbeza dari WebSockets?

Walaupun kedua-dua SSE dan WebSockets menyediakan kemas kini data masa nyata, keupayaan dan kes penggunaannya berbeza-beza. WebSockets menyediakan saluran komunikasi dua hala antara klien dan pelayan, yang membolehkan kedua-dua pihak menghantar data pada bila-bila masa. Sebaliknya, SSE adalah saluran komunikasi sehala di mana hanya pelayan boleh menolak kemas kini kepada pelanggan. Ini menjadikan SSE lebih sesuai untuk aplikasi di mana kemas kini data dimulakan oleh pelayan.

Bolehkah SSE digunakan dengan mana-mana bahasa sisi pelayan?

Ya, SSE boleh digunakan dengan mana-mana bahasa sisi pelayan yang dibolehkan HTTP. Ini termasuk bahasa seperti Node.js, Python, PHP, dan Ruby. Kuncinya adalah untuk menetapkan header HTTP yang betul dan format data mengikut spesifikasi SSE.

Bagaimana menangani kesilapan sambungan atau gangguan dalam SSE?

API Eventsource yang digunakan untuk melaksanakan SSE pada klien akan secara automatik cuba untuk menyambung semula ke pelayan apabila sambungan hilang. Anda juga boleh mendengar acara "Ralat" pada objek Eventsource untuk mengendalikan kesilapan atau gangguan sambungan secara manual.

Bolehkah saya menggunakan SSE untuk menghantar data dari klien ke pelayan?

Tidak, SSE dimaksudkan untuk komunikasi sehala dari pelayan ke klien. Jika anda perlu menghantar data dari klien ke pelayan, anda boleh menggunakan permintaan Ajax tradisional atau beralih ke teknologi komunikasi dua hala, seperti WebSockets.

Adakah SSE menyokong semua penyemak imbas?

Pelayar yang paling moden menyokong SSE. Walau bagaimanapun, Internet Explorer tidak menyokong SSE. Anda boleh menggunakan polyfills seperti Eventsource.js untuk menambah sokongan untuk SSE dalam pelayar yang tidak disokong.

Bagaimana untuk menutup sambungan SSE?

anda boleh menutup sambungan SSE dengan memanggil kaedah close() pada objek Eventsource. Ini akan menghalang pelayan daripada menghantar lebih banyak kemas kini kepada pelanggan.

Bolehkah saya menggunakan SSE untuk aplikasi masa nyata berbilang pengguna?

Ya, anda boleh menggunakan SSE untuk aplikasi masa nyata berbilang pengguna. Walau bagaimanapun, ingat bahawa setiap pengguna membuka sambungan berasingan ke pelayan. Jika anda mempunyai sejumlah besar pengguna, ini boleh menyebabkan beban pelayan yang berlebihan.

Bagaimana menggunakan SSE untuk menghantar pelbagai jenis acara?

Anda boleh menghantar pelbagai jenis acara dengan memasukkan medan "Acara" dalam data yang dihantar dari pelayan. Pelanggan kemudian boleh mendengar jenis acara khusus ini menggunakan kaedah addEventListener() pada objek Eventsource.

Bolehkah saya menggunakan SSE dengan API REST?

Ya, anda boleh menggunakan SSE dengan API REST. Pelayan boleh menghantar kemas kini kepada pelanggan apabila sumber berubah. Ini berguna untuk mengekalkan keadaan pelanggan dan pelayan yang disegerakkan tanpa mengundi.

Atas ialah kandungan terperinci Melaksanakan teknologi push menggunakan acara yang dilanda pelayan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!