Pentadbiran sistem

Cara Menggunakan Acara Html5 Server-Sent

Cara Menggunakan Acara Html5 Server-Sent

Objektif

Setelah membaca tutorial ini, anda harus dapat memahami dan memanfaatkan acara Server HTML5.

Keperluan

  • Tiada keperluan tertentu diperlukan

Konvensyen

  • # - Memerlukan arahan Linux yang diberikan dengan keistimewaan akar sama ada
    secara langsung sebagai pengguna akar atau dengan menggunakan sudo perintah
  • $ - Memandangkan perintah Linux dilaksanakan sebagai pengguna yang tidak berkepala biasa

Pengenalan

Acara Server-Sent adalah Html5 teknologi yang membolehkan pelanggan memantau pemberitahuan acara secara automatik dari pelayan, dan bertindak balas seperti yang diperlukan. Teknologi ini sangat berguna untuk memberitahu peristiwa langsung, melaksanakan, contohnya, aplikasi pemesejan langsung atau suapan berita. Dalam tutorial ini, kita akan melihat cara melaksanakan teknologi ini menggunakan PHP dan JavaScript.

Contoh mudah

Demi tutorial ini, kami akan bekerjasama dengan senarai "haiwan" yang akan dipaparkan dalam halaman HTML yang mudah. Semasa dalam aplikasi dunia nyata data akan disimpan dan diambil dari pangkalan data, dalam kes ini, untuk kesederhanaan, kami akan menggunakan array PHP. Apa yang ingin kita peroleh adalah pemberitahuan masa nyata tentang perubahan dalam senarai haiwan, supaya kita dapat mengemas kini halaman HTML kita dengan sewajarnya, tanpa perlu menyegarkannya.

Kod sampingan pelayan

Untuk memulakan, mari kita mengisi pelbagai haiwan kita di haiwan.php Fail (kami bekerja di direktori root VirtualHost pelayan web kami):

Salinan

Simpan dan tutup fail sebagai haiwan.php. Sekarang, untuk bahagian yang paling penting: kita perlu menulis skrip yang akan memancarkan mesej yang akan digunakan akhir-akhir ini oleh kod JavaScript sisi pelanggan kami. Dengan banyak fantasi kita akan menamakan skrip Skrip.php. Kodnya sangat mudah, di sini adalah:

Salinan

Perkara pertama yang perlu diperhatikan di sini ialah kami memanggil kepala fungsi dalam baris 2-3: ini adalah fungsi yang digunakan untuk menghantar HEADER HTTP RAW. Dalam kes ini kita memanggilnya dua kali: yang pertama dalam baris 2 untuk menyiapkan CACHE-CONTROL medan header dan nyatakan arahan caching (tiada caching halaman), yang kedua dalam baris 3, untuk menetapkan Jenis kandungan ke teks/aliran acara. Persediaan tajuk itu diperlukan untuk skrip kami berfungsi dengan betul. Ia juga penting untuk melihat bahawa untuk berfungsi dengan betul, kepala fungsi mesti selalu dipanggil sebelum output lain dibuat.

Setelah menubuhkan tajuk HTML, kami hanya menggunakan memerlukan_once pernyataan dalam baris 6 untuk menghendaki kandungan haiwan.php fail, yang mengandungi array yang kami tulis sebelumnya. Dalam senario kes sebenar, ini akan digantikan oleh a Pertanyaan SQL untuk mendapatkan maklumat tersebut dari pangkalan data.

Akhirnya dalam baris 9-11, kami menghantar respons kami kepada pelanggan: JSON-Encoded Array "Haiwan". Perkara yang sangat penting untuk diperhatikan: Format peristiwa sampingan pelayan memerlukan setiap respons yang dihantar oleh pelayan untuk diawali oleh data: rentetan dan diikuti oleh dua watak baru. Dalam kes ini kita menggunakan \ n Watak Newline kerana kita berjalan pada platform seperti Unix; untuk memastikan keserasian silang platform kami akan menggunakan Php_eol malar.

Malah mungkin untuk memecahkan mesej tindak balas pada pelbagai baris: dalam kes ini setiap baris, seperti yang dikatakan sebelum ini, mesti bermula dengan "data:" dan mesti diikuti oleh satu watak baru. Garis baru tambahan hanya diperlukan pada baris terakhir.

Pelayan juga boleh mengawal seberapa kerap pelanggan harus cuba menyambung semula (lalai adalah 3 detik), dan nama peristiwa (lalai adalah "mesej") dihantar kepada pelanggan. Untuk menyesuaikan bekas, kita mesti menggunakan cuba semula Arahan diikuti dengan selang waktu yang dikehendaki, dinyatakan dalam milisaat. Sebagai contoh, untuk menyediakan selang 1 saat:

