Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Laravel 5

Bagaimana Cara Kerja Laravel Broadcasting

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Hari ini, kita akan mengeksplorasi konsep broadcasting dalam web framework Laravel. Ini memungkinkan Anda mengirim pemberitahuan ke sisi klien ketika sesuatu terjadi di sisi server.  Dalam artikel ini, kita akan menggunakan library pihak ketiga Pusher untuk mengirim pemberitahuan ke sisi klien.

Jika Anda pernah ingin mengirim pemberitahuan dari server ke klien ketika sesuatu terjadi pada server di Laravel, Anda mencari fitur broadcasting.

Sebagai contoh, mari kita asumsikan bahwa Anda telah menerapkan aplikasi pengiriman pesan yang memungkinkan pengguna sistem Anda untuk mengirim pesan satu sama lain.  Sekarang, ketika pengguna A mengirim pesan ke pengguna B, Anda ingin memberi tahu pengguna B secara real time. Anda dapat menampilkan popup atau kotak peringatan yang memberi tahu pengguna B tentang pesan baru! 

Merupakan use-case yang sempurna untuk berjalan melalui konsep broadcasting di Laravel, dan itulah yang akan kami terapkan dalam artikel ini.

Jika Anda bertanya-tanya bagaimana server dapat mengirim pemberitahuan ke klien, itu menggunakan socket di bawah kap untuk mencapainya. Mari kita memahami aliran dasar socket sebelum kita menyelam lebih dalam ke implementasi yang sebenarnya.

  • Pertama, Anda memerlukan server yang mendukung protokol web-socket dan memungkinkan klien untuk membuat sambungan soket web.
  • Anda dapat mengimplementasikan server Anda sendiri atau menggunakan layanan pihak ketiga seperti Pusher. Kami akan memilih yang terakhir dalam artikel ini.
  • Klien memulai sambungan socket web ke server socket web dan menerima identifier unik setelah koneksi berhasil.
  • Setelah koneksi berhasil, klien berlangganan ke channel tertentu di mana ia ingin menerima event.
  • Akhirnya, di bawah channel berlangganan, klien mendaftarkan event yang ingin didengarkan.
  • Sekarang di sisi server, ketika peristiwa tertentu terjadi, kami informasikan server web-socket dengan menyediakannya dengan nama channel dan nama event.
  • Dan akhirnya, server web-socket menyiarkan event itu ke klien terdaftar di channel tertentu.

Jangan khawatir jika kelihatannya terlalu banyak pekerjaan dalam sekali jalan; Anda akan memahami hal itu saat kita menelusuri artikel ini.

Selanjutnya, mari kita lihat file konfigurasi broadcast default pada config/broadcasting.php.

Secara default, Laravel mendukung beberapa adaptor broadcast pada inti broadcast itu sendiri.

Dalam artikel ini, kita akan menggunakan adaptor broadcast Pusher. Untuk keperluan debugging, Anda juga bisa menggunakan adaptor log. Tentu saja, jika Anda menggunakan adaptor log, klien tidak akan menerima pemberitahuan event apa pun, dan hanya akan dicatat ke file laravel.log.

Dari bagian selanjutnya dan seterusnya, kita akan segera menyelami implementasi aktual dari use-case yang disebutkan di atas.

Menyiapkan Prasyarat

Dalam broadcasting, ada berbagai jenis channel — publik, pribadi, dan kehadiran. Ketika Anda ingin menyiarkan event Anda secara publik, maka channel publik yang seharusnya Anda gunakan.  Sebaliknya, channel pribadi digunakan ketika Anda ingin membatasi notifikasi event ke channel pribadi tertentu.

Dalam use-case kita, kita ingin memberi tahu pengguna ketika mereka mendapat pesan baru. Dan agar memenuhi syarat untuk menerima pemberitahuan broadcast, pengguna harus masuk. Jadi, kita harus menggunakan channel pribadi dalam kasus kita.

Fitur Otentikasi Inti

Pertama, Anda perlu mengaktifkan sistem default otentikasi Laravel sehingga fitur-fitur seperti pendaftaran, login, dan pekerjaan serupa bekerja di luar pemikiran kita. Jika Anda tidak yakin bagaimana melakukannya, dokumentasi resmi memberikan wawasan cepat ke dalamnya.

Pusher SDK — Instalasi dan Konfigurasi

Karena kami akan menggunakan layanan pihak ketiga Pusher sebagai server web-socket kita, Anda perlu membuat akun dengannya dan memastikan Anda memiliki kredensial API yang diperlukan dengan pendaftaran entri Anda. Jika Anda menghadapi kesulitan dalam menciptakannya, jangan ragu untuk bertanya pada saya di bagian komentar.

