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

Camera demonstration in real time simulator.
apt-get install php
sudo apt-get updatesudo apt-get install curl
sudo curl -s https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
composer global require laravel/installer
composer create-project --prefer-dist laravel/laravel laravel-simulator
php artisan serve
Server deployment locally.
Server deployment locally.
Server deployment locally.
php artisan make:controller RealTimeController
Route::get('/', 'RealTimeController@getIndex')->name('index');Route::get('/simulator', 'RealTimeController@getSimulator')->name('simulator');
public function getIndex(){
return view('index');
}
public function getSimulator(){
return view('simulator/simulator');
}
php artisan make:controller PusherController
composer require pusher/pusher-php-server
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your_id
PUSHER_APP_KEY=your_key
PUSHER_APP_SECRET=your_secret
PUSHER_APP_CLUSTER=your_cluster
'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,
],
],
Route::get('/notify', 'PusherController@sendNotification');
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!';
}
<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>
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'}); });

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:

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

At the age of 8 I was doing impressive things, at 21 I continue to do them. Find me here: linkedin.com/in/marouane-boukhriss-b183621aa

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store