🎯 Tujuan

Panduan ini membantu developer mengimplementasikan sistem broadcasting real-time menggunakan Pusher untuk mengirim dan menerima pesan secara instan dalam aplikasi Laravel. Hasil akhirnya adalah sebuah sistem chat real-time sederhana.

⏰ Konteks

Tutorial ini digunakan untuk membangun komunikasi instan, seperti fitur chat atau notifikasi langsung pada aplikasi berbasis Laravel. Dengan Livewire, Anda bisa menciptakan komponen interaktif tanpa memerlukan banyak JavaScript.

🪵 Hal yang Diperlukan

1. Laravel Framework (sebaiknya versi terbaru).
2. Livewire sebagai framework frontend interaktif.
3. Pusher untuk broadcasting real-time.
4. Database untuk menyimpan pesan.

📋 Langkah-Langkah

1. STEP 1: Konfigurasi Akun dan Proyek Pusher

   • Daftar Akun Pusher:

     • Kunjungi Pusher dan buat akun.

     • Buat channel baru dan salin kredensial seperti berikut:

       plaintext
       Copy code
       app_id = "1868936"
       key = "c3f1a972b98967e7c7b1"
       secret = "b7f05de3ed01a23280e3"
       cluster = "ap1"
       
       

   • Konfigurasi di Laravel:

     • Tambahkan detail Pusher ke file .env:

       env
       Copy code
       PUSHER_APP_ID=1868936
       PUSHER_APP_KEY=c3f1a972b98967e7c7b1
       PUSHER_APP_SECRET=b7f05de3ed01a23280e3
       PUSHER_APP_CLUSTER=ap1
       PUSHER_SCHEME=https
       PUSHER_PORT=443
       
       

   • Install Pusher Package:

     Jalankan perintah berikut untuk menginstal pustaka Pusher:

     bash
     Copy code
     composer require pusher/pusher-php-server
     
     

2. STEP 2: Buat Model dan Migration untuk Chat

   • Generate Model dan Migration:

     Buat model ChatMessage dan file migrasi:

     bash
     Copy code
     php artisan make:model ChatMessage -m
     
     

   • Tambahkan Struktur Tabel di Migration:

     Ubah file migrasi menjadi:

     php
     Copy code
     Schema::create('chat_messages', function (Blueprint $table) {
         $table->id();
         $table->string('username');
         $table->text('content');
         $table->timestamps();
     });
     
     

   • Migrasikan Tabel ke Database:

     bash
     Copy code
     php artisan migrate
     
     

   • Tambahkan Fillable Properties:

     Tambahkan properti fillable di model ChatMessage:

     php
     Copy code
     protected $fillable = ['username', 'content'];
     
     

3. STEP 3: Buat Komponen Livewire untuk Chat

   • Generate Komponen Livewire:

     bash
     Copy code
     php artisan make:livewire SimpleChat
     
     

   • Konfigurasi Komponen Back-End:

     Ubah file SimpleChat.php untuk menangani logika chat:

     php
     Copy code
     // Highlight Logika Utama:
     use Pusher\Pusher;
     use App\Models\ChatMessage;
     
     public function sendMessage() {
         $messageData = [
             'username' => $this->username,
             'content' => $this->message,
         ];
         ChatMessage::create($messageData); // Simpan di database
         $this->triggerPusherEvent($messageData); // Broadcast ke Pusher
         $this->reset('message'); // Reset input
     }
     
     

   • Konfigurasi Komponen Front-End:

     Tambahkan logika tampilan untuk simple-chat.blade.php:

     php
     Copy code
     @if(!$hasSetUsername)
     <!-- Masukkan Username -->
     <div>...</div>
     @else
     <!-- Tampilan Chat -->
     <div id="chat-messages">
         @foreach($messages as $msg)
             <p>{{ $msg['username'] }}: {{ $msg['content'] }}</p>
         @endforeach
     </div>
     @endif
     
     

   • Tambahkan Skrip untuk Integrasi Pusher:

     Tambahkan script Pusher di bagian view:

     javascript
     Copy code
     const pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
         cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
     });
     
     const channel = pusher.subscribe('chat-channel');
     channel.bind('chat-message', function(data) {
         $wire.messageReceived(data);
     });
     
     

4. STEP 4: Daftarkan Route dan Layout

   • Daftar Route:

     Tambahkan route baru di web.php:

     php
     Copy code
     Route::get('/simple-chat', SimpleChat::class);
     
     

   • Tambahkan Layout Livewire:

     bash
     Copy code
     php artisan livewire:layout
     
     

5. STEP 5: Uji Coba

   • Jalankan server Laravel:

     bash
     Copy code
     php artisan serve
     
     

   • Akses URL http://127.0.0.1:8000/simple-chat di browser.

   • Masukkan nama pengguna, kirim pesan, dan verifikasi bahwa pesan muncul secara real-time di semua tab browser.

Final Checkpoint:

✅ Sistem dapat mengirim dan menerima pesan secara real-time. ✅ Pesan tersimpan di database. ✅ Pusher berhasil menyiarkan event dan pesan diterima oleh semua klien.

Kesimpulan Dengan Laravel, Livewire, dan Pusher, Anda dapat membangun fitur real-time seperti chat secara cepat dan mudah. Tutorial ini menyediakan dasar yang dapat dikembangkan untuk aplikasi yang lebih kompleks, seperti penambahan fitur grup atau media sharing.