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 config/app.php file and uncomment this following line.

config/app.php

 App\Providers\BroadcastServiceProvider::class,

 

Now open config/broadcasting.php file and make this 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 puhser 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.

typing-indicator-laravel-vuejs-pusher-echo

 

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', '[email protected]');
Route::get('/messages', '[email protected]');
Route::post('/messages', '[email protected]');

 

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 this 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 said element. See demo. To install it run below command.

npm install --save vue-chat-scroll

 

now open app.js file and paste this followng 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 channels.php file to setup 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 

real-time-chat-application-laravel-vuejs-pusher

Preview: After sending message 

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

laravel-6-chat-app-with-pusher

 

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