Laravel 8 Pusher Notification Example Tutorial

In this tutorial, we will explain to you how to create a push notification example in Laravel 8(Laravel 8 Pusher Notification Example Tutorial). Pusher is a well-known service that allows you to send real time notifications to your applications.

In this example, we will integrate the pusher notification in laravel 8 using the “pusher-php-server” package. We will also send web push notification in laravel. so you can follow the below step.

Overview
Step 1: Install Laravel
Step 2: Install Package
Step 3: Setup your Pusher Account
Step 4: Create an event
Step 5: Create a Controller
Step 6: Define route in laravel
Step 7: Create view file in laravel
Step 8: Run The Application

Step 1: Install Laravel
We are going to install laravel 8, so first open the command prompt or terminal and go to xampp htdocs folder directory using the command prompt. after then run the below command.

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

1	composer create-project --prefer-dist laravel/laravel laravel8_realtime_notification

Step 2: Install Package
Now, we are going to install the “pusher/pusher-php-server” package using the below command.

composer require pusher/pusher-php-server

1	composer require pusher/pusher-php-server

Step 3: Setup your Pusher Account
First, we Must have an account on Pusher.com. if no then please go to the pusher official site and create an account.
After successfully created an account and get the appid, key, secret and cluster. we will set the credentials in the .env file. so you can see our code.

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=ap2

PUSHER_APP_ID=

PUSHER_APP_KEY=

PUSHER_APP_SECRET=

PUSHER_APP_CLUSTER=ap2

Step 4: Create an event
we need to create the type of event for which it works as a notification send in Laravel. Events can be triggered from anywhere in the application. the file will be created in app/Events directory. so you can create the event class using the below command.

php artisan make:event Notify

1	php artisan make:event Notify

app/Events/Notify.php

<?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 Notify
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('channel-name');
    }
}

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

{

use Dispatchable, InteractsWithSockets, SerializesModels;

/**

* Create a new event instance.

* @return void

public function __construct()

{

}

/**

* Get the channels the event should broadcast on.

* @return \Illuminate\Broadcasting\Channel|array

public function broadcastOn()

{

return new PrivateChannel('channel-name');

}

Step 5: Create a Controller
Here below command help to create the controller.

php artisan make:controller PusherNotificationController

1	php artisan make:controller PusherNotificationController

PusherNotificationController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Pusher\Pusher;
class PusherNotificationController extends Controller
{
    public function notification()
    {
        $options = array(
			'cluster' => env('PUSHER_APP_CLUSTER'),
			'encrypted' => true
		);
        $pusher = new Pusher(
			env('PUSHER_APP_KEY'),
			env('PUSHER_APP_SECRET'),
			env('PUSHER_APP_ID'), 
			$options
		);

        $data['message'] = 'Hello XpertPhp';
        $pusher->trigger('notify-channel', 'App\\Events\\Notify', $data);

    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Pusher\Pusher;

class PusherNotificationController extends Controller

{

public function notification()

{

$options = array(

'cluster' => env('PUSHER_APP_CLUSTER'),

'encrypted' => true

);

$pusher = new Pusher(

env('PUSHER_APP_KEY'),

env('PUSHER_APP_SECRET'),

env('PUSHER_APP_ID'),

$options

);

$data['message'] = 'Hello XpertPhp';

$pusher->trigger('notify-channel', 'App\\Events\\Notify', $data);

}

Step 6: Define route in laravel
Add the following route code in the “routes/web.php” file.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PusherNotificationController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::get('send',[PusherNotificationController::class, 'notification']);
?>

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PusherNotificationController;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::get('/notification', function () {

return view('notification');

});

Route::get('send',[PusherNotificationController::class, 'notification']);

Step 7: Create view file in laravel
So finally, first we will create the student.blade.php files in the “resources/views” directory.
notification.blade.php

<!DOCTYPE html>
<head>
  <title>Laravel 8 Pusher Notification Example Tutorial - XpertPhp</title>
  <h1>Laravel 8 Pusher Notification Example Tutorial</h1>
  <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
  <script>

   var pusher = new Pusher('{{env("MIX_PUSHER_APP_KEY")}}', {
      cluster: '{{env("PUSHER_APP_CLUSTER")}}',
      encrypted: true
    });

    var channel = pusher.subscribe('notify-channel');
    channel.bind('App\\Events\\Notify', function(data) {
      alert(data.message);
    });
  </script>
</head>

<!DOCTYPE html>

<head>

<title>Laravel 8 Pusher Notification Example Tutorial - XpertPhp</title>

<h1>Laravel 8 Pusher Notification Example Tutorial</h1>

var pusher = new Pusher('{{env("MIX_PUSHER_APP_KEY")}}', {

cluster: '{{env("PUSHER_APP_CLUSTER")}}',

encrypted: true

});

var channel = pusher.subscribe('notify-channel');

channel.bind('App\\Events\\Notify', function(data) {

alert(data.message);

});

</script>

</head>

Step 8: Run The Application
We can start the server and run this application using the below command.

php artisan serve

1	php artisan serve

Now, we will use the below URL to send a notification. so you can open a new tab and visit the “http://localhost:8000/send” notification.

http://127.0.0.1:8000/send

1	http://127.0.0.1:8000/send

if you want to see the notification then you can see the below URL and open it in another tab and you can see the alert notification.

http://127.0.0.1:8000/notification

1	http://127.0.0.1:8000/notification