Selanjutnya, kita perlu menginstal SDK PHP Pusher sehingga aplikasi Laravel kita dapat mengirimkan pemberitahuan broadcast ke server web-socket Pusher.

Di root aplikasi Laravel Anda, jalankan perintah berikut untuk menginstalnya sebagai paket komposer.

Sekarang, mari kita ubah file konfigurasi broadcast untuk mengaktifkan adaptor Pusher sebagai penggerak default broadcast kita.

Seperti yang Anda lihat, kita telah mengubah driver default broadcast ke Pusher. Kita juga menambahkan opsi konfigurasi kluster dan terenkripsi yang seharusnya Anda dapatkan dari akun Pusher di tempat pertama.

Juga, mengambil nilai dari variabel lingkungan. Jadi mari pastikan bahwa kita menetapkan variabel berikut dalam file .env dengan benar.

Selanjutnya, saya harus membuat beberapa perubahan dalam beberapa file inti Laravel untuk membuatnya kompatibel dengan SDK Pusher terbaru. Tentu saja, saya tidak merekomendasikan membuat perubahan dalam framework inti, tetapi saya hanya akan menyoroti apa yang perlu dilakukan.

Silakan buka file vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/PusherBroadcaster.php. Ganti snippet use Pusher; dengan use Pusher\Pusher;.

Selanjutnya, buka file vendor/laravel/framework/src/Illuminate/Broadcasting/BroadcastManager.php dan buat perbahan serupa pada snippet berikut.

Akhirnya, mari kita aktifkan layanan broadcast di config/app.php dengan menghapus komentar di baris berikut.

Sejauh ini, kita telah menginstal library khusus server. Pada bagian berikutnya, kita akan ke library klien yang perlu diinstal juga.

Pusher dan Library Laravel Echo — Instalasi dan Konfigurasi

Dalam broadcasting, tanggung jawab sisi klien adalah berlangganan channel dan mendengarkan event yang diinginkan. Di bawah kap, ia menyelesaikannya dengan membuka koneksi baru ke server web-socket.

Untungnya, kita tidak perlu mengimplementasikan hal-hal JavaScript yang kompleks untuk mencapainya karena Laravel sudah menyediakan library klien yang berguna, Laravel Echo, yang membantu kita menangani socket di sisi klien. Juga, mendukung layanan Pusher yang akan kita gunakan dalam artikel ini.

Anda dapat menginstal Laravel Echo menggunakan manajer paket NPM. Tentu saja, Anda perlu menginstal node dan npm terlebih dahulu jika Anda belum memilikinya. Caranya cukup sederhana, seperti yang ditunjukkan pada snippet berikut.

Yang membuat kita tertarik adalah file node_modules/laravel-echo/dist/echo.js yang Anda harus salin ke public/echo.js.

Ya, saya mengerti, sedikit berlebihan untuk hanya mendapatkan file JavaScript tunggal. Jika Anda tidak ingin melakukan latihan ini, Anda dapat mengunduh file echo.js dari GitHub saya.

Dan dengan itu, kita selesai dengan pengaturan library klien kita.

Pengaturan File Back-End

Ingat bahwa kita berbicara tentang pengaturan aplikasi yang memungkinkan pengguna aplikasi kita untuk mengirim pesan satu sama lain. Di sisi lain, kita akan mengirimkan pemberitahuan broadcast kepada pengguna yang masuk saat mereka menerima pesan baru dari pengguna lain.

Di bagian ini, kita akan membuat file yang diperlukan untuk mengimplementasikan use-case yang kita cari.

Untuk memulainya, mari buat model Message model yang menyimpan pesan yang dikirim oleh pengguna satu sama lain.

Kita juga perlu menambahkan beberapa field seperti tofrom dan message ke tabel pesan kita. Jadi mari kita ubah file migrasi sebelum menjalankan perintah migrasi.

Sekarang, mari jalankan perintah migrasi yang membuat tabel pesan dalam database.

Setiap kali Anda ingin membuat even khusus di Laravel, Anda harus membuat class untuk event tersebut. Berdasarkan pada jenis event, Laravel bereaksi sesuai dengan dan mengambil tindakan yang diperlukan.

Jika event tersebut adalah event normal, Laravel memanggil class listener yang terkait. Di sisi lain, jika event adalah tipe broadcast, Laravel mengirim event tersebut ke server web-socket yang dikonfigurasi dalam file config/broadcasting.php.

Karena kita menggunakan layanan Pusher di dalam contohnya, Laravel akan mengirim event ke server Pusher.

Mari gunakan perintah artisan berikut untuk membuat class event khusus — NewMessageNotification.

