Laravel pusher real time chat application build  with javaScript  jQuery

Laravel pusher real time chat application build with javaScript jQuery

In this tutorial we will build a live chat application using laravel 9.3 and php 8.1.5, javascript, jquery and pusher. After complete the chat app development we will see a live example how two users chat each other in real time. For building this app we have to follow bellow steps.

 

I'm using the following versions:

 

Laravel 9.3 ( You can use any other versions)

PHP 8.1.5

 

1. Install a fresh laravel project
2. Create pusher account and app
3. Configure .env with pusher app credentials (driver pusher)
4. Create event
5. Add Request Response and Event in web.php
6. Create chat page (welcome.php)
7. Link app.css and app.js file in chat page from resource
8. Install npm, pusher js and pusher server
9. Make changes in bootstrap.js
10. Chat js code in app.js
11. BroadcastServiceProvider
12. Test app

 

 

 

Step-1: Install a fresh laravel project

 

let's Install a fresh laravel project using composer or laravel installer.

/* using laravel installer*/
laravel new laravel-chat-application

/* using composer*/
composer create-project laravel/laravel laravel-chat-application

 

 

 

Step-2: Create pusher account and app

 

Create  an account in pusher official website and create an app

 

 

 

Step-3: Configure .env with pusher app credentials (driver pusher)

 

Now we set pusher credentials in .env file and also change BROADCAST DRIVER log to pusher


BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-key
PUSHER_APP_SECRET=your-pusher-secret
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=your-pusher-cluster

 

 

 

Step-4: Ceate event and make changes in event file.

 

Now we have to create an event. You can make an event with any name by artisand command. Let's run bellow command to create an event with the name Message.


php artisan make:event Message

 

See our event file is successfully created in app\Events\Message.php  which is located at app directory. Now open event file Message.php and make required changes. See the example code bellow class Message implements ShouldBroadcast and now we create a channel name like chat and also change the channel PrivateChannel to Channel in broascastOn() method. Keep in mind you are free to give a channel name. Next we have to create  a method like broadcastAs() in which we return our event name message.

 

<?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;

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

    public $username;
    public $message;

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

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

    public function broadcastAs()
    {
        return 'message';
    }
}

 

 

 

Step-5: Add Request Response and Event in web.php

 

In this step we have to open web.php file and add request response and event.

Note: Don't forget to import Message and Request at the beginning of the file.

<?php

use App\Events\Message;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;



Route::get('/', function () {
    return view('welcome');
});

Route::post('send-message',function (Request $request){
    event(new Message($request->username, $request->message));
    return ['success' => true];
});

 

 

 

Step-6: Create chat page welcome.php

 

It's time to create our chat page. Just create a blade file in views directory or you can convert your welcome page into chat page. I'm designing the welcome.blade.php file  with the chat design markup. Bellow our chat markup code. 

Note: Don't forget to add app.css and app.js also bootstrap and jquery link.

 

welcome.php

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    @vite(['resources/css/app.css' , 'resources/js/app.js'])
    <title>Live Chat</title>
</head>
<body>
<div class="app">
    <div class="row">

        <div class="col-sm-6 offset-sm-3 my-2">
            <input type="text" class="form-control" name="username" id="username" placeholder="Enter a user ..........">
        </div>

        <div class="col-sm-6 offset-sm-3">
            <div class="box box-primary direct-chat direct-chat-primary">

                <div class="box-body">
                    <div class="direct-chat-messages" id="messages"></div>
                </div>

                <div class="box-footer">
                    <form action="#" method="post" id="message_form">
                        <div class="input-group">
                            <input type="text" name="message" id="message" placeholder="Type Message ..." class="form-control">
                            <span class="input-group-btn">
                                <button type="submit" id="send_message"  class="btn btn-primary btn-flat">Send</button>
                          </span>
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
</body>
</html>

 

 

 

 

Step-7: Add required css for chat page in app.css file

 

Now we need to add some css code in app.css for our chat design so that the markup looks much better. In app.css file paste the following code.

body{
    margin-top:20px;
    background:#eee;
}
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.box.box-primary {
    border-top-color: #3c8dbc;
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.direct-chat .box-body {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    overflow-x: hidden;
    padding: 0;
}
.direct-chat-messages {
    padding: 10px;
    height: 150px;
    overflow: auto;
}

 

 

 

Step-8: Install npm, pusher js and pusher server

 

This part is the most important because we are going to install required packages for real time chat. At first we have to install npm secondly compile our js file thirdly pusher js and finally install pusher server. Let's run bellow command.

Note: While install pusher-php-server (4th command) must stop artisan server (php artisan serve) otherwise get errors.


npm install
npm run dev
npm install --save laravel-echo pusher-js
composer require pusher/pusher-php-server


 

 

 

Step-9: Make changes in bootstrap.js

 

Once Echo is installed, we are ready to create a fresh Echo instance in our application's JavaScript. We can do this is at the bottom of the resources/js/bootstrap.js file that is included with the Laravel framework. By default, an example Echo configuration is already included in this file -  we can simply uncomment it or add the following code bottom of the file.

 

resources/js/bootstrap.js

import _ from 'lodash';
window._ = _;

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// import Pusher from 'pusher-js';
// window.Pusher = Pusher;

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: import.meta.env.VITE_PUSHER_APP_KEY,
//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
//     enabledTransports: ['ws', 'wss'],
// });


import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

 

 

 

Step-10: Chat js code in app.js

 

Well, we do everything except some mini task. Now we need to write our js code in resources/js/app.js. Simply add the bellow code in your app.js file.

 

resources/js/app.js

import './bootstrap';

$(document).ready(function(){

    $(document).on('click','#send_message',function (e){
        e.preventDefault();

        let username = $('#username').val();
        let message = $('#message').val();

        if(username == '' || message == ''){
            alert('Please enter both username and message')
            return false;
        }

        $.ajax({
            method:'post',
            url:'/send-message',
            data:{username:username, message:message},
            success:function(res){
                //
            }
        });

    });
});

window.Echo.channel('chat')
    .listen('.message',(e)=>{
        $('#messages').append('<p><strong>'+e.username+'</strong>'+ ': ' + e.message+'</p>');
        $('#message').val('');
    });

 

 

 

Step-11: Finaly uncomment BroadcastServiceProvider from config/app.php

 

config/app.php

'providers' => [

         App\Providers\BroadcastServiceProvider::class,

    ],

 

 

 

Step-12: Test app

 

Once you have uncommented and adjusted the Echo configuration according to your needs, you may compile your application's assets:

php artisan serve
npm run dev

 

 

 

Video Link: Live Chat Demo Link

 

 

 

You May Read Bellow Articles:

 

 

Laravel 9 live search data in a table using ajax. 

 

How to send SMS in laravel 9 using Twilio SMS API-Webjourney

 

Laravel 9 pdf invoice generate and download with barryvdh dompdf

 

How to create multi language website by laravel 9

 

Laravel 10 multiple form validation on the same page-WebJourney

 

Multiple parameter pass through Route & URL in Laravel-WebJourney

Tags

  • Share This:

Comments - 3

Sohel

Just Awesome Brother

Aug 13, 2022

Nafis Chonchol

আমি যদি ডাটাবেস এর সাথে কানেক্ট করে কাজ করতে চাই , তাহলে শুধু Listiner Create করে কাজ করলেই তো হবে তাই না ?

Nov 3, 2022

WebJourney

Yes. Thanks

Dec 17, 2022

md nadim Imran

Just awesome bro.

Aug 2, 2023