Realtime chat app with laravel 5.4 and vuejs 2

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.

In this post, I will show you how to build a laravel chat application with Pusher. I will use Vuejs as my JavaScript framework.

The code of the completed demo is available on : https://github.com/jaouadballat/chatapp

Authentication system

first we need an authentication system, that we can simply created by running an artisan command in our terminal:

Before we register our first user we need to set up our database

Then run migration in our terminal :

Message Model and Migration:

Create message model, migration and conroller in just one line of code by running :

Add a new rows in our message table:

and set ‘message ’and ‘user_id’ as protected fillable in Message Model, then run migration:

Set Relationship:

User can send many messages, so the relationship is ‘one to many’

Next we need the inverse relationship:

App Routes:

The homepage will display all messages and an simple input field to send a new message for that we define our app routes as:

Because we need just authenticated user can see and send messages we must add ‘auth’ middleware in ‘MesageController’:

Notice that fetch function will simply return all messages with there users stored in database, and the sentMessage function will store all caming messages.

Chat view:

Create a new file as ‘chat.blade.php’ :

As we can see we have set some custome tags: the message component will display our chat messages and the sent-message will provide an input field and a button to send the messages.

Message Component:

Sent.vue Component:

Next, we need to register our component in the root Vue instance. Open the resources/assets/js/app.js and update with code below:

Once the Vue instance is ready, using Axios, we make a GET request to the ‘messages’ route and fetch all the messages then pass it to the messages array that will be displayed on the Chat view. The ‘addMessage’ receives the message that was emitted from the ‘Sent’ component, pushes it to the messages array and makes a POST request to the ‘messages’ route with the message.

Create MessageSentEvent:

To add the realtime interactions to our chat app, we need to broadcast some kind of events . In our case, we’ll fire a MessageSentEvent when a user sends a message. First, we need to create an event, we’ll call it MessageSentEvent:

After that we must implement the ShouldBroadcast interface in our event. It ‘s should looks like:

Since our chat app is an authenticated-only app, we create a private channel called ‘chat’, which only authenticated users will be able to connect to.

So, we need a way to authorize that the currently authenticated user can actually listen on the channel. This can be done by in the ‘routes/channels.php’ file:

Setting up Pusher:

We need to tell Laravel that we are using the Pusher driver in the ’.env’ file:

Open 'config/app.php' and uncomment App\Providers\BroadcastServiceProvider in the providers array.

we still need to install the Pusher PHP SDK. We can do this using composer:

composer require pusher/pusher-php-server

Create a free Pusher account at https://pusher.com then login to your dashboard and create an app.

If you open the config/broadcasting.php, you’ll notice that Laravel is pulling some of Pusher credential from the .env file

So let’s update the .env file to contain our Pusher app credentials:

Also, remember to fill in the ‘cluster’ of your Pusher app and other additional options.

then you need to install all dependencies:

npm install

We’ll need also to install Laravel Echo, which is a JavaScript library to subscribe and listen to events:

npm install --save laravel-echo pusher-js

Then we need to tell Laravel Echo to use Pusher. At the bottom of the resources/assets/js/bootstrap.js file, Simply uncomment the Laravel Echo section and update the details with:

Listening For Event:

Once the MessageSentEvent event is broadcast, we need to listen for this event so we can update the chat messages with the newly sent message. We can do so by adding the code in mounted() function resources/assets/js/app.js :

Our chat app is done, now wa can send and receive messages in realtime.