Tutorial Laravel Websockets – Alternatif Pusher Yang Free & Open Source.
Sebagian dari kita mungkin sudah mengenal tentang websocket, yaitu sebuah protokol HTTP yang dapat berkomunikasi secara 2 arah sehingga menjadikan sebuah aplikasi menjadi realtime app.
Dalam penerapan websocket biasanya menggunakan sebuah host, salah satu host yang paling terkenal dan mudah untuk di integrasikan yaitu Pusher.
Sebelumnya mimin sudah pernah membahas nya, silahkan buka: Panduan Lengkap Membuat Realtime App dengan Laravel + Pusher.
Tutorial Laravel Websockets – Alternatif Pusher Yang Free & Open Source
Pusher memang sudah terkenal dikalangan para developer karena kemudahan nya dalam proses integrasi nya.
Hanya saja pusher ini berbayar jika dalam sehari sudah melebihi dari limit yang telah ditentukan, untuk limit dan biaya nya bisa kamu lihat disini: Pusher Pricing Plans.
Oleh karena itu, banyak para developer yang mencari alternatif dari pusher yang free / open source, salah satu pilihan nya yaitu ke Laravel Websockets.
Laravel Websockets ini adalah Pusher Replacement, jadi sama seperti pusher, hanya saja terinstall di server kita sendiri.
Pengaturan konfigurasi nya pun sama seperti menggunakan pusher, hanya saja kita tidak perlu melakukan registrasi ke pusher nya, kita bisa mengisi key yang dibutuhkan secara dummy.
Dan contoh disini saya menggunakan laravel 10, jika kalian menggunakan versi yang lain seperti laravel 5/6/7/8/9 juga tidak masalah, karena cara nya akan sama saja.
Instalasi Laravel Websockets
Pertama kalian buka terlebih dahulu website resmi laravel websockets nya https://beyondco.de/docs/laravel-websockets/getting-started/introduction, kemudian masuk kedalam menu “installation” untuk membuka pedoman cara instalasi package nya.
Laravel websockets dapat diinstall via composer dengan menjalankan perintah berikut:
.... composer require beyondcode/laravel-websockets ....
Kemudian jalankan perintah berikut untuk mem-publish file migration nya.
.... php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations" ....
Selanjutnya jalankan:
.... php artisan migrate ....
Maka seharusnya akan muncul sebuah table baru dengan nama “websockets_statistics_entries” seperti gambar berikut:
Kita perlu juga mem-publish file websocket configuration nya dengan menjalankan perintah berikut:
.... php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config" ....
Maka nanti akan tercipta sebuah file baru didalam folder “../config/websockets.php”.
Pusher Replacement
Seperti yang sudah mimin katakan sebelumnya bahwasanya laravel websockets ini adalah replacement dari pusher, jadi secara konfigurasi akan sama, dan kita juga membutuhkan package yang sama.
Maka kita perlu menginstall package pusher, disini kita hanya menginstall package nya saja, kalian tidak perlu registrasi di web nya pusher.
Referensi: https://beyondco.de/docs/laravel-websockets/basic-usage/pusher.
Untuk menginstall package pusher jalankan perintah berikut:
.... composer require pusher/pusher-php-server ....
Jika sudah selesai, pada file .env, ubah nilai BROADCAST_DRIVER ke pusher.
.... BROADCAST_DRIVER=pusher ....
Selanjutnya, masih didalam file .env, kita juga perlu isi nilai untuk pusher nya seperti berikut:
PUSHER_APP_ID=cahayaappid PUSHER_APP_KEY=cahayaappkey PUSHER_APP_SECRET=cahayasecret PUSHER_HOST=localhost PUSHER_PORT=6001 PUSHER_SCHEME=http PUSHER_APP_CLUSTER=mt1
Untuk nilai-nilai nya, kalian isi dengan data dummy saja.
_APP_ID, _APP_KEY, _APP_SECRET bisa kalian isi apa saja.
Untuk PUSHER_HOST kita isi dengan localhost, karena memang masih di local.
PUSHER_PORT diisi dengan 6001.
PUSHER_SCHEME diisi dengan http.
Mengakses Dashboard Websocket
Sekarang kita coba jalankan websocket nya, sekaligus kita akses pula dashboard websocket nya.
Kita jalankan dulu project laravel nya.
.... php artisan serve ....
Kemudian jalankan juga websocket nya dengan menggunakan perintah:
.... php artisan websockets:serve ....
Dua perintah diatas bisa kalian jalankan menggunakan 2 terminal/CMD.
Untuk dashboard websocket nya berada pada url “{{base_url}}/laravel-websockets“, contoh:
.... http://127.0.0.1:8000/laravel-websockets ....
Kalau kalian mau ganti path url nya, bisa diganti pada file konfigurasi “../config/websockets.php“.
Jika berhasil diakses, maka akan muncul seperti berikut:
Langsung saja klik button connect.
Jika berhasil connect, maka di dashboard nya akan muncul statistik dan report2 yang lainnya.
Membuat Event Broadcasting
Sekarang kita akan uji coba websocket nya.
Kita perlu aktifkan terlebih terlebih dahulu service provider nya didalam file “../config/app.php“, cari dan uncomment bagian “App\Providers\BroadcastServiceProvider::class”.
Setelah itu, kita coba buat event baru dengan menjalankan perintah:
.... php artisan make:event CahayaEvent ....
Maka nanti akan tercipta sebuah file event baru didalam folder “../app/Events/CahayaEvent.php“.
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class CahayaEvent
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
*/
public function __construct()
{
//
}
/**
* Get the channels the event should broadcast on.
*
* @return array<int, \Illuminate\Broadcasting\Channel>
*/
public function broadcastOn(): array
{
return [
new PrivateChannel('channel-name'),
];
}
}
Agar event nya bisa berkomunikasi dengan websocket, kita perlu melakukan sedikit modifikasi seperti berikut ini:
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class CahayaEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
*/
public function __construct()
{
//
}
/**
* Get the channels the event should broadcast on.
*
* @return array<int, \Illuminate\Broadcasting\Channel>
*/
public function broadcastOn(): Channel
{
return new Channel('cahaya-channel');
}
}
Pertama pada baris ke-13 kita perlu meng-implementasikan interface ShouldBroadcast.
....
class CahayaEvent implements ShouldBroadcast
{
....
Kemudian pada baris ke-30, kita ubah return nya yang tadi nya array menjadi Channel, kemudian didalam nya kita buat sebuah public channel dengan nama “cahaya-channel”:
....
public function broadcastOn(): Channel
{
return new Channel('cahaya-channel');
}
....
Sekarang kita buat route baru terlebih dahulu agar bisa memanggil event nya.
use App\Events\CahayaEvent;
....
Route::get('call-event', function () {
Broadcast(new CahayaEvent());
});
....
Kalian coba akses route tersebut, jika berhasil dan tidak ada masalah, maka nanti didalam Websocket Dashboard nya akan muncul seperti berikut ini:
Listening Event Di Client
Sekarang kita akan uji coba di client, kita akan listening event nya agar web application kita menjadi realtime app.
Kita perlu install Laravel Echo terlebih dahulu, karena ini adalah javascript library / Node Module, maka proses instalasi nya menggunakan npm, pastikan bahwa di laptop kalian sudah terinstall npm / node js.
.... npm install --save-dev laravel-echo pusher-js ....
Setelah proses instalasi nya selesai, buka file “../resources/js/bootstrap.js”, dan uncomment pada bagian berikut:
Diatas adalah contoh untuk laravel 10 yang menggunakan vite, untuk laravel versi 8 kebawah mungkin ada sedikit perbedaan karena menggunakan laravel mix, tapi tetap di uncomment saja script bawaan nya, karena secara fungsi akan sama saja.
Selanjutnya, pada file view nya, kita panggil app.js nya seperti berikut ini:
Untuk file view nya silahkan di sesuaikan sendiri.
Diatas saya memanggil nya menggunakan vite, jika teman2 menggunakan mix, maka cara panggil nya
@mix(‘resources/js/app.js’)
Selanjutnya jalankan perintah:
.... npm run dev ....
Kemudian akses file view nya di browser, buka console, dan pastikan muncul informasi connected seperti pada gambar dibawah ini:
Setelah persiapan nya sudah selesai, agar aplikasi nya dapat me-listen, kita perlu menambahkan script berikut didalam file view nya.
....
@vite('resources/js/app.js')
<script>
document.addEventListener("DOMContentLoaded", function(event) {
Echo.channel('cahaya-channel')
.listen('CahayaEvent', (e) => {
alert('berhasil ngelisten');
});
});
</script>
....
Pada script diatas, dibaris ke-5, kita panggil nama channel yang udah kita buat di file event nya. Dan pada baris ke-6 kita define nama file event nya (tempat dimana channel tersebut dibuat).
Setiap kali event tersebut dipanggil, maka di halaman yang ngelisten nya, akan menampilkan alert yang berisi “berhasil ngelisten”.
Simulasi Realtime App
Untuk simulasi nya, disini saya membuka 2 browser yah, browser pertama membuka halaman yang me-listen nya, browser kedua digunakan untuk memanggil event nya.
Passing Data Ke Event Nya
Misalkan sekarang kita ingin mengirim sebuah data array kedalam event nya, maka caranya adalah seperti berikut:
....
$data = [
'title' => 'Tutorial Laravel Websockets',
'event' => 'Cahaya Event',
'author' => 'sangcahaya.id'
];
Broadcast(new CahayaEvent($data));
....
Diatas kita mempassing sebuah data array.
Kemudian pada file event nya ada perubahan menjadi seperti berikut:
Pada nomor 1, kita membuat public property dengan nama data.
Pada nomor 2 dan 3 kita tangkap data yang dikirim nya, dan dimasukkan nya kedalam property data.
Pada nomor 4, kita bawa data tersebut dengan menggunakan method broadcastWith().
Script untuk melisten nya kita ubah menjadi berikut:
Maka nanti ketika event tersebut dipanggil, dihalaman yang me-listen nya akan muncul seperti berikut:
Pada gambar diatas, kita bisa melihat bahwa data yang kita bawa saat memanggil event nya sudah berhasil ditampilkan pada halaman yang melisten nya.
Gimana? keren kan?
Support Us
Jika artikel ini bermanfaat untuk kamu, atau membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid
[…] Mimin sudah membuat tutorial nya, silahkan buka disini: Tutorial Laravel Websockets, Alternatif Pusher Yang Free & Open Source. […]