How to create real time application in laravel 8.

Laravel tutorial applied to laravel 7 and 8

I’m assuming you has simple level to know how to use routes, views in laravel

Today we are going to learn how to create real application in laravel 7. That are going to be first tutorial in the big proyect named Switch-Home. The people say that’s it’s “ so advanced” but we are going to make it so easy for you. Read it all because i have surprise for you.

We are going to learn how to make something like that.

Camera demonstration in real time simulator.

That’s look great buddy? let me show you how to make it real.

First you need laravel installed in your system:

apt-get install php

Now you need install curl to get composer and update your packages:

sudo apt-get update
sudo apt-get install curl

Now get composer:

sudo curl -s https://getcomposer.org/installer | php

And finally you need move composer to phar:

sudo mv composer.phar /usr/local/bin/composer

It’s the big moment:

composer global require laravel/installer

And create your project:

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

Yes buddy deploy your first project oppening terminal, when you input the next code don’t close the terminal, for future we are going to use Homestead:

php artisan serve

And enter to watch what you has:

Server deployment locally.

Okay, the next step it’s make 2 routes to get your simulator and the page to deploy that, to do that we need create controller first:

php artisan make:controller RealTimeController

Okay let’s do it, in your “routes/web.php” delete the exists routes and put:

Route::get('/', 'RealTimeController@getIndex')->name('index');
Route::get('/simulator', 'RealTimeController@getSimulator')->name('simulator');

In your “RealTimeController” create the next functions to show views content:

public function getIndex(){
 return view('index');
}
public function getSimulator(){
 return view('simulator/simulator');
}

The next step it’s the probbally the most important we are going to create PusherController but first you need create a free Pusher account at https://pusher.com/signup then login to your dashboard and create an app.

When you make it you can do the next step, it’s simple first create controller named “PusherController”:

php artisan make:controller PusherController

Install the dependencies required for pusher:

composer require pusher/pusher-php-server

And put your credentials inside .env file localated in the root from your project:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your_id
PUSHER_APP_KEY=your_key
PUSHER_APP_SECRET=your_secret
PUSHER_APP_CLUSTER=your_cluster

*Check your “config/broadcasting.php”:

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

Well, now go back to web.php and put this inside:

Route::get('/notify', 'PusherController@sendNotification');

Nice my friend, we are need to create function “sendNotification” inside “PusherController” and put this in the top “use Pusher\Pusher;”, let go to see controller content:

public function sendNotification()
    {
        //Remember to change this with your cluster name.
        $options = array(
            'cluster' => 'your_cluster', 
            'encrypted' => true
        );
//Remember to set your credentials below.
        $pusher = new Pusher(
            'your_key',
            'your_secret',
            'your_id',
            $options
        );
$message = [
            "ES: La cámara del salón ha detectado un intruso!",
            "EN: "The living room camera has detected an intruder!"
           ];
  
        //Send a message to notify channel with an event name of  notify-event
        $pusher->trigger('notify', 'notify-event', $message);
     return 'Real time simulation sended!';
    }

In this block we are put the credentials from you pusher account, when you put it the next step it’s sending the message with your custom notify channel and event name. Now we need create the views pages, go to “resources/views” and create the next folder “simulator” and files:

*“resources/views/index.blade.php” content:

*“simulator/simulator.blade.php” content it’s page with return putted in PusherController.

This file content all we need to create the real time camera simulator, if you make fast look, you can see we’re using big code, because we wanna make this cool, i hate the simple example.

Okay let’s to explain how this found. First you can see we are using many link and script, that’s need it cause require pusher, jquery, bootstrap and popper links. Look this block of code:

<i class="fas fa-bell fa-lg" style="margin-right: 28px;"></i>
<i class="fas fa-circle fa-sm" id="notify-color" style="margin-right: 52px; vertical-align: top;position: absolute;top: 3px;right: -20px;  color: red;display:none;"></i>
<a class="dropdown-item incidente-notification" href="#">Not intruder</a>

In this block we have bell icon and ID “notify-color” to make it visible when you receive the message in “ incidente-notification” with red color in the right top icon.

var pusher = new Pusher('your_key', {
    cluster: 'eu',
    encrypted: true
  });
var channel = pusher.subscribe('notify');
  
   channel.bind('notify-event', function(message) {           
     var incidente = '<strong class="text- danger">'+message[0]+'</strong>';
     
     $('.incidente-notification').html(incidente)
     $('#notify-color').css({'display':'inline'});
 });

In this block we are subscribe to “notify” channel with an event name of “notify-event”. We are recibe the message in var incidente we writen in class name “incidente-notification” the message recepted and finally we are making the bell visible.

STOP RIGHT NOW AND GO BACK AND READ ALL PLEASE, iF YOU COPY OR PASTE ANYTHING WITHOUT UNDERSTAND IT’S BAD PRACTICES, THAT’S NOT A RIGHT THING TO LEARN NOTHING

Read the next pages to understand all we are using here:

• https://laravel.com/docs/7.x/broadcasting
• https://laravel.com/docs/7.x/installation
• https://laravel.com/docs/7.x/urls#urls-for-named-routes

Nice, right now you have advanced pusher and laravel configuration to make something cool and incredible, let me show you how to use this.

Open 2 tabs in your favorite browser, in 1 tab open “http://127.0.0.1:8000/" and in another tab open “http://127.0.0.1:8000/notify".

That’s all, i hope that helps you to be better, any question you has, you can contact me. Follow me to be alerted to my content!

Here your surprise, the full code it’s here:

https://github.com/MaruanBO/real-time-simulator

You see it, you can make everything you want with ❤ by Marouane Boukhriss. Dont forget follow me!