echo "cuba semula: 1000 \ n";

Perhatikan bahawa walaupun di sini, garis baru yang diperlukan diperlukan. Untuk menukar nama acara, sebaliknya, kita mesti menggunakan peristiwa Arahan:

echo "Acara: CustomEvent \ n";

Acara lalai adalah "Mesej": Ini penting kerana acara itu mesti ditentukan dalam kod JavaScript pelanggan ketika menambahkan pendengar acara, seperti yang akan kita lihat dalam seketika.

Setelah menghantar respons kami, kami memanggil siram Fungsi: Ini diperlukan untuk memanfaatkan data kepada pelanggan.

Kod sampingan pelanggan

Perkara pertama yang akan kami lakukan untuk menyediakan fail HTML kami dengan senarai haiwan yang ada:
Salinan

Ini benar -benar beberapa HTML asas dengan sedikit PHP untuk memaparkan senarai haiwan pada saat pemuatan halaman dan memasukkan kami .Fail JS (skrip.js), tetapi akan pelayan tujuan kami. Sekarang, mari kita lihat bagaimana sebenarnya kita boleh menggunakan acara sampingan pelayan. Perkara pertama yang perlu kita lakukan adalah untuk meneliti Objek Sumber Acara. Dalam fail JavaScript kami, tulis:

Biarkan Eventsource = New Eventsource ('Skrip.php ');
Salinan

Seperti yang dapat anda lihat, kami meluluskan jalan ke skrip pelayan kami sebagai hujah di Eventsource Pembina objek. Objek ini akan membuka sambungan ke pelayan. Sekarang, kita mesti menambah pendengar acara, supaya kita dapat melakukan beberapa tindakan apabila mesej diterima dari pelayan:

Biarkan Eventsource = New Eventsource ('Skrip.php '); Eventsource.addEventListener ("mesej", fungsi (event) biarkan data = json.Parse (peristiwa.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";   );
Salinan

Apabila mesej diterima, kami menggunakan Json.menghuraikan kaedah dalam baris 4 untuk mengubah data yang dihantar oleh pelayan (rentetan, yang terkandung dalam data harta benda objek), ke dalam pelbagai javascript.

Selepas itu kami gelung dalam garis 7-11 melalui semua elemen dengan

  • tag, yang merupakan unsur -unsur senarai haiwan kami: jika sesetengah elemen tidak kelihatan lagi dalam array yang dihantar oleh pelayan, warna teks yang terkandung dalam senarai itu diubah menjadi merah, kerana "haiwan" tidak Lebih lama tersedia (penyelesaian yang lebih baik adalah hanya memasukkan nama elemen yang berubah atau hilang dalam respons pelayan, tetapi tujuan kami di sini hanya untuk menunjukkan bagaimana teknologi berfungsi). Perubahan dalam halaman akan berlaku dalam masa nyata, jadi tidak perlu menyegarkan. Anda dapat melihat bagaimana halaman kami mengambil kesempatan daripada acara yang dihantar oleh pelayan, dalam video di bawah:

    Seperti yang anda lihat, sebaik sahaja "kucing" dikeluarkan dari array "haiwan" (sumber data kami) elemen yang dipaparkan di halaman HTML diubahsuai, untuk mencerminkan perubahan itu.

    Aliran data antara pelayan dan klien boleh terganggu dengan menggunakan Tutup kaedah Eventsource objek:

    Eventsource.Tutup ()

    Untuk mengendalikan sambungan buka, dan ralat peristiwa, pendengar acara khusus boleh ditambah ke objek.

    Tutorial Linux Berkaitan:

    • Perkara yang hendak dipasang di Ubuntu 20.04
    • Cara Menghantar Pemberitahuan Desktop Menggunakan Pemberitahuan-Send
    • Cara Mengendalikan Acara ACPI di Linux
    • Cara Membina Aplikasi TKInter Menggunakan Objek Berorientasikan ..
    • Pengenalan kepada Automasi, Alat dan Teknik Linux
    • Perkara yang perlu dilakukan setelah memasang ubuntu 20.04 Focal Fossa Linux
    • Perintah Linux: Top 20 Perintah Paling Penting yang Anda Perlu ..
    • Perintah Linux Asas
    • Senarai dan Pemasangan Pelanggan FTP di Ubuntu 22.04 Linux ..
    • Muat turun Linux CD/DVD Live