Laravel Live Chat System Tutorial (Step-by-Step Guide)

A live chat system allows real-time messaging between users. In this tutorial, we will build a **real-time chat system in Laravel** using **Laravel WebSockets, Laravel Echo, Pusher, and Vue.js**.

Step 1: Install Laravel

Create a new Laravel project:

composer create-project --prefer-dist laravel/laravel LiveChat
cd LiveChat

Step 2: Install Laravel WebSockets and Pusher

Run the following commands:

composer require beyondcode/laravel-websockets
composer require pusher/pusher-php-server

Step 3: Configure WebSockets & Pusher

Edit the `.env` file and add Pusher credentials:

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=mt1
BROADCAST_DRIVER=pusher

Step 4: Setup Broadcasting

Modify `config/broadcasting.php` to set the default broadcaster to **Pusher**.

Step 5: Create Chat Model & Migration

php artisan make:model Message -m

Edit `database/migrations/xxxx_xx_xx_create_messages_table.php`:

public function up() {
    Schema::create('messages', function (Blueprint $table) {
        $table->id();
        $table->unsignedBigInteger('user_id');
        $table->text('message');
        $table->timestamps();
    });
}

Step 6: Create Chat Event

php artisan make:event MessageSent

Step 7: Create Chat Controller

php artisan make:controller ChatController

Step 8: Define Routes

use App\Http\Controllers\ChatController;
Route::middleware('auth')->group(function () {
    Route::get('/messages', [ChatController::class, 'fetchMessages']);
    Route::post('/messages', [ChatController::class, 'sendMessage']);
});

Step 9: Setup Frontend with Vue.js

npm install vue pusher-js laravel-echo

Step 10: Run WebSockets & Laravel Server

php artisan websockets:serve
php artisan serve
npm run dev

Conclusion

You have successfully built a **real-time live chat** system using **Laravel WebSockets, Pusher, and Vue.js**. 🚀 Now, users can chat in real-time.