close

Membangun Real-Time Aplikasi Obrolan dengan Laravel WebSocket

Aplikasi real-time obrolan adalah contoh yang sangat baik tentang bagaimana WebSocket merevolusi real-time komunikasi interaktif di web. Pada artikel ini, kita akan membahas pembuatan aplikasi obrolan sederhana menggunakan Laravel dan mengintegrasikan WebSocket menggunakan laravel-websockets package untuk memberikan pengalaman komunikasi yang responsif dan interaktif kepada pengguna.

Tujuan Aplikasi

Kami akan membangun real-time aplikasi chatting dengan fitur-fitur berikut:

Kirim dan Terima Pesan Secara Instan: Pengguna dapat mengirim dan menerima pesan secara instan tanpa perlu me-refresh halaman.

Daftar Pengguna Online: Aplikasi akan menampilkan daftar pengguna online dan status obrolan mereka.

Kirim Gambar dan File: Pengguna dapat berbagi gambar dan file di dalam obrolan.

Memulai Instalasi dan Konfigurasi

Untuk memulai, kita perlu menginstal laravel-websockets package dan mengonfigurasinya untuk diintegrasikan WebSocket dengan Laravel. Ikuti langkah ini:

Instal laravel-websockets package: Mulailah dengan menginstal package menggunakan Composer.

composer require pusher/pusher-php-server

Publikasikan file konfigurasi: Setelah penginstalan, publikasikan file konfigurasi untuk menyesuaikan pengaturan.

 

php artisan vendor:publish --tag=websockets-config

Jalankan migration: Buat tabel database yang diperlukan untuk WebSocket.

php artisan migrate

Mulai WebSocket server: Luncurkan WebSocket server untuk menangani real-time koneksi 

php artisan websockets:serve

Membangun Antarmuka Pengguna

Kami akan membuat antarmuka pengguna yang sederhana menggunakan HTML, CSS, dan JavaScript untuk menampilkan daftar pesan, kotak input, dan daftar pengguna online.

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>

Mengintegrasikan WebSocket dan Broadcasting

Kami akan menggunakan Laravel Broadcasting untuk mengintegrasikan WebSocket dengan aplikasi.

Instal Pusher: Instal pusher/pusher-php-server package untuk digunakan Pusher sebagai Broadcasting driver.

composer require pusher/pusher-php-server

Configure Broadcasting: Di dalam config/broadcasting.php file, konfigurasikan driver dan berikan Pusher kredensial Anda.

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],

Buat acara dan siarkan: Buat acara ChatMessageSent dan siarkan saat pengguna mengirim pesan.

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}

Skrip JavaScript: Gunakan JavaScript untuk mendengarkan acara dari server dan memperbarui antarmuka pengguna.

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});

Kesimpulan

Dengan menyelesaikan tutorial ini, Anda telah berhasil membuat real-time aplikasi obrolan WebSocket menggunakan Laravel. Pengguna dapat mengirim dan menerima pesan secara instan, dan Anda telah menyaksikan bagaimana WebSocket memberikan pengalaman komunikasi yang responsif dan interaktif.