Itu membuat class app/Events/NewMessageNotification.php. Mari ganti konten file tersebut dengan yang berikut ini.

Yang penting untuk dicatat adalah bahwa class NewMessageNotification mengimplementasi interface ShouldBroadcastNow. Jadi, ketika kita membuat suatu event, Laravel tahu bahwa event ini harus disiarkan.

Bahkan, Anda juga bisa mengimplementasikan interface ShouldBroadcast, dan Laravel menambahkan suatu event ke dalam antrean event.  Ini akan diproses oleh petugas antrian event ketika mendapat kesempatan untuk melakukannya. Dalam kasus kita, kita ingin segera menyiarkannya, dan itulah mengapa kita menggunakan interface ShouldBroadcastNow.

Dalam kasus kita, kita ingin menampilkan pesan yang telah diterima pengguna, dan dengan demikian kita telah melewati model Message dalam argumen konstruktor. Dengan cara ini, data akan diteruskan bersama dengan event.

Selanjutnya, ada metode broadcastOn yang mendefinisikan nama channel tempat event akan disiarkan. Dalam kasus kita, kita menggunakan channel pribadi karena kita ingin membatasi event broadcast untuk pengguna yang masuk.

Variabel $this->message->to mengacu pada ID pengguna yang akan disiarkan event nya. Dengan demikian, secara efektif membuat nama channel seperti user.{USER_ID}.

Dalam hal channel pribadi, klien harus mengotentikasi sendiri sebelum membuat sambungan dengan server web-socket. Memastikan bahwa event yang disiarkan di channel pribadi dikirim ke klien yang diautentikasi saja. Dalam kasus ini, berarti hanya pengguna yang masuk saja yang dapat berlangganan ke channel kita user.{USER_ID}.

Jika Anda menggunakan library klien Laravel Echo untuk berlangganan channel, Anda beruntung! Secara otomatis menangani bagian otentikasi, dan Anda hanya perlu menentukan route channel.

Mari lanjutkan dan tambahkan rute untuk channel pribadi kita di file routes/channels.php.

Seperti yang Anda lihat, kita telah mendefinisikan route dari user.{toUserId} untuk channel pribadi kita

Argumen kedua dari metode channel harus berupa fungsi penutupan. Laravel secara otomatis meneruskan pengguna yang saat ini masuk sebagai argumen pertama dari fungsi penutupan, dan argumen kedua biasanya diambil dari nama channel.

Ketika klien mencoba berlangganan ke pengguna channel pribadi user.{USER_ID}, library Laravel Echo melakukan autentikasi yang diperlukan pada background menggunakan objek XMLHttpRequest, atau yang lebih dikenal sebagai XHR.

Sejauh ini, kita sudah selesai dengan pengaturannya, jadi mari kita lanjutkan dan mengujinya.

Pengaturan File Front-End

Pada bagian ini, kita akan membuat file yang diperlukan untuk menguji use-case kita.

Mari kita lanjutkan dan membuat file controller di app/Http/Controllers/MessageController.php dengan konten berikut.

Pada metode index, kita menggunakan tampilan broadcast, jadi buatlah juga tampilan file resources/views/broadcast.blade.php.

Dan, tentu saja, kita perlu menambahkan rute juga pada file routes/web.php.

Dalam method konstruktor class controller, Anda dapat melihat bahwa kita telah menggunakan auth middleware untuk memastikan bahwa method controller hanya dapat diakses oleh pengguna yang telah melakukan login.

Selanjutnya, ada method index yang menampilkan tampilan broadcast. Mari kita tarik kode yang paling penting dalam file tampilan.

Pertama, kita memuat library klien yang diperlukan, Laravel Echo dan Pusher, memungkinkan kita untuk membuka koneksi web-socket ke server web-socket Pusher.

Selanjutnya, kita membuat turunan Echo dengan menyediakan Pusher sebagai adaptor broadcast dan informasi Pusher terkait lainnya yang diperlukan.

Lebih lanjut, kita menggunakan metode pribadi Echo untuk berlangganan pengguna channel pribadi user.{USER_ID}. Seperti yang telah kita bahas sebelumnya, klien harus mengotentikasi sendiri sebelum berlangganan ke channel pribadi. Dengan demikian objek Echo melakukan otentikasi yang diperlukan dengan mengirimkan XHR pada background dengan parameter yang diperlukan.  Terakhir, Laravel mencoba menemukan rute user.{USER_ID}, dan itu harus cocok dengan rute yang telah kita tetapkan dalam file routes/channels.php.

Jika semuanya berjalan dengan baik, Anda harus memiliki koneksi web-socket yang terbuka dengan server web-socket Pusher, dan itu mencantumkan event pada channel user.{USER_ID}! Mulai sekarang, kita akan dapat menerima semua event yang masuk pada channel ini.

