Acara Server-Sent

mata teras

Server Send Events (SSE) adalah kaedah menolak data dan/atau acara DOM dari pelayan ke klien menggunakan aliran, dan sesuai untuk situasi di mana data perlu dikemas kini secara teratur, seperti skor sukan atau petikan saham.
Mencipta objek Eventsource membolehkan anda melanggan aliran acara dan boleh mengendalikan peristiwa terbuka, mesej, dan ralat.
Menghantar acara dari pelayan memerlukan kandungan yang disediakan menggunakan pengekodan
• header (nilai Content-type) dan pengekodan aksara UTF-8. Sintaks untuk pelayan untuk menghantar acara termasuk data, jenis acara, pengenal acara, dan selang semula. text/event-stream
Pengendalian acara boleh menggunakan fungsi
• (hanya untuk aplikasi yang menghantar acara mesej), tetapi kaedah onmessage lebih fleksibel untuk mengendalikan peristiwa tersuai. addEventListener
Pelayar yang paling moden (termasuk Chrome, Firefox, dan Safari) Server Server Server Events (SSE), tetapi Internet Explorer tidak. Bagi aplikasi yang memerlukan sokongan untuk semua pelayar, websocket atau pengundian panjang mungkin lebih sesuai.

Pengenalan
1. melanggan Stream: Objek Eventsource
2. menghantar acara dari pelayan
3. Hantar acara mesej
   1. Hantar acara tersuai
   2. Sambung semula Menggunakan Pengurusan Selang Retry
   3. Tetapkan pengenal unik menggunakan medan ID
   Peristiwa Pemprosesan
4. ralat pemprosesan
5. Perbezaan pelaksanaan pelayar
6. Sokongan Pelayar dan Strategi Fallback
Katakan pasukan bola keranjang kebangsaan negara anda mengambil bahagian dalam Kejohanan Bola Keranjang Dunia. Anda mahu mengikuti permainan, tetapi anda tidak dapat menontonnya kerana masa permainan bertentangan dengan waktu kerja anda.

Nasib baik, Perkhidmatan Berita Kebangsaan anda mempunyai pasukan pembangunan web yang sangat cemerlang. Mereka membina paparan tatal maklumat sukan yang dikemas kini setiap kali pelanggaran atau skor berlaku. Apabila anda melawat URL, kemas kini akan ditolak terus ke penyemak imbas anda. Sudah tentu, anda akan ingin tahu bagaimana mereka melakukannya. Jawapannya ialah: Pelayan menghantar acara tersebut.

Pelayan menghantar acara adalah cara untuk menggunakan aliran untuk menolak data dan/atau acara DOM dari pelayan ke klien. Ia sesuai untuk petikan saham, skor sukan, pengesanan penerbangan, pemberitahuan e -mel - apa -apa keadaan di mana data perlu dikemas kini secara teratur.

Tunggu!

Saya dengar anda berkata, Tidakkah kita sudah melakukan ini menggunakan xmlhttprequest atau websockets? Ya, ya. Walau bagaimanapun, berbuat demikian memerlukan memperluaskan objek ini untuk melaksanakan fungsi Eventsource itu sendiri. langkah berjaga -jaga di sisi pelayan

Oleh kerana pelayan menghantar acara adalah aliran data, mereka memerlukan sambungan jangka panjang. Anda perlu menggunakan pelayan yang boleh mengendalikan sejumlah besar sambungan serentak. Sudah tentu, pelayan yang didorong oleh acara sangat sesuai untuk acara streaming. Ini termasuk Node.js, Juggernaut, dan Twisted. Untuk Nginx, anda boleh menggunakan modul-modul Nginx-Push-Stream. Walau bagaimanapun, konfigurasi pelayan berada di luar skop artikel ini dan akan berbeza -beza bergantung pada pelayan yang anda gunakan.

mari kita lihat cara melanggan aliran menggunakan objek Eventsource. Kemudian kita akan melihat bagaimana peristiwa dihantar dan diproses.

melanggan aliran acara: Objek Eventsource

Membuat objek Eventsource adalah mudah.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

Pembina Eventsource menerima sehingga dua parameter:

• rentetan url (diperlukan);
a Parameter Kamus Pilihan
• yang digunakan untuk menentukan nilai atribut . withCredentials
kamus adalah sintaksis serupa dengan objek, tetapi mereka sebenarnya array data bersekutu dengan pasangan nilai nama yang ditetapkan. Dalam kes ini,

