How to Add Real-Time Notifications to Laravel with Pusher

This article was peer reviewed by Rafie Younes and Wern Ancheta. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

---

The modern web user expects to be informed of everything that happens within the application. You don’t want to be that one website that doesn’t even have the notifications dropdown found not just in all social media websites, but everywhere else these days, too.

Luckily, with Laravel and Pusher, implementing this functionality is a breeze. The code we’ll write in this tutorial can be found here.

Image via Pusher.com

Key Takeaways

• Utilize Laravel and Pusher to implement real-time notifications and enhance user interaction by providing immediate feedback on user activities.
• Pusher simplifies the integration of real-time bi-directional functionalities using WebSockets, which is more efficient than polling the server at intervals with AJAX.
• Set up a simple Laravel blog application, configure a MySQL database, and use migrations to create a followers system for user interactions.
• Use Laravel’s built-in notification system to send notifications about new followers and posts, enhancing the application’s dynamic interaction capabilities.
• Implement real-time notifications with Pusher, allowing notifications to be received immediately as events occur, without the need to refresh the page.
• Secure the real-time application by using private channels and authentication to ensure that notifications are only received by intended users.

Real-Time Notifications

In order to provide users with a good experience, notifications should to be shown in real-time. One approach is to send an AJAX request regularly to the back end and fetch the newest notifications if they exist.

A better approach is to leverage the power of WebSockets, and receive notifications the moment they are sent. This is what we’re going to use in this tutorial.

Pusher

Pusher is a web service for

… integrating realtime bi-directional functionality via WebSockets to web and mobile apps.

It has a very simple API, but we’re going to make using it even simpler with Laravel Broadcasting and Laravel Echo.

In this tutorial, we’re going to add real-time notifications to an existing blog. The basic functionality is similar to Real-Time Laravel Notifications with Stream. We’ll start off with this repo made by Christopher Vundi (I changed it just a bit) which is a simple blog where users that can perform CRUD on posts.

The Project

Initialization

First we’ll clone the simple Laravel blog:

<span>git clone https://github.com/vickris/simple-blog
</span>

Then we’ll create a MySQL database and set up environment variables to give the application access to the database.

Let’s copy env.example to .env and update the database related variables.

<span>cp .env.example .env
</span>

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

.env

Now let’s install the project’s dependencies with

<span>composer install
</span>

And run the migration and seeding command to populate the database with some data:

php artisan migrate <span>--seed
</span>

If you run the application and visit /posts you’ll be able to see a listing of generated posts. Check the application, register a user, and create some posts. It’s a very basic app, but serves our demo perfectly.

Follow Users Relationships

We want to give users the ability to follow other users, and be followed by users, so we have to create a Many To Many relationship between users to make it happen.

Let’s make a pivot table that relates users to users. Make a new followers migration:

php artisan make:migration create_followers_table <span>--create=followers
</span>

We need to add some fields to that migration: a user_id to represent the user who is following, and a follows_id field to represent the user who’s being followed.

Update the migration as follows:

<span>public function up()
</span><span>{
</span>    <span>Schema<span>::</span>create('followers', function (Blueprint $table) {
</span>        <span>$table->increments('id');
</span>        <span>$table->integer('user_id')->index();
</span>        <span>$table->integer('follows_id')->index();
</span>        <span>$table->timestamps();
</span>    <span>});
</span><span>}
</span>

Now let’s migrate to create the table:

php artisan migrate

If you have followed the Stream approach article you’ll find that things are almost identical up to this point. In the part that follows, we’re going to achieve the same follow functionality with a different approach.

Let’s add relationships methods to the User model.