Dalam kasus ini, kita ingin mendengarkan event NewMessageNotification dan dengan demikian kita telah menggunakan metohd listen objek Echo untuk mencapainya. Agar semuanya tetap sederhana, kita hanya akan mengingatkan pesan yang kita terima dari server Pusher.

Jadi itu adalah pengaturan untuk menerima event dari server web-socket. Selanjutnya, kita akan menggunakan metode send pada file pengontrol yang memunculkan event broadcast.

Mari kita tarik dengan cepat kode dari method send.

Dalam kasus ini, kita akan memberi tahu pengguna yang masuk ketika mereka menerima pesan baru. Jadi kita mencoba meniru perilaku tersebut dalam method send.

Selanjutnya, kita telah menggunakan fungsi dari helper event untuk meningkatkan event NewMessageNotification. Karena event NewMessageNotification adalah jenis ShouldBroadcastNow, Laravel memuat konfigurasi broadcast default dari file config/broadcasting.php.  Terakhir, ia menyiarkan event NewMessageNotification ke server web-socket yang dikonfigurasi pada channel user.{USER_ID}.

Dalam kasus ini, event akan disiarkan ke server web-socket Pusher pada channel user.{USER_ID}. Jika ID pengguna adalah 1, event tersebut akan disiarkan melalui channel user.1.

Seperti yang telah kita bahas sebelumnya, kita sudah memiliki pengaturan yang mendengarkan event-event di channel ini, sehingga harus dapat menerima event ini, dan kotak alert ditampilkan kepada pengguna!

Mari kita lanjutkan dan membahas bagaimana Anda seharusnya menguji use-case yang telah kita bangun sejauh ini.

Buka URL http://your-laravel-site-domain/message/index di browser Anda. Jika Anda belum masuk, Anda akan dialihkan ke layar masuk. Setelah Anda masuk, Anda harus melihat tampilan broadcast yang kita definisikan sebelumnya—belum ada yang mewah.

Bahkan, Laravel telah melakukan sedikit pekerjaan pada background untuk Anda. Karena kita telah mengaktifkan pengaturan Pusher.logToConsole yang disediakan oleh library klien Pusher, ia mencatat semua yang ada di konsol browser untuk keperluan debugging. Mari kita lihat apa yang sedang dicatat di konsol ketika Anda mengakses halaman http://your-laravel-site-domain/message/index.

Ini telah membuka koneksi web-socket dengan server web-socket Pusher dan berlangganan sendiri untuk melakukan proses listen pada event di channel pribadi. Tentu saja, Anda dapat memiliki nama channel yang berbeda dalam kasus Anda berdasarkan ID pengguna yang Anda masuki. Sekarang, biarkan halaman ini terbuka saat kita mecoba untuk menguji method send.

Selanjutnya, mari kita buka URL http://your-laravel-site-domain/message/send di tab lain atau di browser yang berbeda. Jika Anda akan menggunakan browser yang berbeda, Anda harus masuk untuk dapat mengakses halaman itu.

Segera setelah Anda membuka halaman http://your-laravel-site-domain/message/send, Anda seharusnya dapat melihat pesan peringatan di tab lain di http://your-laravel-site-domain/message/index.

Mari navigasikan ke konsol untuk melihat apa yang baru saja terjadi.

Seperti yang Anda lihat, ini memberi tahu Anda bahwa Anda baru saja menerima event App\Events\NewMessageNotification dari server web-socket Pusher pada channel private-user.2.

Bahkan, Anda dapat melihat apa yang terjadi di ujung Pusher juga. Pergi ke akun Pusher Anda dan arahkan ke aplikasi Anda. Di bawah Debug Console, Anda seharusnya dapat melihat pesan-pesan yang dicatat.

Pusher Dashboard

Dan itu membawa kita ke bagian akhir artikel ini! Mudah-mudahan, tidak terlalu banyak menguras energi karena saya sudah mencoba menyederhanakan hal-hal sepengetahuan saya.

Kesimpulan

Hari ini, kita telah membahas salah satu fitur Laravel yang paling sedikit didiskusikan — broadcasting. Memungkinkan Anda untuk mengirim pemberitahuan secara real-time menggunakan web-socket. Sepanjang artikel ini, kita membuat contoh nyata yang menunjukkan konsep yang disebutkan di atas.

Ya, saya tahu, ada banyak hal yang dapat dicerna dalam satu artikel, jadi silakan gunakan umpan komentar di bawah ini jika Anda menemukan diri Anda dalam kesulitan selama implementasi.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.