Real Time Chat App With Laravel 7.x Vue Js And Pusher

Hi Artisan,

In this tutorial, i will guide you step by step how to use event broadcasting using pusher and laravel-echo-server in laravel 7 application. Laravel provide event broadcasting topic. event broadcast is a very interesting and it's also easy to implement with pusher specially.

In this tutorial we are going to build laravel chat application using pusher. It will be real time chat app cause we use broadcasting. So using broadcasting we are going to make laravel chat demo. So let's try to complete real time chat system with laravel pusher and vue js. 

I will use vue js to to create it. So let's start. you can read also below post to konw basic knowlege about broadcasting and defenitily you will know how laravel broadcasting works. Let's create one to one chat application in laravel vue js and pusher.


Read also : Real Time Event Broadcasting with Laravel 6 and Pusher


You need to just follow few step to done this following thing. so let's follow bellow steps and done as real time chat with laravel.


Step 1: Install Laravel 6


First of all, we need to get fresh Laravel 6 version application using bellow command because we are going from scratch, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog


Step 2: Make auth

Laravel's laravel/ui package provides a quick way to scaffold all of the routes and views you need for authentication using a few simple commands:

composer require laravel/ui --dev

php artisan ui vue --auth


If you are broadcasting your events over pusher channels, you should install the Pusher Channels PHP SDK using the Composer package manager: Run this below command.

composer require pusher/pusher-php-server "~4.0"


Step 3:  Install  Larave  Echo

Laravel Echo is a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel. You may install Echo via the NPM package manager.

npm install --save laravel-echo pusher-js


After installing it, open the config/app.php file and uncomment the following line.




Now open the config/broadcasting.php file and make these changes.


'default' => env('BROADCAST_DRIVER', 'pusher'),


Now in laravel 6 everything should be ok. Now we have to connect pusher with Laravel. So go to the pusher and create a new app and paste this key to .env file like below. Make sure you have changed broadcast driver log to pusher





Make sure you enable client event otherwise whisper will not work. Whisper mean using this we will identifying who are typing now. See below image to understand.



Step 4:  Setup Migration

To create our laravel chat app, we need migration for our chat table, run below command

php artisan make:model Chat -m


after doing it open your chats migration file and paste this following code.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateChatsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('chats', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()


Now run php artisan migrate to migrate our table.

php artisan migrate


Step 5:  Setup Route


Route::get('/chats', 'ChatController@index');
Route::get('/messages', 'ChatController@fetchAllMessages');
Route::post('/messages', 'ChatController@sendMessage');


Step 5:  Setup Controller

Now open ChatController and paste this following code.


namespace App\Http\Controllers;

use App\Chat;
use App\Events\ChatEvent;
use Illuminate\Http\Request;

class ChatController extends Controller
    public function __construct()

    public function index()
    	return view('');

    public function fetchAllMessages()
    	return Chat::with('user')->get();

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

    	broadcast(new ChatEvent($chat->load('user')))->toOthers();

    	return ['status' => 'success'];


When building an application that utilizes event broadcasting, you may substitute the event function with the broadcast function. Like the event function, the broadcast function dispatches the event to your server-side listeners:

broadcast(new ShippingStatusUpdated($chat));


Here, the broadcast function also exposes the toOthers method which allows you to exclude the current user from the broadcast's recipients:

broadcast(new ShippingStatusUpdated($chat))->toOthers();


Step 6:  Create Event

Now we have to create our broadcasting event to fire our broadcasting channel. To do it run following command.

php artisan make:event ChatEvent


after running this command you will find this file inside app/Events/ChatEvent.php path. Open it and paste this code.


namespace App\Events;

use App\Chat;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class ChatEvent implements ShouldBroadcast
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $chat;

    public function __construct(Chat $chat)
        $this->chat = $chat;

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


Make sure the chatEvent of course implements ShouldBroadcast. Now open Post model and paste this following code.


namespace App;

use Illuminate\Database\Eloquent\Model;

class Chat extends Model
    protected $guarded = [];

    public function user(){

        return $this->belongsTo(User::class);



namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
    use Notifiable;

    protected $fillable = [
        'name', 'email', 'password',

    public function messages(){

        return $this->hasMany(Chat::class);


Step 7:   Install Vue dependency and edit configurations

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install


now open this followng file and paste this code. Make an asstes folder inside resources folder and copy js and sass folder inside it. Thats all. We need it to setup our laravel mix.


Read also : Laravel Vue JS CRUD Example With File Upload and Pagination



const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');


Now create a PostComponent to create our post and paste this code.



now open this file resources/assets/js/bootstrap.js and uncomment the following line of code.


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,
    encrypted: true


Install vue-chat-scroll

A plugin for Vue.js 2 that scrolls to the bottom of an element when new content is added within the said element. To install it run the below command.

npm install --save vue-chat-scroll


now open the app.js file and paste this following code.



window.Vue = require('vue');

Vue.component('chat-component', require('./components/ChatComponent.vue').default);

import VueChatScroll from 'vue-chat-scroll'

const app = new Vue({
    el: '#app',


Now open the channels.php file to set up our private channel. 


Broadcast::channel('chat', function ($user) {
    return $user;


Step 7:   Setup blade file

Now time to setup our blade file. open resources/layouts/app.php and paste this following code.



Now open resources/views/chat/chat.blade.php file and paste this code. 



Now everything is set to go. Now just we have to compile our all javascript file. so run below command.

npm run dev 
npm run watch


 then visit this following url, Then you see those below things if you send message.



Preview: Before sending message 


Preview: After sending message 

laravel-chat-app-pusherPreview: After one user leaving channel



Hope you enjoy this tutorial and hope it will help you to learn Laravel Broadcasting events to create real-time chat system. Hope everything will work for you. If you find any error please share it with me, and I will try to solve it. That's it.


#broadcasting #pusher #laravel-echo #laravel-6 #event-broadcasting #laravel