close

Nggawe Real-Time Aplikasi Chat karo Laravel WebSocket

Aplikasi chatting real-time minangka conto sing apik babagan carane WebSocket bisa ngowahi revolusi real-time komunikasi interaktif ing web. Ing artikel iki, kita bakal nggawe aplikasi chatting prasaja nggunakake Laravel lan nggabungake WebSocket nggunakake laravel-websockets package kanggo ngirim pengalaman komunikasi responsif lan interaktif kanggo pangguna.

Sasaran saka Aplikasi

Kita bakal nggawe real-time aplikasi chatting kanthi fitur ing ngisor iki:

Kirim lan Nampa Pesen Langsung: Pangguna bisa ngirim lan nampa pesen kanthi cepet tanpa perlu refresh kaca.

Dhaptar Pangguna Online: Aplikasi bakal nampilake dhaptar pangguna online lan status obrolan.

Kirim Gambar lan File: Pangguna bisa nuduhake gambar lan file ing obrolan.

Miwiti Instalasi lan Konfigurasi

Kanggo miwiti, kita kudu nginstal laravel-websockets package lan ngatur kanggo nggabungake WebSocket karo Laravel. Tindakake langkah iki:

Instal laravel-websockets package: Miwiti kanthi nginstal package nggunakake Composer.

composer require pusher/pusher-php-server

Nerbitake file konfigurasi: Sawise instalasi, nerbitake file konfigurasi kanggo ngatur setelan.

 

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

Run migration: Nggawe tabel database sing perlu kanggo WebSocket.

php artisan migrate

Miwiti WebSocket server: Bukak WebSocket server kanggo nangani real-time sambungan 

php artisan websockets:serve

Nggawe Antarmuka Panganggo

Kita bakal nggawe antarmuka pangguna sing gampang nggunakake HTML, CSS, lan JavaScript kanggo nampilake dhaptar pesen, kothak input, lan dhaptar pangguna 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>

Integrasi WebSocket lan Broadcasting

Kita bakal nggunakake Laravel Broadcasting kanggo nggabungake WebSocket karo aplikasi.

Instal Pusher: Instal pusher/pusher-php-server package kanggo digunakake Pusher minangka Broadcasting driver.

composer require pusher/pusher-php-server

Konfigurasi Broadcasting: Ing config/broadcasting.php file, atur driver lan wenehake Pusher kredensial sampeyan.

'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,  
    ],  
],

Nggawe acara lan siaran: Nggawe acara ChatMessageSent lan siaran nalika pangguna ngirim pesen.

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

Skrip JavaScript: Gunakake JavaScript kanggo ngrungokake acara saka server lan nganyari antarmuka panganggo.

// 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

Kanthi ngrampungake tutorial iki, sampeyan wis kasil nggawe real-time aplikasi chatting nggunakake WebSocket ing Laravel. Pangguna bisa ngirim lan nampa pesen langsung, lan sampeyan wis nyekseni carane WebSocket menehi pengalaman komunikasi responsif lan interaktif.