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.

config/app.php

 App\Providers\BroadcastServiceProvider::class,

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

config/broadcasting.php

'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

.env

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=933362
PUSHER_APP_KEY=f18ead0fa8750c93afd7
PUSHER_APP_SECRET=7d8af7728ca7242f0607
PUSHER_APP_CLUSTER=mt1

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) {
            $table->bigIncrements('id');
            $table->integer('user_id');
            $table->text('message');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('chats');
    }
}

Now run php artisan migrate to migrate our table.

php artisan migrate

Step 5:  Setup Route

routes/web.php

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.

app/Https/Controller/ChatController.php

namespace App\Http\Controllers;

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

class ChatController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index()
    {
    	return view('chat.chat');
    }

    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.

app/Events/ChatEvent.php

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.

app/Chat.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Chat extends Model
{
    protected $guarded = [];

    public function user(){

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

app/User.php

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

webpack.mix.js

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.

resources/assets/js/components/ChatComponent.vue

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

resources/assets/js/bootstrap.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,
    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.

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

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

import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

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

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

routes/channels.php

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.

resources/views/layouts/app.blade.php

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

resources/views/chat/chat.blade.php

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

npm run dev 
//or
npm run watch

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

http://localhost:8000/chats

Preview: Before sending message 

Preview: After sending message 

Preview: 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.