Cara menggunakan acara html5 server-sent

Hal pertama yang perlu diperhatikan di sini adalah bahwa kami menelepon header Fungsi dalam baris 2-3: Ini adalah fungsi yang digunakan untuk mengirim header http mentah. Dalam hal ini kami menyebutnya dua kali: yang pertama di baris 2 untuk mengatur Kontrol cache bidang header dan tentukan arahan caching (tidak ada cache halaman), yang kedua dalam baris 3, untuk mengatur Jenis konten ke Teks/Event-stream. Pengaturan header tersebut diperlukan agar skrip kami berfungsi dengan benar. Penting juga untuk memperhatikan bahwa bekerja dengan benar, header Fungsi harus selalu dipanggil sebelum output lain dibuat.

Setelah menyiapkan header HTML, kami hanya menggunakan membutuhkan_once pernyataan di baris 6 untuk meminta konten dari Hewan.php file, yang berisi array yang kami tulis sebelumnya. Dalam skenario kasus nyata, ini akan digantikan oleh a Kueri SQL untuk mengambil informasi tersebut dari database.

Akhirnya di baris 9-11, kami mengirimkan tanggapan kami kepada klien: JSON-encoded Array "Hewan". Suatu hal yang sangat penting untuk diperhatikan: Format acara sisi server mengharuskan setiap respons yang dikirim oleh server diawali oleh data: string dan diikuti oleh dua Karakter baru. Dalam hal ini kami menggunakan \N Karakter baru karena kami berjalan di platform seperti UNIX; Untuk memastikan kompatibilitas lintas platform, kami akan menggunakan Php_eol konstan.

Bahkan mungkin untuk memecahkan pesan respons pada beberapa baris: dalam hal ini setiap baris, seperti yang dikatakan sebelumnya, harus dimulai dengan "data:" dan harus diikuti oleh satu karakter garis baru tunggal. Diperlukan garis baru tambahan hanya pada baris terakhir.

Server juga dapat mengontrol seberapa sering klien harus mencoba untuk terhubung kembali (default 3 detik), dan nama peristiwa (default adalah "pesan") yang dikirim ke klien. Untuk menyesuaikan yang pertama, kita harus menggunakan mencoba kembali Petunjuk diikuti oleh interval waktu yang diinginkan, dinyatakan dalam milidetik. Misalnya, untuk mengatur interval 1 detik:

echo "coba lagi: 1000 \ n";

Perhatikan bahwa bahkan di sini, diperlukan garis baru yang tertinggal. Untuk mengubah nama acara, sebagai gantinya, kita harus menggunakan peristiwa pengarahan:

echo "acara: CustomEvent \ n";

Acara default adalah "pesan": Ini penting karena acara tersebut harus ditentukan dalam kode JavaScript klien saat menambahkan pendengar acara, seperti yang akan kita lihat sebentar lagi.

Setelah mengirimkan tanggapan kami, kami menelepon menyiram Fungsi: Ini diperlukan untuk ouput data ke klien.

Kode samping klien

Hal pertama yang akan kami lakukan dengan sisi klien adalah menyiapkan file HTML kami dengan daftar hewan yang tersedia:

Ini benar -benar beberapa HTML dasar dengan sedikit PHP untuk menampilkan daftar hewan pada saat pemuatan halaman dan untuk memasukkan kami .file js (skrip.js), tetapi akan server tujuan kita. Sekarang, mari kita lihat bagaimana sebenarnya kita dapat menggunakan acara sisi server. Hal pertama yang harus kami lakukan adalah instantiate Objek sumber acara. Dalam file JavaScript kami, tulis:

Biarkan eventsource = eventsource baru ('skrip.php '); 

Seperti yang Anda lihat, kami meneruskan jalur ke skrip server kami sebagai argumen di Eventsource Konstruktor Objek. Objek ini akan membuka koneksi ke server. Sekarang, kita harus menambahkan pendengar acara, Sehingga kita dapat melakukan beberapa tindakan saat pesan diterima dari server:

Biarkan eventsource = eventsource baru ('skrip.php '); Eventsource.AddEventListener ("Message", Function (Event) Let Data = JSON.Parse (acara.data); Biarkan ListElements = dokumen.GetElementsByTagname ("Li"); untuk (biarkan i = 0; i < listElements.length; i++)  let animal = listElements[i].textContent; if (!data.includes(animal))  listElements[i].style.color = "red";   ); 

Saat pesan diterima, kami menggunakan Json.parse Metode dalam baris 4 untuk mengubah data yang dikirim oleh server (string, yang terkandung di data Properti Objek Acara), ke dalam array JavaScript.

Setelah itu kami mengulang di baris 7-11 melalui semua elemen dengan

Eventsource.menutup()