Set up Laravel and install dependencies including Laravel Sanctum and Laravel Echo. 2. Configure Pusher as the broadcast driver in .env and enable the BroadcastServiceProvider. 3. Create a Message model with a migration that includes user_id and message fields. 4. Implement authentication using Laravel’s built-in system. 5. Create a MessageSent event that implements ShouldBroadcast and uses a PresenceChannel for online user tracking. 6. Build a ChatController with methods to fetch and send messages, broadcasting the MessageSent event. 7. Design a frontend with Blade or Vue, integrate Laravel Echo, and listen for real-time events. 8. Compile assets, run the server, and test real-time messaging across multiple users. A real-time chat application in Laravel is successfully built using WebSockets via Pusher and Laravel Echo, enabling instant message broadcasting and dynamic UI updates.

Building a real-time chat application with Laravel is achievable by combining Laravel’s backend capabilities with real-time broadcasting using WebSockets. Here’s a practical guide to help you create a functional real-time chat app step by step.

1. Set Up Laravel and Laravel Echo Server

Start by creating a new Laravel project:

composer create-project laravel/laravel real-time-chat
cd real-time-chat

Install Laravel Sanctum for API authentication (if using a SPA) or use Laravel’s built-in session auth:

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

Install Laravel Echo and Pusher JS for client-side broadcasting:

npm install --save laravel-echo pusher-js

Note: Laravel Echo allows your JavaScript to listen for broadcasted events from Laravel.

2. Use Pusher for Real-Time Broadcasting

Laravel supports several broadcast drivers (Redis, Pusher, Soketi). Pusher is one of the easiest to set up for beginners.

Configure Broadcasting

In .env, set:

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

In config/broadcasting.php, make sure Pusher settings are correct.

Enable Broadcasting

Uncomment this line in bootstrap/app.php:

App\Providers\BroadcastServiceProvider::class,

3. Create the Chat Model and Migration

Generate a Message model:

php artisan make:model Message -m

In the migration file:

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

    $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
});

Run migration:

php artisan migrate

4. Set Up Authentication

Use Laravel’s built-in authentication:

php artisan make:auth

For Laravel 8 , you may need to use laravel/ui:

composer require laravel/ui
php artisan ui vue --auth
npm run dev

5. Create a Broadcast Event

Generate a new event:

php artisan make:event MessageSent

Edit app/Events/MessageSent.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;
use App\Models\Message;

class MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PresenceChannel('chat');
    }

    public function broadcastWith()
    {
        return [
            'id' => $this->message->id,
            'user_id' => $this->message->user_id,
            'message' => $this->message->message,
            'created_at' => $this->message->created_at,
        ];
    }
}

Using PresenceChannel allows you to see who’s online. You can also use PrivateChannel or Channel depending on your needs.

6. Create the Chat Controller

php artisan make:controller ChatController

Add methods to fetch messages and send a message:

use App\Models\Message;
use App\Events\MessageSent;

public function fetchMessages()
{
    return Message::with('user')->latest()->limit(100)->get()->reverse();
}

public function sendMessage(Request $request)
{
    $message = auth()->user()->messages()->create([
        'message' => $request->message
    ]);

    broadcast(new MessageSent($message))->toOthers();

    return ['status' => 'Message Sent!'];
}

Add the routes in routes/web.php:

use App\Http\Controllers\ChatController;

Route::middleware(['auth'])->group(function () {
    Route::get('/chat', function () {
        return view('chat');
    });
    Route::get('/messages', [ChatController::class, 'fetchMessages']);
    Route::post('/messages', [ChatController::class, 'sendMessage']);
});

7. Build the Frontend (Blade or Vue)

Create a simple chat.blade.php:

<div id="app">
    <ul id="messages">
        <li v-for="message in messages">
            <strong>@{{ message.user.name }}:</strong>
            @{{ message.message }}
        </li>
    </ul>

    <input
        v-model="newMessage"
        @keyup.enter="sendMessage"
        placeholder="Type a message..."
        type="text"
    >
</div>

<script src="{{ asset('js/app.js') }}"></script>

Initialize Laravel Echo in resources/js/bootstrap.js or app.js:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
    authEndpoint: '/broadcasting/auth',
});

Make sure to expose the Pusher key in .env:

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Then in your Vue/JS logic:

const app = new Vue({
    el: '#app',
    data: {
        messages: [],
        newMessage: ''
    },
    mounted() {
        this.fetchMessages();

        window.Echo.join('chat')
            .here((users) => {
                console.log('Users online:', users);
            })
            .listen('MessageSent', (e) => {
                this.messages.push(e.message);
            });
    },
    methods: {
        fetchMessages() {
            axios.get('/messages').then(response => {
                this.messages = response.data;
            });
        },
        sendMessage() {
            axios.post('/messages', { message: this.newMessage })
                .then(response => {
                    this.newMessage = '';
                });
        }
    }
});

8. Run and Test

Compile assets:

npm run dev

Start the Laravel development server:

php artisan serve

Open two browser windows, log in as different users, and test real-time messaging.

Final Notes

• For production, secure your broadcast routes with authentication.
• Consider rate limiting on message sending.
• Use PresenceChannel to show online users or PrivateChannel for 1-on-1 chats.
• For self-hosted WebSocket servers, consider using Soketi instead of Pusher.

Building a real-time chat app in Laravel isn’t overly complex once you understand the flow:
User sends message → Controller saves it → Event broadcasts it → Echo listens and updates UI.

With Laravel Echo and Pusher, most of the hard work is abstracted, letting you focus on UI and user experience.

Basically, that’s it — you’ve got a working real-time chat.

The above is the detailed content of How to build a real-time chat application with Laravel?. For more information, please follow other related articles on the PHP Chinese website!