adalah satu -satunya ahli kamus yang mungkin. Nilainya boleh benar atau palsu. (Untuk maklumat lanjut mengenai kamus, lihat spesifikasi Web IDL.)

withCredentials Parameter kamus hanya diperlukan jika permintaan silang domain untuk kelayakan pengguna (cookies). Setakat ini, tiada penyemak imbas menyokong permintaan Eventsource silang domain. Oleh itu, kami tidak akan memasukkan parameter kedua dalam contoh.

Apabila sambungan Eventsource dibuka, ia akan mencetuskan acara

. Kami boleh menentukan fungsi yang mengendalikan peristiwa dengan menetapkan harta

. open onopen

Jika terdapat masalah dengan sambungan kami, ralat akan dicetuskan. Kita boleh menggunakan harta

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

untuk menentukan fungsi pengendali untuk peristiwa -peristiwa ini. Kami akan membincangkan punca beberapa peristiwa ralat dalam bahagian "Kesilapan Latihan".

onerror

peristiwa cerita lalai ke peristiwa mesej. Untuk mengendalikan peristiwa mesej, kita boleh menggunakan atribut

evtsrc.onerror = function(openevent){
    // 发生错误时执行的操作
}

untuk menentukan fungsi pengendali.

onmessage

kita juga boleh menggunakan

evtsrc.onmessage = function(openevent){
    // 接收到消息事件时执行的操作
}

untuk mendengar acara. Ini adalah satu -satunya cara untuk mengendalikan peristiwa tersuai, seperti yang akan kita lihat di bahagian Peristiwa Pemprosesan.

addEventListener()

Untuk menutup sambungan, gunakan kaedah

var onerrorhandler = function(openevent){
    // 执行的操作
}
evtsrc.addEventListener('error',onerrorhandler,false);

.

close() Oleh itu, kami mencipta objek Eventsource dan menentukan pengendali untuk peristiwa pembukaan, mesej, dan ralat. Walau bagaimanapun, agar kaedah ini berfungsi, kami memerlukan URL untuk acara streaming.

evtsrc.close();

menghantar acara dari pelayan

Pelayan menghantar acara adalah coretan teks yang disampaikan sebagai sebahagian daripada aliran dari URL. Agar penyemak imbas untuk merawat data kami sebagai aliran, kita mesti:

Gunakan header

(nilai adalah

) untuk menyediakan kandungan;
• Gunakan pengekodan aksara UTF-8. Content-type text/event-stream
Sintaks untuk pelayan menghantar acara adalah mudah. Ia terdiri daripada satu atau lebih pasangan nilai nama medan yang dipisahkan oleh kolon diikuti oleh watak baru. Nama medan boleh mengandungi satu daripada empat nilai yang mungkin.

: Mesej yang akan dihantar.

• : Jenis acara yang dihantar. data:
• : Pengenalpastian acara yang akan digunakan apabila pelanggan menyambung semula. event:
• : Berapa banyak milisaat yang harus dilalui sebelum penyemak imbas cuba menyambung semula ke URL. id:
• di antara mereka, hanya medan retry: yang diperlukan.

Hantar acara mesej

Dalam contoh ini, kami akan menghantar acara untuk mengumumkan pasukan mana yang bermain dalam perlawanan kejohanan kami. Apabila penyemak imbas menerima teks ini, ia menghantar acara mesej.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

Nilai medan

data akan menjadi nilai atribut data atribut peristiwa mesej. Seperti yang disebutkan di atas, pelayan menghantar acara secara lalai adalah acara mesej. Tetapi seperti yang akan kita bincangkan kemudian, kita juga boleh menghantar peristiwa tersuai dengan memasukkan medan event.

kita juga boleh menghantar beberapa keping data sebagai satu acara. Setiap sekeping data harus diikuti oleh watak baru (garis baru garis, pulangan kereta, atau kedua -duanya). Di sini kami mengadakan acara yang merangkumi lokasi permainan dan kehadiran ini.

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

Untuk acara ini, nilai atribut data akan menjadi: Air Canada Centrentoronto, Ontario, Canadaattendance: 19,800.

Sila ambil perhatian garis kosong antara peristiwa. Agar pelanggan menerima acara, acara itu mesti diikuti dengan garis kosong. Komen bermula dengan kolon.

