How to develop real time app using laravel from the scratch

To develop a real-time application using Laravel, MySQL, jQuery, and HTML, you can follow these steps to set up a basic real-time app. We'll use Laravel's broadcasting capabilities along with Pusher, a real-time data push service.

Step 1: Set Up Your Laravel Project

First, create a new Laravel project if you haven't already:

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

Step 2: Set Up Database

Configure your .env file for the correct database connection settings:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

Run migrations if necessary:

php artisan migrate

Step 3: Install Pusher and Set Up Broadcasting

Install Pusher via Composer:

composer require pusher/pusher-php-server

Then, in your .env file, configure Pusher:

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your_pusher_app_id
PUSHER_APP_KEY=your_pusher_key
PUSHER_APP_SECRET=your_pusher_secret
PUSHER_APP_CLUSTER=your_pusher_cluster

In config/broadcasting.php, ensure the Pusher settings are correct:

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'useTLS' => true,
    ],
],

Step 4: Create Events

Create an event in Laravel that you want to broadcast:

php artisan make:event MessagePosted

In the generated MessagePosted event, implement the ShouldBroadcast interface:

namespace App\Events;

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 MessagePosted implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

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

Step 5: Listen for Events on the Client Side

In your HTML, include jQuery and the Pusher JavaScript library:

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Set up the client-side code to listen for the event:

$(document).ready(function() {
    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('your_pusher_key', {
        cluster: 'your_pusher_cluster'
    });

    var channel = pusher.subscribe('messages');
    channel.bind('App\Events\MessagePosted', function(data) {
        alert('An event was triggered with message: ' + data.message);
    });
});

Step 6: Trigger Events

You can trigger this event in your Laravel application wherever you need to broadcast:

event(new App\Events\MessagePosted('Hello, world!'));

This setup will allow you to develop a real-time application using Laravel, MySQL, jQuery, and HTML. You can expand upon this by integrating more complex functionalities as per your application's requirements.