Menerima data masa nyata dengan acara HTML5 Server-SENT (SSE).

Acara Server-Sent (SSE) adalah penyelesaian ringan yang disediakan oleh HTML5 untuk menolak kemas kini masa nyata kepada penyemak imbas. Ia menyedari komunikasi sehala melalui sambungan HTTP yang panjang, yang sesuai untuk pasaran saham, pemberitahuan dan senario lain. Apabila menggunakannya, buat contoh Eventsource dan dengar mesej: Const Eventsource = New Eventsource ('/Stream'); eventsource.onMessage = function (event) {console.log ('Mesej yang diterima:', event.data); }; Pelayan perlu menetapkan jenis kandungan ke teks/aliran peristiwa, pastikan sambungan terbuka, dan data output: Kandungan \ n \ n dalam format. Pertimbangan umum termasuk: 1. Konfigurasi CORS untuk menyelesaikan masalah silang domain; 2. Kawalan semula masa untuk mencapai penyambungan semula automatik; 3. Menggunakan Acara: Tentukan jenis acara tersuai; 4. Menguruskan masa tamat sambungan untuk mengelakkan kebocoran sumber. Berbanding dengan WebSocket, SSE lebih mudah dan mudah digunakan, menyokong protokol HTTP untuk menembusi firewall, tetapi hanya komunikasi satu arah dan mempunyai keserasian yang sedikit miskin. Ia sesuai untuk senario push masa nyata tanpa interaksi yang kerap.

Dalam pembangunan web, jika anda perlu menolak kemas kini masa nyata dari pelayan ke penyemak imbas, HTML5 menyediakan penyelesaian ringan: acara pelayan-sent (SSE). Berbanding dengan WebSocket, lebih mudah dan mudah dilaksanakan, dan sangat sesuai untuk senario di mana hanya pelayan perlu berkomunikasi sehala kepada pelanggan.

Apakah peristiwa yang dilanda pelayan?

Acara Server-Sent adalah sebahagian daripada HTML5, yang membolehkan pelayan menolak data ke pelayar melalui sambungan HTTP Long. Tidak seperti kaedah pengundian tradisional, SSE akan terus dibuka selepas mewujudkan sambungan, dan pelayan boleh menghantar data baru pada bila-bila masa, seperti petikan saham, pemberitahuan masa nyata atau mesej sembang.

Penggunaan asasnya adalah untuk membuat contoh EventSource dan menunjuk ke URL di sisi pelayan:

 const Eventsource = New Eventsource ('/Stream');
eventsource.onMessage = function (event) {
    console.log ('Mesej yang diterima:', event.data);
};

Selagi pelayan terus menghantar data, pelanggan boleh terus menerimanya.

Bagaimana cara menetapkan sokongan SSE di sisi pelayan?

Bahasa backend yang berbeza mempunyai kaedah pelaksanaan yang berbeza, tetapi titik teras adalah sama: Pastikan sambungan terbuka dan output kandungan dalam format SSE.

Ambil Node.js Express sebagai contoh:

 app.get ('/stream', (req, res) => {
    res.setheader ('kandungan-jenis', 'teks/aliran peristiwa');
    res.setheader ('Cache-Control', 'No-Cache');

    // simulasi menghantar data setInterval (() => {
        res.write (`data: $ {new date ()} \ n \ n`);
    }, 1000);
});

Mata Utama:

• Tetapkan tajuk tindak balas yang betul, terutamanya text/event-stream
• Jangan menamatkan tindak balas terlalu awal, pastikan sambungan terbuka
• Format data mestilah data: 内容\n\n , dan dua garis baru menunjukkan akhir mesej

Bahasa lain seperti Python (Flask), PHP, atau Java Spring Boot boleh dilaksanakan sama.

Soalan dan nota yang sering ditanya

1. Isu-isu silang domain Sekiranya bahagian depan dan back-end tidak berada di bawah nama domain yang sama, CORS perlu dikonfigurasikan untuk memastikan permintaan yang dimulakan EventSource dibenarkan:

 Akses-kawalan-Allow-Origin: *

Atau tentukan nama domain tertentu.

2. Mekanisme Sambung semula Automatik Apabila sambungan terganggu, penyemak imbas secara automatik akan cuba menyambung semula, dan masa menunggu lalai adalah 3 saat. Anda boleh mengawal selang ini di sebelah pelayan:

 Cuba semula: 5000

3. Jenis acara tersuai Sebagai tambahan kepada onmessage lalai, anda juga boleh menentukan nama acara lain:

 Acara: Kemas kini
Data: {"type": "News", "Content": "News News akan datang"}

Pemantauan depan:

 Eventsource.AdDeventListener ('Update', Function (Event) {
    console.log ('Kemas kini diterima:', event.data);
});

4. Masa tamat sambungan dan pelepasan sumber Berhati -hatilah untuk tidak membiarkan sambungan hang selama -lamanya. Pelayan harus mempunyai mekanisme untuk mengesan sama ada pelanggan terputus dan melepaskan sumber dalam masa untuk mengelakkan kebocoran ingatan.

Bilakah saya harus menggunakan SSE dan bukannya WebSocket?

Websocket lebih berkuasa dan menyokong komunikasi dua hala, tetapi juga mempunyai kerumitan yang lebih tinggi. Jika anda hanya memerlukan pelayan untuk menolak maklumat kepada pelanggan dan tidak memerlukan interaksi yang kerap, SSE adalah pilihan yang lebih baik.

Kelebihan termasuk:

• Memudahkan proses pembangunan, mudah dilaksanakan kedua -dua bahagian depan dan belakang
• Menyokong penyambungan semula automatik
• Protokol HTTP standard boleh digunakan untuk memudahkan menembusi firewall

Kelemahannya juga jelas:

• Hanya komunikasi sehala dari pelayan ke klien yang disokong
• Keserasian penyemak imbas sedikit miskin (iaitu kelebihan versi dan lebih lama tidak disokong)

Pada dasarnya itu sahaja. SSE tidak rumit, tetapi dalam penggunaan sebenar, anda harus memberi perhatian kepada pengurusan sambungan, pengendalian ralat dan pengoptimuman prestasi. Jika anda hanya ingin membuat sistem pemberitahuan masa nyata yang mudah, SSE adalah pilihan yang ringan dan praktikal.

Atas ialah kandungan terperinci Menerima data masa nyata dengan acara HTML5 Server-SENT (SSE).. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!