Hantar acara tersuai

Kecuali kami menentukan sebaliknya, jenis acara adalah mesej. Untuk melakukan ini, kita perlu memasukkan medan event. Dalam contoh berikut, kami akan menambah dua acara startingfive ke aliran kami dan menghantar data kami sebagai rentetan dalam format JSON.

evtsrc.onerror = function(openevent){
    // 发生错误时执行的操作
}

di sini, kita perlu mendengar startingfive acara bukannya peristiwa mesej. Walau bagaimanapun, medan data kami masih akan menjadi nilai harta data acara tersebut.

Kami akan membincangkan sifat data dan antara muka MessageEvent dalam bahagian "Peristiwa Pemprosesan".

Menguruskan Sambungan dan Sambung semula

Sekarang, walaupun pelayan menolak peristiwa kepada penyemak imbas, realiti lebih halus. Jika pelayan menyimpan sambungan terbuka, permintaan Eventsource akan menjadi permintaan lanjutan. Jika ia ditutup, penyemak imbas akan menunggu beberapa saat sebelum menyambung semula. Sebagai contoh, jika URL menghantar tag akhir fail, sambungan boleh ditutup.

Setiap penyemak imbas mempunyai selang sambung semula lalai sendiri. Kebanyakan akan menyambung semula selepas 3 hingga 6 saat. Walau bagaimanapun, anda boleh mengawal selang ini dengan memasukkan medan retry. Bidang retry menunjukkan berapa banyak milisaat pelanggan harus menunggu sebelum menyambung semula ke URL. Mari kita bina dan tukar acara kami dari contoh di atas untuk memasukkan selang masa 5 (5000 milisaat).

evtsrc.onmessage = function(openevent){
    // 接收到消息事件时执行的操作
}

aliran acara boleh disimpan aktif selagi pelanggan disambungkan. Bergantung pada seni bina dan aplikasi anda, anda mungkin mahu pelayan menutup sambungan secara berkala.

Tetapkan pengenal unik menggunakan medan ID

Apabila penyemak imbas menyambung semula ke URL, ia akan menerima sebarang data yang tersedia di titik sambungan. Walau bagaimanapun, untuk paparan tatal maklumat permainan, kami mungkin mahu membiarkan pengunjung mengetahui apa yang dia terlepas. Inilah sebabnya amalan terbaik untuk menetapkan ID ke setiap acara. Dalam contoh berikut, kami menghantar ID sebagai sebahagian daripada acara pemarkahan.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

Nilai harus unik untuk aliran. Dalam kes ini, kami menggunakan masa skor pukulan.

Medan

id menjadi sifat lastEventId objek acara ini. Tetapi ia mempunyai tujuan lain. Jika sambungan ditutup, penyemak imbas akan memasukkan header Last-Event-ID dalam permintaan seterusnya. Fikirkannya sebagai penanda buku untuk aliran itu. Jika header Last-Event-ID wujud, anda boleh menyesuaikan respons aplikasi supaya hanya peristiwa yang mengikutinya.

Peristiwa Pemprosesan

Seperti yang disebutkan di atas, semua peristiwa lalai ke peristiwa mesej. Setiap acara mesej mempunyai tiga sifat, yang ditakrifkan oleh antara muka MessageEvent.

event.data

Mengembalikan data atau mesej yang dihantar sebagai sebahagian daripada acara mesej.

event.origin

Mengembalikan sumber mesej, yang biasanya merupakan rentetan yang mengandungi skema untuk menghantar mesej (contohnya: HTTP, HTTPS), nama host, dan pelabuhan.

event.lastEventID

Mengembalikan pengecam unik acara terakhir yang diterima.

Setiap kali acara mesej dicetuskan, fungsi onmessage kami akan dipanggil. Ini berfungsi hebat untuk aplikasi yang anda hanya menghantar acara mesej. Walau bagaimanapun, jika anda ingin menghantar skor atau startingfive acara (seperti yang ditunjukkan dalam contoh kami), batasannya menjadi jelas. Lebih fleksibel menggunakan addEventListener. Dalam kod berikut, kami menggunakan addEventListener untuk mengendalikan acara startingfive.

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

(bahagian kedua, disebabkan oleh batasan ruang, sila tanya soalan dalam perenggan.)

Atas ialah kandungan terperinci Acara Server-Sent. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!