A basic understanding of Laravel and Vue.js is needed to follow this tutorial. Show Update: as of 13 October 2021 a newer version of this tutorial is available on how to create a chat app with Vue.js and Laravel 8. Find the new guide here. Laravel makes it easy to build modern applications with realtime interactions by providing an event broadcasting system which allows developers to share the same event names between the server-side code and the client-side JavaScript application. Pusher, on the other hand, is an easy and reliable platform for building scalable realtime applications. Laravel provides support for Pusher out of the box, which makes building realtime applications with Laravel and Pusher seamless. In fact, Pusher has emerged as one of the Laravel community’s preferred tools to make apps realtime, thanks to the support of Taylor Otwell, Jeffrey Way, Matt Stauffer, and many more. In this post, I will be showing you how to build a laravel chat application with Pusher. I will be using Vue.js as my JavaScript framework, although you can use the JavaScript framework of your choice or even jQuery and vanilla JavaScript. Before we start, let’s take a quick look at what we’ll be building. The code of the completed demo is available on GitHub. Setting Up LaravelWe’ll start by creating a new Laravel project. While there are different ways of creating a new Laravel project, I prefer using the Laravel installer. Open your terminal and run the code below:
This will create a Before we start using Laravel event broadcasting, we first need to register the
We need to tell Laravel that we are using the Pusher driver in the
Though Laravel supports Pusher out of the box, we still need to install the Pusher PHP SDK. We can do this using composer:
Once the installation is done, we need to configure our Pusher app credentials in Setting Up PusherIf you don’t have one already, create a free Pusher account at https://pusher.com/signup then login to your dashboard and create an app. Now, let’s
fill in our Pusher app credentials. If you open the
We need to modify the source a little bit here to get this to work. Modify the source so that it looks like this:
Then let’s update the
Remember
to replace the Now that we’ve set up the back-end of our project, let’s move on to setting up the front-end. Laravel provides some front-end frameworks and libraries, including - We’ll also be making use of Laravel Mix, which is a wrapper around Webpack that will help us compile our CSS and JavaScript. But first, we need to install these dependencies through
To subscribe and listen to events, Laravel provides Laravel Echo, which is a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel. We’ll need to install it along with the Pusher JavaScript library:
Once installed, we need to tell Laravel Echo to use Pusher. At the bottom of the
Remember to replace the Now that we are done with setting up Laravel and Pusher and other dependencies, it time to start building our chat application. Authenticating UsersOur chat app will require
users to be logged in before they can begin to chat. So, we need an authentication system, which with Laravel is as simple as running an
This will create the necessary routes, views and controllers needed for an authentication system. Before we go on to create users, we need to run the
Update with your own database details. Now, we can run our migration:
There’s a bug in Laravel 5.4 if you’re running a version of MySQL older than 5.7.7 or MariaDB older than 10.2.2. More info here. This can be fixed by replacing the
Message Model and MigrationCreate a
Open the
Within the
The
User To Message RelationshipWe need to setup the relationship between a user and a message. A user can send many messages while a particular message was sent by a user. So, the relationship between the user and message is a one to many relationship. To define this relationship, add the code below to
Next, we need to define the inverse relationship by adding
the code below to
Defining App RoutesLet’s create the routes our chat app will need. Open
The homepage will display chat messages and an input field to type new messages. A NOTE: Since we have
removed the
ChatsControllerNow let’s create the controller which will handle the logic of our chat app. Create a
Open the new create
Using the Creating The Chat App ViewFor the chat app view, we’ll be making use of Bootsnipp chat snippet with some few modifications. Create a new
Notice we have some custom tags with the Before we go to create our
Looking at the Create a new
This component accepts an array of messages as Next, create a new
The Next, we need to register our component in the root
Once the Broadcasting Message Sent EventTo add the realtime interactions to our chat app, we need to broadcast some kind of events based on some activities. In our case, we’ll fire a
This will create a new
We defined two public properties that will be the data that will be passed along to the channel we are broadcasting to. NOTE: These properties must be public for it to be passed along to the channel. Since our chat app is an
authenticated-only app, we create a private channel called Next, we need to update the
Since we created a private channel, only
authenticated users will be able to listen on the
We pass to the Now when a message is sent, the Listening For Message Sent EventOnce the
We subscribe to the Before testing out our chat app, we need to compile the JavaScript files using Laravel Mix using:
Now we can start our chat app by running:
Our chat app is done as we can now send and receive messages in realtime. ConclusionYou can see how straightforward it is to build a realtime app with Laravel and Pusher. With Pusher, you are not limited to chat apps, you can build any application that requires realtime interactivity. So, go create a free Pusher account and start building great applications! |