<span>// ...
</span>
<span>class extends Authenticatable
</span><span>{
</span>    <span>// ...
</span>
    <span>public function followers() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'follows_id', 'user_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span>
    <span>public function follows() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'user_id', 'follows_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span><span>}
</span>

app/User.php

Now that the user model has the necessary relationships, followers returns all the followers of a user, and follows returns everyone the user is following.

We’ll be needing some helper functions to allow the user to follow another user, and to check whether a user isFollowing a specific user.

<span>// ...
</span>
<span>class extends Authenticatable
</span><span>{
</span>    <span>// ...
</span>
    <span>public function follow($userId) 
</span>    <span>{
</span>        <span>$this->follows()->attach($userId);
</span>        <span>return $this;
</span>    <span>}
</span>
    <span>public function unfollow($userId)
</span>    <span>{
</span>        <span>$this->follows()->detach($userId);
</span>        <span>return $this;
</span>    <span>}
</span>
    <span>public function isFollowing($userId) 
</span>    <span>{
</span>        <span>return (boolean) $this->follows()->where('follows_id', $userId)->first(['id']);
</span>    <span>}
</span>
<span>}
</span>

app/User.php

Perfect. With the model set, it’s time to list users.

Listing Users

Let’s start by setting the necessary routes

<span>//...
</span><span>Route<span>::</span>group(['middleware' => 'auth'], function () {
</span>    <span>Route<span>::</span>get('users', 'UsersController@index')->name('users');
</span>    <span>Route<span>::</span>post('users/{user}/follow', 'UsersController@follow')->name('follow');
</span>    <span>Route<span>::</span>delete('users/{user}/unfollow', 'UsersController@unfollow')->name('unfollow');
</span><span>});
</span>

routes/web.php

Then, it’s time to create a new controller for users:

php artisan make:controller UsersController

We’ll add an index method to it:

<span>// ...
</span><span>use App<span>\User</span>;
</span><span>class UsersController extends Controller
</span><span>{
</span>    <span>//..
</span>    <span>public function index()
</span>    <span>{
</span>        <span>$users = User<span>::</span>where('id', '!=', auth()->user()->id)->get();
</span>        <span>return view('users.index', compact('users'));
</span>    <span>}
</span><span>}
</span>

app/Http/Controllers/UsersController.php

The method needs a view. Let’s create the users.index view and put this markup in it:

@<span>extends('layouts.app')
</span>
@<span>section('content')
</span>    <span><div class="container">
</span>        <span><div class="col-sm-offset-2 col-sm-8">
</span>
            <span><!-- Following -->
</span>            <span><div class="panel panel-default">
</span>                <span><div class="panel-heading">
</span>                    All Users
                <span></div>
</span>
                <span><div class="panel-body">
</span>                    <span><table class="table table-striped task-table">
</span>                        <span><thead>
</span>                        <span><th>User</th>
</span>                        <span><th> </th>
</span>                        <span></thead>
</span>                        <span><tbody>
</span>                        @<span>foreach ($users as $user)
</span>                            <span><tr>
</span>                                <span><td clphpass="table-text"><div>{{ $user->name }}</div></td>
</span>                                @<span>if (auth()->user()->isFollowing($user->id))
</span>                                    <span><td>
</span>                                        <span><form action="{{route('unfollow', ['id' => <span><span>$user->id</span>])}}"</span> method="POST">
</span>                                            <span>{{ csrf_field() }}
</span>                                            <span>{{ method_field('DELETE') }}
</span>
                                            <span><button type="submit" id="delete-follow-{{ <span><span>$user->id</span> }}"</span> class="btn btn-danger">
</span>                                                <span><i class="fa fa-btn fa-trash"></i>Unfollow
</span>                                            <span></button>
</span>                                        <span></form>
</span>                                    <span></td>
</span>                                @<span>else
</span>                                    <span><td>
</span>                                        <span><form action="{{route('follow', ['id' => <span><span>$user->id</span>])}}"</span> method="POST">
</span>                                            <span>{{ csrf_field() }}
</span>
                                            <span><button type="submit" id="follow-user-{{ <span><span>$user->id</span> }}"</span> class="btn btn-success">
</span>                                                <span><i class="fa fa-btn fa-user"></i>Follow
</span>                                            <span></button>
</span>                                        <span></form>
</span>                                    <span></td>
</span>                                @<span>endif
</span>                            <span></tr>
</span>                        @<span>endforeach
</span>                        <span></tbody>
</span>                    <span></table>
</span>                <span></div>
</span>            <span></div>
</span>        <span></div>
</span>    <span></div>
</span>@endsection

resources/views/users/index.blade.php

You can now visit the /users page to see a listing of users.

To Follow, or to Unfollow

The UsersController lacks follow and unfollow methods. Let’s get them done to wrap this part up.

<span>//...
</span><span>class UsersController extends Controller
</span><span>{
</span>    <span>//...
</span>    <span>public function follow(User $user)
</span>    <span>{
</span>        <span>$follower = auth()->user();
</span>        <span>if ($follower->id == $user->id) {
</span>            <span>return back()->withError("You can't follow yourself");
</span>        <span>}
</span>        <span>if(!$follower->isFollowing($user->id)) {
</span>            <span>$follower->follow($user->id);
</span>
            <span>// sending a notification
</span>            <span>$user->notify(new UserFollowed($follower));
</span>
            <span>return back()->withSuccess("You are now friends with <span><span>{$user->name}</span>"</span>);
</span>        <span>}
</span>        <span>return back()->withError("You are already following <span><span>{$user->name}</span>"</span>);
</span>    <span>}
</span>
    <span>public function unfollow(User $user)
</span>    <span>{
</span>        <span>$follower = auth()->user();
</span>        <span>if($follower->isFollowing($user->id)) {
</span>            <span>$follower->unfollow($user->id);
</span>            <span>return back()->withSuccess("You are no longer friends with <span><span>{$user->name}</span>"</span>);
</span>        <span>}
</span>        <span>return back()->withError("You are not following <span><span>{$user->name}</span>"</span>);
</span>    <span>}
</span><span>}
</span>

app/Http/Controllers/UsersController.php

We’re done with the follow functionality. We can now follow and unfollow users from the /users page.

Notifications

Laravel provides an API for sending notifications through multiple channels. Emails, SMS, web notifications, and any other type of notifications can all be sent using the Notification class.

We are going to have two types of notifications:

• Follow notification: sent to a user when they get followed by another user
• Post created notification: sent to the followers of a given user when they create a new post

User Followed Notification

Using artisan commands, we can generate a migration for notifications:

<span>git clone https://github.com/vickris/simple-blog
</span>

Let’s migrate and create this new table.

<span>cp .env.example .env
</span>

We’re starting with follow notifications. Let’s execute this command to generate a notification class:

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Then we’ll update the notification class file we just created:

<span>composer install
</span>

app/Notifications/UserFollowed.php

With these few lines of code we can achieve a lot. First we’re requiring an instance of the $follower to be injected when this notification is created.

Using the via method, we’re telling Laravel to send this notification via the database channel. When Laravel encounters this, it will create a new record in the notifications table.

The user_id and notification type are automatically set, plus we can extend the notification with more data. That’s what toDatabase is for. The returned array will be added to the data field of the notification.

Finally, by implementing ShouldQueue, Laravel will automatically put this notification inside a queue to be executed in the background, which will speed up the response. This makes sense because we will be adding HTTP calls when we use Pusher later on.

Let’s initiate the notification when the user gets followed.

php artisan migrate <span>--seed
</span>

app/Http/Controllers/UsersController.php

We could call the notify method on a User model because it is already using the Notifiable trait. Any model you want to notify should be using it to get access to the notify method.

Mark a Notification as Read

Notifications will contain some information and a link to a resource. For example: when a user receives a notification about a new post, the notification should show an informative text, redirect the user to the post when clicked, and be flagged as read.

We’re going to make a middleware that checks if a request has a ?read=notification_id input and flag it as read.

Let’s make a middleware with the following command:

php artisan make:migration create_followers_table <span>--create=followers
</span>

Then, let’s put this code inside the handle method of the middleware:

<span>public function up()
</span><span>{
</span>    <span>Schema<span>::</span>create('followers', function (Blueprint $table) {
</span>        <span>$table->increments('id');
</span>        <span>$table->integer('user_id')->index();
</span>        <span>$table->integer('follows_id')->index();
</span>        <span>$table->timestamps();
</span>    <span>});
</span><span>}
</span>

app/Http/Middleware/MarkNotificationAsRead.php

In order to get our middleware to be executed for each request, we’ll add it to $middlewareGroups.

<span>git clone https://github.com/vickris/simple-blog
</span>

app/Http/Kernel.php

With that done, let’s show some notifications.

Showing Notifications

We have to show a listing of the notifications using AJAX, then update it in real time with Pusher. First, let’s add a notifications method to the controller:

<span>cp .env.example .env
</span>

app/Http/Controllers/UsersController.php

This will return the last 5 unread notifications. We just have to add a route to make it accessible.

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

routes/web.php

Now add a dropdown for notifications in the header.

<span>composer install
</span>

resources/views/layouts/app.blade.php

We’ve also added a global window.Laravel.userId variable inside a script to get the current user’s ID.

JavaScript and SASS

We’re going to use Laravel Mix to compile JavaScript and SASS. First, we need to install npm packages.

php artisan migrate <span>--seed
</span>

Now let’s add this code into app.js:

php artisan make:migration create_followers_table <span>--create=followers
</span>

app/resources/assets/js/app.js

This is just an initialization. We’re going to use notifications to store all notification objects whether they’re retrieved via AJAX or Pusher.

You probably guessed it, NOTIFICATION_TYPES contains types of notifications.

Next, let’s “GET” notifications via AJAX.

<span>public function up()
</span><span>{
</span>    <span>Schema<span>::</span>create('followers', function (Blueprint $table) {
</span>        <span>$table->increments('id');
</span>        <span>$table->integer('user_id')->index();
</span>        <span>$table->integer('follows_id')->index();
</span>        <span>$table->timestamps();
</span>    <span>});
</span><span>}
</span>

app/resources/assets/js/app.js

With this, we’re getting the latest notifications from our API and putting them inside the dropdown.

Inside addNotifications we concatenate the present notifications with the new ones using Lodash, and take only the latest 5 to be shown.

We need a few more functions to finish the job.

php artisan migrate

app/resources/assets/js/app.js

This function builds a string of all notifications and puts it inside the dropdown. If no notifications were received, it just shows “No notifications”.

It also adds a class to the dropdown button, which will just change its color when notifications exist. It’s a bit like Github’s notifications.

Finally, some helper functions to make notification strings.

<span>// ...
</span>
<span>class extends Authenticatable
</span><span>{
</span>    <span>// ...
</span>
    <span>public function followers() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'follows_id', 'user_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span>
    <span>public function follows() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'user_id', 'follows_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span><span>}
</span>

app/resources/assets/js/app.js

Now we’ll just add this to our app.scss file:

<span>// ...
</span>
<span>class extends Authenticatable
</span><span>{
</span>    <span>// ...
</span>
    <span>public function follow($userId) 
</span>    <span>{
</span>        <span>$this->follows()->attach($userId);
</span>        <span>return $this;
</span>    <span>}
</span>
    <span>public function unfollow($userId)
</span>    <span>{
</span>        <span>$this->follows()->detach($userId);
</span>        <span>return $this;
</span>    <span>}
</span>
    <span>public function isFollowing($userId) 
</span>    <span>{
</span>        <span>return (boolean) $this->follows()->where('follows_id', $userId)->first(['id']);
</span>    <span>}
</span>
<span>}
</span>

app/resources/assets/sass/app.scss

Let’s compile assets:

<span>//...
</span><span>Route<span>::</span>group(['middleware' => 'auth'], function () {
</span>    <span>Route<span>::</span>get('users', 'UsersController@index')->name('users');
</span>    <span>Route<span>::</span>post('users/{user}/follow', 'UsersController@follow')->name('follow');
</span>    <span>Route<span>::</span>delete('users/{user}/unfollow', 'UsersController@unfollow')->name('unfollow');
</span><span>});
</span>

If you try and follow a user now, they’ll get a notification. When they click it, they’ll be redirected to /users, plus the notification will disappear.

New Post Notification

We’re going to notify followers when a user creates a new post.

Let’s start by generating the notification class.

<span>git clone https://github.com/vickris/simple-blog
</span>

Let’s update the generated class as follows:

<span>cp .env.example .env
</span>

app/Notifications/NewArticle.php

Next, we need to send the notification. There are several ways we could do this. I like to use Eloquent Observers.

Let’s make an observer for Post and listen to its events. We’ll create a new class: app/Observers/PostObserver.php

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Then, register the observer in AppServiceProvider:

<span>composer install
</span>

app/Providers/AppServiceProvider.php

Now we just need to format the message to be shown in JS:

php artisan migrate <span>--seed
</span>

app/resources/assets/js/app.js

And voilà! Users are getting notifications about follows and new posts! Go ahead and try it out!

Going Real-Time with Pusher

It’s time to use Pusher to get notifications in real-time through websockets.

Sign up for a free Pusher account at pusher.com and create a new app.

php artisan make:migration create_followers_table <span>--create=followers
</span>

Set your account’s options inside the broadcasting config file:

<span>public function up()
</span><span>{
</span>    <span>Schema<span>::</span>create('followers', function (Blueprint $table) {
</span>        <span>$table->increments('id');
</span>        <span>$table->integer('user_id')->index();
</span>        <span>$table->integer('follows_id')->index();
</span>        <span>$table->timestamps();
</span>    <span>});
</span><span>}
</span>

config/broadcasting.php

Then we’ll register AppProvidersBroadcastServiceProvider in the providers array.

php artisan migrate

config/app.php

We should install Pusher’s PHP SDK and Laravel Echo now:

<span>// ...
</span>
<span>class extends Authenticatable
</span><span>{
</span>    <span>// ...
</span>
    <span>public function followers() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'follows_id', 'user_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span>
    <span>public function follows() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'user_id', 'follows_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span><span>}
</span>

<span>// ...
</span>
<span>class extends Authenticatable
</span><span>{
</span>    <span>// ...
</span>
    <span>public function follow($userId) 
</span>    <span>{
</span>        <span>$this->follows()->attach($userId);
</span>        <span>return $this;
</span>    <span>}
</span>
    <span>public function unfollow($userId)
</span>    <span>{
</span>        <span>$this->follows()->detach($userId);
</span>        <span>return $this;
</span>    <span>}
</span>
    <span>public function isFollowing($userId) 
</span>    <span>{
</span>        <span>return (boolean) $this->follows()->where('follows_id', $userId)->first(['id']);
</span>    <span>}
</span>
<span>}
</span>

We have to set the notification data to be broadcast. Let’s update the UserFollowed notification:

<span>//...
</span><span>Route<span>::</span>group(['middleware' => 'auth'], function () {
</span>    <span>Route<span>::</span>get('users', 'UsersController@index')->name('users');
</span>    <span>Route<span>::</span>post('users/{user}/follow', 'UsersController@follow')->name('follow');
</span>    <span>Route<span>::</span>delete('users/{user}/unfollow', 'UsersController@unfollow')->name('unfollow');
</span><span>});
</span>

app/Notifications/UserFollowed.php

And NewPost:

php artisan make:controller UsersController

app/Notifications/NewPost.php

The last thing we need to do is update our JS. Open app.js and add the following code

<span>// ...
</span><span>use App<span>\User</span>;
</span><span>class UsersController extends Controller
</span><span>{
</span>    <span>//..
</span>    <span>public function index()
</span>    <span>{
</span>        <span>$users = User<span>::</span>where('id', '!=', auth()->user()->id)->get();
</span>        <span>return view('users.index', compact('users'));
</span>    <span>}
</span><span>}
</span>

app/resources/assets/js/app.js

And we’re done here. Notifications are being added in real-time. You can now play with the app and see how notifications get updated.

Conclusion

Pusher has a very simple API that makes receiving real-time events incredibly easy. Coupled with Laravel notifications, we could send a notification through multiple channels (email, SMS, Slack, etc.) from one place. In this tutorial, we added user-following functionality to a simple blog, and enhanced it with the aforementioned tools to get some smooth real-time functionality.

There’s a lot more to Pusher and to Laravel notifications: in tandem, the services allow you to send pub/sub messages in real time to browsers, mobiles, and IOT devices. There’s also a presence API to get online/offline status of users.

Please check their respective documentations (Pusher docs, Pusher tutorials, Laravel docs) to explore them in more depth and utilize their true potential.

Let me hear what you’ve built with these technologies in the comments.

Frequently Asked Questions (FAQs) about Real-Time Notifications in Laravel with Pusher

How Can I Troubleshoot Issues with Laravel and Pusher Integration?

Troubleshooting issues with Laravel and Pusher integration can be a bit tricky, especially if you’re new to the platform. The first thing you should do is check your .env file to ensure that your Pusher app credentials are correctly entered. If the credentials are correct, you can use the Pusher debug console to check for any errors. If you’re still having issues, you can use Laravel’s built-in logging feature to log any errors that occur during the broadcasting process. This can help you pinpoint exactly where the issue is occurring.

Can I Use Laravel and Pusher for Mobile Notifications?

Yes, you can use Laravel and Pusher for mobile notifications. Pusher provides a REST API that you can use to send notifications to mobile devices. You can use Laravel’s event broadcasting feature to trigger these notifications. When an event is broadcasted, you can catch it in your mobile app and display the notification.

How Can I Customize the Look of My Notifications?

Customizing the look of your notifications is done on the client-side, not on the server-side. This means that you’ll need to use JavaScript, CSS, or any other client-side technology to customize your notifications. Pusher provides a JavaScript library that you can use to listen for events and display notifications. You can use this library in combination with your own CSS to customize the look of your notifications.

How Can I Test My Laravel and Pusher Integration?

Testing your Laravel and Pusher integration can be done using Laravel’s built-in testing features. You can write a test that triggers an event and then use the Pusher debug console to check if the event was broadcasted. You can also write tests to check if your event listeners are working correctly.

How Can I Secure My Laravel and Pusher Integration?

Securing your Laravel and Pusher integration is crucial to prevent unauthorized access to your data. You can secure your integration by using private channels. Private channels require authentication, which means that only authorized users can subscribe to them. You can implement authentication using Laravel’s built-in authentication features.

Can I Use Laravel and Pusher for Real-Time Chat Applications?

Yes, you can use Laravel and Pusher for real-time chat applications. Pusher provides real-time functionality that you can use to send and receive messages instantly. You can use Laravel’s event broadcasting feature to trigger these messages.

How Can I Handle Errors in My Laravel and Pusher Integration?

Handling errors in your Laravel and Pusher integration can be done using Laravel’s built-in error handling features. You can catch any exceptions that occur during the broadcasting process and handle them accordingly. You can also use the Pusher debug console to check for any errors.

How Can I Optimize My Laravel and Pusher Integration?

Optimizing your Laravel and Pusher integration can be done by reducing the number of events you broadcast. Broadcasting too many events can slow down your application and consume a lot of resources. You can also optimize your integration by using Laravel’s queue system to handle events in the background.

Can I Use Laravel and Pusher for Live Streaming Applications?

Yes, you can use Laravel and Pusher for live streaming applications. Pusher provides real-time functionality that you can use to broadcast live video streams. You can use Laravel’s event broadcasting feature to trigger these streams.

How Can I Monitor My Laravel and Pusher Integration?

Monitoring your Laravel and Pusher integration can be done using Pusher’s analytics features. You can use these features to track the number of messages you’re sending, the number of connections you have, and other important metrics. You can also use Laravel’s built-in logging feature to log any errors that occur during the broadcasting process.

The above is the detailed content of How to Add Real-Time Notifications to Laravel with Pusher. For more information, please follow other related articles on the PHP Chinese website!