Laravel Echo
Penyiaran
pengantar
Konfigurasi
Prasyarat Driver
Gambaran Umum Konsep
Menggunakan Aplikasi Contoh
Mendefinisikan Acara Siaran
Nama Siaran
Data Siaran
Antrean Broadcast
Ketentuan Siaran
Otorisasi Kanal
Menentukan Rute Otorisasi
Menentukan Callback Otorisasi
Mendefinisikan Kelas Saluran
Acara Penyiaran
Hanya Untuk Orang Lain
Menerima Siaran
Memasang Laravel Echo
Mendengarkan Acara
Meninggalkan Saluran
Namespaces
Saluran Hadir
Mengotorisasi Saluran Keberadaan
Bergabung dengan Saluran Keberadaan
Broadcasting To Presence Channels
Acara Klien
Notifikasi
pengantarDalam banyak aplikasi web modern, WebSockets digunakan untuk mengimplementasikan antarmuka pengguna realtime dan live-updating. Ketika beberapa data diperbarui di server, pesan biasanya dikirim melalui koneksi WebSocket untuk ditangani oleh klien. Ini memberikan alternatif yang lebih kuat dan efisien untuk terus melakukan polling terhadap aplikasi Anda untuk perubahan.Untuk membantu Anda dalam membangun jenis aplikasi ini, Laravel mempermudah "menyiarkan" acara Anda melalui sambungan WebSocket. Menyiarkan acara Laravel Anda memungkinkan Anda untuk berbagi nama acara yang sama antara kode sisi server dan aplikasi JavaScript sisi klien Anda.
Sebelum terjun ke acara penyiaran, pastikan Anda telah membaca semua dokumentasi mengenai acara dan pendengar Laravel.KonfigurasiSemua konfigurasi penyiaran acara aplikasi Anda disimpan dalam file konfigurasi config / broadcasting.php. Laravel mendukung beberapa driver siaran di luar kotak: Pusher, Redis, dan driver log untuk pengembangan dan debugging lokal. Selain itu, driver null disertakan yang memungkinkan Anda untuk sepenuhnya menonaktifkan penyiaran. Contoh konfigurasi disertakan untuk setiap driver ini dalam file konfigurasi config / broadcasting.php.Penyedia Layanan BroadcastSebelum menyiarkan acara apa pun, Anda harus terlebih dahulu mendaftarkan App \ Providers \ BroadcastServiceProvider. Dalam aplikasi Laravel yang baru, Anda hanya perlu menghapus tanda pada penyedia ini di dalam larik penyedia file konfigurasi config / app.php Anda. Penyedia ini akan memungkinkan Anda untuk mendaftarkan rute otorisasi siaran dan panggilan balik.Token CSRFLaravel Echo akan membutuhkan akses ke token CSRF sesi saat ini. Anda harus memverifikasi bahwa elemen HTML head aplikasi Anda mendefinisikan tag meta yang berisi token CSRF:<meta name = "csrf-token" content = "{{csrf_token ()}}">Prasyarat DriverPusherJika Anda menyiarkan acara Anda melalui Pusher, Anda harus menginstal SDK PHP Pusher menggunakan manajer paket Komposer:komposer membutuhkan pusher / pusher-php-server "~ 3.0"Selanjutnya, Anda harus mengkonfigurasi kredensial Pusher Anda di file konfigurasi config / broadcasting.php. Contoh konfigurasi Pusher sudah disertakan dalam file ini, memungkinkan Anda dengan cepat menentukan kunci, rahasia, dan ID aplikasi Pusher Anda. Konfigurasi pusher konfigurasi config / broadcasting.php juga memungkinkan Anda untuk menentukan opsi tambahan yang didukung oleh Pusher, seperti klaster:'options' => [
'klaster' => 'eu',
'dienkripsi' => benar],Saat menggunakan Pusher dan Laravel Echo, Anda harus menentukan pusher sebagai penyiar yang Anda inginkan ketika membuat instance Echo di file sumber daya / js / bootstrap.js Anda:impor Echo dari "laravel-echo"window.Pusher = require ('pusher-js');window.Echo = new Echo ({
penyiar: 'pusher',
kunci: 'Anda-pusher-key'});RedisJika Anda menggunakan penyiar Redis, Anda harus menginstal pustaka Predis:komposer membutuhkan predis / predisPenyiar Redis akan menyiarkan pesan menggunakan fitur pub / sub Redis; Namun, Anda harus memasangkan ini dengan server WebSocket yang dapat menerima pesan dari Redis dan menyiarkannya ke saluran WebSocket Anda.Ketika penyiar Redis menerbitkan acara, itu akan dipublikasikan pada nama saluran yang ditentukan acara dan payload akan berupa string JSON yang dienkode yang berisi nama peristiwa, payload data, dan pengguna yang menghasilkan ID soket peristiwa (jika berlaku).Socket.IOJika Anda akan memasangkan penyiar Redis dengan server Socket.IO, Anda harus menyertakan perpustakaan klien Socket.IO JavaScript di aplikasi Anda. Anda dapat menginstalnya melalui manajer paket NPM:npm install --save socket.io-clientSelanjutnya, Anda perlu instantiate Echo dengan konektor socket.io dan host.impor Echo dari "laravel-echo"window.io = require ('socket.io-client');window.Echo = new Echo ({
penyiar: 'socket.io',
host: window.location.hostname + ': 6001'});Akhirnya, Anda perlu menjalankan server Socket.IO yang kompatibel. LARAVEL tidak termasuk implementasi server Socket.IO; namun, server Socket.IO yang dikelola oleh komunitas saat ini dikelola di repositori GitHub tlaverdure / laravel-echo-server.Prasyarat AntreanSebelum acara penyiaran, Anda juga perlu mengonfigurasi dan menjalankan pendengar antrian. Semua acara penyiaran dilakukan melalui antrian pekerjaan sehingga waktu respon dari aplikasi Anda tidak terkena dampak serius.
Gambaran Umum KonsepAcara siaran Laravel memungkinkan Anda untuk menyiarkan acara Laravel sisi server Anda ke aplikasi JavaScript sisi klien menggunakan pendekatan berbasis driver ke WebSockets. Saat ini, kapal Laravel dengan driver Pusher dan Redis. Peristiwa dapat dengan mudah dikonsumsi di sisi klien menggunakan paket Laravel Echo Javascript.Acara disiarkan melalui "saluran", yang dapat ditetapkan sebagai publik atau pribadi. Setiap pengunjung ke aplikasi Anda dapat berlangganan saluran publik tanpa otentikasi atau otorisasi apa pun; namun, untuk berlangganan saluran pribadi, pengguna harus diautentikasi dan diizinkan untuk mendengarkan saluran tersebut.Menggunakan Aplikasi ContohSebelum menyelam ke setiap komponen penyiaran acara, mari kita lihat ikhtisar tingkat tinggi menggunakan toko e-commerce sebagai contoh. Kami tidak akan membahas detail konfigurasi Pusher atau Laravel Echo karena akan dibahas secara rinci di bagian lain dari dokumentasi ini.Dalam aplikasi kami, mari kita asumsikan kita memiliki halaman yang memungkinkan pengguna untuk melihat status pengiriman untuk pesanan mereka. Mari kita berasumsi bahwa acara ShippingStatusUpdated diaktifkan ketika pembaruan status pengiriman diproses oleh aplikasi:event (ShippingStatus baru ($ update));Antarmuka ShouldBroadcastKetika seorang pengguna melihat salah satu pesanan mereka, kami tidak ingin mereka harus me-refresh halaman untuk melihat pembaruan status. Sebaliknya, kami ingin menyiarkan pembaruan ke aplikasi saat dibuat. Jadi, kita perlu menandai acara ShippingStatusUpdated dengan antarmuka ShouldBroadcast. Ini akan memerintahkan Laravel untuk menyiarkan acara ketika dipecat:<? phpnamespace App \ Events;menggunakan Illuminate \ Broadcasting \ Channel;gunakan Illuminate \ Queue \ SerializesModels;menggunakan Illuminate \ Broadcasting \ PrivateChannel;gunakan Illuminate \ Broadcasting \ PresenceChannel;gunakan Illuminate \ Broadcasting \ InteractsWithSockets;menggunakan Illuminate \ Contracts \ Broadcasting \ ShouldBroadcast;kelas ShippingStatusUpdated mengimplementasikan ShouldBroadcast{
/ **
* Informasi tentang pembaruan status pengiriman.
*
* String @var
* /
pembaruan $ publik;}Antarmuka ShouldBroadcast membutuhkan acara kami untuk menentukan metode broadcastOn. Metode ini bertanggung jawab untuk mengembalikan saluran yang akan disiarkan acara. Stub kosong dari metode ini sudah didefinisikan pada kelas acara yang dihasilkan, jadi kita hanya perlu mengisi detailnya. Kami hanya ingin agar pembuat pesanan dapat melihat pembaruan status, jadi kami akan menyiarkan acara di saluran pribadi yang terikat pada pesanan:/ **
* Dapatkan saluran acara harus disiarkan.
*
* @return array
* /siaran fungsi publikOn (){
kembalikan PrivateChannel baru ('order.'. $ this-> update-> order_id);}Otorisasi KanalIngat, pengguna harus diizinkan untuk mendengarkan di saluran pribadi. Kami dapat menentukan aturan otorisasi saluran kami di file routes / channels.php. Dalam contoh ini, kita perlu memverifikasi bahwa setiap pengguna mencoba untuk mendengarkan pada saluran private order.1 sebenarnya adalah pembuat pesanan:Broadcast :: channel ('order. {OrderId}', fungsi ($ user, $ orderId) {
return $ user-> id === Order :: findOrNew ($ orderId) -> user_id;});Metode saluran menerima dua argumen: nama saluran dan callback yang mengembalikan true atau false yang menunjukkan apakah pengguna berwenang untuk mendengarkan saluran tersebut.Semua callback otorisasi menerima pengguna yang diautentikasi sebagai argumen pertama dan parameter wildcard tambahan sebagai argumen berikutnya. Dalam contoh ini, kami menggunakan placeholder {orderId} untuk menunjukkan bahwa bagian "ID" dari nama saluran adalah wildcard.Mendengarkan Siaran AcaraSelanjutnya, yang tersisa adalah mendengarkan acara di aplikasi JavaScript kami. Kita bisa melakukan ini menggunakan Laravel Echo. Pertama, kami akan menggunakan metode pribadi untuk berlangganan saluran pribadi. Kemudian, kita dapat menggunakan metode mendengarkan untuk mendengarkan acara ShippingStatusUpdated. Secara default, semua properti publik acara akan disertakan pada acara siaran:Echo.private (`order. $ {OrderId}`)
.listen ('ShippingStatusUpdated', (e) => {
console.log (e.update);
});Mendefinisikan Acara SiaranUntuk menginformasikan Laravel bahwa acara tertentu harus disiarkan, terapkan antarmuka Illuminate \ Contracts \ Broadcasting \ ShouldBroadcast di kelas acara. Antarmuka ini sudah diimpor ke semua kelas peristiwa yang dihasilkan oleh kerangka kerja sehingga Anda dapat dengan mudah menambahkannya ke salah satu acara Anda.Antarmuka ShouldBroadcast mengharuskan Anda untuk menerapkan metode tunggal: broadcastOn. Metode broadcastOn harus mengembalikan saluran atau larik saluran yang akan disiarkan acara. Saluran harus berupa saluran, Saluran Pribadi, atau Saluran Keberadaan. Contoh Saluran mewakili saluran publik yang dapat dilanggankan oleh pengguna mana pun, sedangkan Saluran Pribadi dan Saluran Keberadaan mewakili saluran pribadi yang memerlukan otorisasi saluran:<? phpnamespace App \ Events;menggunakan Illuminate \ Broadcasting \ Channel;gunakan Illum
Acara PenyiaranSetelah Anda mendefinisikan sebuah acara dan menandainya dengan antarmuka ShouldBroadcast, Anda hanya perlu menjalankan event menggunakan fungsi acara. Dispatcher acara akan melihat bahwa acara ditandai dengan antarmuka ShouldBroadcast dan akan mengantri acara untuk penyiaran:event (ShippingStatus baru ($ update));Hanya Untuk Orang LainSaat membuat aplikasi yang menggunakan siaran acara, Anda dapat mengganti fungsi acara dengan fungsi siaran. Seperti fungsi acara, fungsi siaran mengirimkan acara ke pendengar sisi server Anda:disiarkan (ShippingStatus baru ($ update));Namun, fungsi siaran juga mengekspos metode toOthers yang memungkinkan Anda untuk mengecualikan pengguna saat ini dari penerima siaran:disiarkan (baru ShippingStatusUpdated ($ update)) -> toOthers ();Untuk lebih memahami kapan Anda mungkin ingin menggunakan metode toOthers, mari kita bayangkan aplikasi daftar tugas di mana pengguna dapat membuat tugas baru dengan memasukkan nama tugas. Untuk membuat tugas, aplikasi Anda mungkin membuat permintaan ke / tugas titik akhir yang menyiarkan penciptaan tugas dan mengembalikan representasi JSON dari tugas baru. Ketika aplikasi JavaScript Anda menerima respons dari titik akhir, mungkin langsung memasukkan tugas baru ke dalam daftar tugasnya seperti:axios.post ('/ tugas', tugas)
.then ((tanggapan) => {
this.tasks.push (response.data);
});Namun, ingat bahwa kami juga menyiarkan pembuatan tugas. Jika aplikasi JavaScript Anda mendengarkan acara ini untuk menambahkan tugas ke daftar tugas, Anda akan memiliki tugas duplikat dalam daftar Anda: satu dari titik akhir dan satu dari siaran. Anda dapat menyelesaikan ini dengan menggunakan metode toOthers untuk memerintahkan penyiar agar tidak menyiarkan acara ke pengguna saat ini.
Acara Anda harus menggunakan sifat Illuminate \ Broadcasting \ InteractsWithSockets untuk memanggil metode toOthers.KonfigurasiKetika Anda menginisialisasi contoh Echo Laravel, ID soket ditetapkan ke koneksi. Jika Anda menggunakan Vue dan Axios, ID soket akan secara otomatis dilampirkan ke setiap permintaan keluar sebagai header X-Socket-ID. Kemudian, ketika Anda memanggil metode toOthers, Laravel akan mengekstrak ID soket dari header dan memerintahkan penyiar untuk tidak menyiarkan ke koneksi apa pun dengan ID soket tersebut.Jika Anda tidak menggunakan Vue dan Axios, Anda perlu secara manual mengkonfigurasi aplikasi JavaScript Anda untuk mengirim header X-Socket-ID. Anda dapat mengambil ID soket menggunakan metode Echo.socketId:var socketId = Echo.socketId ();Menerima SiaranMemasang Laravel EchoLaravel Echo adalah pustaka JavaScript yang membuatnya tidak perlu bersusah payah untuk berlangganan saluran dan mendengarkan acara yang disiarkan Laravel. Anda dapat menginstal Echo melalui manajer paket NPM. Dalam contoh ini, kami juga akan menginstal paket pusher-js karena kami akan menggunakan penyiaran Pusher:npm install --save laravel-echo pusher-jsSetelah Echo diinstal, Anda siap untuk membuat contoh Echo segar di JavaScript aplikasi Anda. Tempat yang bagus untuk melakukan ini adalah di bagian bawah file sumber daya / js / bootstrap.js yang disertakan dengan kerangka Laravel:impor Echo dari "laravel-echo"window.Echo = new Echo ({
penyiar: 'pusher',
kunci: 'Anda-pusher-key'});Saat membuat contoh Echo yang menggunakan konektor pendorong, Anda juga dapat menentukan kluster serta apakah koneksi harus dienkripsi:window.Echo = new Echo ({
penyiar: 'pusher',
kunci: 'Anda-pusher-key',
klaster: 'eu',
terenkripsi: benar});Mendengarkan AcaraSetelah Anda menginstal dan menginisialisasi Echo, Anda siap untuk mulai mendengarkan siaran acara. Pertama, gunakan metode saluran untuk mengambil turunan saluran, lalu panggil metode dengarkan untuk mendengarkan acara tertentu:Echo.channel ('pesanan')
.listen ('OrderShipped', (e) => {
console.log (e.order.name);
});Jika Anda ingin mendengarkan acara di saluran pribadi, gunakan metode pribadi sebagai gantinya. Anda dapat terus melakukan panggilan ke metode mendengarkan untuk mendengarkan beberapa acara pada satu saluran:Echo.private ('pesanan')
.mendengarkan(...)
.mendengarkan(...)
.mendengarkan(...);Meninggalkan SaluranUntuk meninggalkan saluran, Anda dapat memanggil metode cuti pada contoh Echo Anda:Echo.leave ('pesanan');NamespacesAnda mungkin telah memperhatikan pada contoh di atas bahwa kami tidak menentukan namespace lengkap untuk kelas acara. Ini karena Echo akan secara otomatis menganggap peristiwa tersebut terletak di ruang nama App \ Events. Namun, Anda dapat mengkonfigurasi ruang nama root saat Anda membuat instance Echo dengan meneruskan opsi konfigurasi namespace:window.Echo = new Echo ({
penyiar: 'pusher',
kunci: 'Anda-pusher-key',
namespace: 'App.Other.Namespace'});Atau, Anda dapat awalan kelas acara dengan. ketika berlangganan mereka menggunakan Echo. Ini akan memungkinkan Anda untuk selalu menentukan nama kelas yang sepenuhnya memenuhi syarat:Echo.channel ('pesanan')
.listen ('. Namespace.Event.Class', (e) => {
// //
Sumber : https://laravel.com/docs/5.7/broadcasting#introduction
