Laravel Pusher

Laravel Pusher – Laravel pusher is the feature that allows you to broadcasting event from server to multiple client or listeners or receivers.

Laravel Pusher Example

Pusher allows you broadcasting without using external server or javascript like Node. You can directly implement pusher and jquery then just create channel and fire event. It’s provide feature for realtime binding.

Pusher is the package you need to install it externally. You need js file for front and pusher package at backend or Laravel side.

In this article, I am going to make a very simple example Pusher. I will create live comment reload system.

First of all, you need to register at pusher.com to get your application’s:

  • key
  • app_id
  • secret
  • cluster

Everything you need to pass when you create an instance of your application at the backend. Pusher provides 100 connections free then you need to purchase plan. I am using free plan to show demo.

After register your app you will get information as I specified key, app_id, secret and cluster. You can find it at App Keys section. Here is an example how it will look like:

Laravel Pusher Example

Next step is to install Pusher package in your Laravel application using composer:

After install, you need pusher js and jquery js file into your view or blade file. jQuery you can download from jquery.com and for the pusher, you can use CDN like this:

After include assets, you need to create comments table, Comment model, and CommentController. I follow artisan commands to do that:

 

Here is my migration file that helps us to make a table. Table is very simple just contains comment, id and timestamps columns

In Comment Model nothing to add extra default generated by Laravel we can use that.

Now let’s add routes we need two routes one is for display form and second is to post form.

Let create form and display it into blade file

and blade file to display a form with include jquery and pusher js

I use bootstrap for a better look and feel. You can see that I added commentBox ID to form that can help to select in jquery same in submit and refresh button.

Submit button will submit the form with ajax and refresh button will get latest few comments.

So let’s write code to comment submit the form and insert into the database in blade file. Make sure you configured the database and run migration and after Laravel can connect with database.

I wrap code within the script tag. I handled submit event of form and then pass form data of comment textarea into AJAX.

When from going to submit I disabled submit button so users can’t click multiple times while form submitting.

After data added successful into database we need to fire an event and pass inserted data into event. So we can access this at front side.

I am using CommentController to store data as we specified into routes file.

The makeEventObject() method used to create an instance of pusher class that accepts three params. key, secret and app_id. this method will be return and object of pusher class.

After adding a comment into the database I fire the event using trigger method, of course, we need an object of pusher class that returned by a makeEventObject method.

After an event , fires you need to listen to that event at the front side. Here in my case that is welcome.blade.php

The appendComment() will take object of comment which we passed from event listener channel.bind(‘new-reply’,callback); I used lorempixel dynamic images for test purpose and Test User also. You can pass username dynamic as per author of a comment.

Now let’s grab few old comments to make look it user-friendly by using AJAX. I already added new routes just need to add front method and backend method.

One last step is to add method to controller file.

To get last 5 comments only.

And it’s done. Here how it will look:

Laravel Pusher Example

You can download code from here.

Leave a Reply

Your email address will not be published. Required fields are marked *