Tuesday, July 16, 2019

push notification : Real-time notifications in Laravel using Pusher


Real-time notifications are crucial to any application (web or mobile) and Pusher is one of the most popular services which helps you deliver real-time notifications to your applications. I have used Pusher on several projects and it was a delight to implement. It is a simple and straightforward process. So let us see how we can implement real-time notifications in this laravel pusher tutorial.

Prerequisites:

  • Sign up for a new account on Pusher.com and obtain your app_id, key, secret and also note down your cluster. These can be found in the App Keys section of your Pusher dashboard.

Setup your Laravel project:

  • See the official Laravel documentation for installation instructions on Laravel.
  • Require the pusher-php-server package in your laravel project using composer.
  • We will dump the composer autoload so our newly required package will be loaded by composer.
  • Create a PusherController which will hold our notification logic. We will also add a notify route to our file web.php, using which we will send notification using Pusher.

    1
    2
    3
    4
    5
     
    //web.php
     
    Route::get('/notify', 'PusherController@sendNotification');
     
  • Add the below code to sendNotification() method of PusherController.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
     
    <?php
     
    namespace App\Http\Controllers;
     
    use Illuminate\Http\Request;
    use Pusher\Pusher;
     
    class PusherController extends Controller
    {
     
        public function sendNotification()
        {
            //Remember to change this with your cluster name.
            $options = array(
                'cluster' => 'ap2',
                'encrypted' => true
            );
     
           //Remember to set your credentials below.
            $pusher = new Pusher(
                'key',
                'secret',
                'app_id',
                $options
            );
            
            $message= "Hello User";
            
            //Send a message to notify channel with an event name of notify-event
            $pusher->trigger('notify', 'notify-event', $message);  
        }
    }
     
    • Here we first include Pusher (use Pusher\Pusher) in our PusherControllerand set our cluster and encryption keys in an options array. We then create a new Pusher object by providing our credentials and also passing in our $options array.
    • We can then publish to a channel and also specify a channel name. I have used nofify as the channel name and notify-event as the event name and these can be changed to any name you want. But remember to use the same channel name and event name in your front-end client.
  • Define a view route in your web.php file. The home.blade.php will hold our js code and will display an alert whenever a new notification is published to our channel.
    1
    2
    3
     
    Route::view('/home', 'home');
     
  • Add the code below to home.blade.php.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
     
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Real-time notifications in Laravel using Pusher</title>
     
      </head>
      <body>
        <h1>Real-time notifications in Laravel using Pusher</h1>
     
        <!-- Incldue Pusher Js Client via CDN -->
        <script src="https://js.pusher.com/4.2/pusher.min.js"></script>
        <!-- Alert whenever a new notification is pusher to our Pusher Channel -->
     
        <script>
        //Remember to replace key and cluster with your credentials.
        var pusher = new Pusher('key', {
          cluster: 'ap2',
          encrypted: true
        });
     
        //Also remember to change channel and event name if your's are different.
        var channel = pusher.subscribe('notify');
        channel.bind('notify-event', function(message) {
            alert(message);
        });
     
        </script>
      </body>
    </html>
     
  • That’s it! open up a new tab and visit www.your_domain.dev/notify while having the www.your_domain.dev/home open in another tab and you should see the alert!.
Real-time notifications in Laravel using Pusher_output
Of course, this was just a basic demo and you may use this in a more practical setting such as a notification widget or something like that but the core concept will remain the same. The source code for this tutorial is available on GitHub.
If you liked this laravel pusher tutorial then you might also like to read other ways of sending notifications in Laravel and be sure to leave any comments or ask any questions you might have in the comment section below!.

at

2 comments:

  1. UnknownFebruary 7, 2022 at 5:03 AM

    That's amazing informative post, I want to add one more thing, If you want to make your web visitor to your subscriber then you should definitely check gravitec lifetime deal Best push notification for website ever.

    ReplyDelete
  2. subwaysubfersMarch 23, 2022 at 12:27 PM

    It is quite beneficial, although think about the facts when it reaches this target. 900 seconds into minutes

    ReplyDelete

Subscribe to: Post Comments (Atom)