implementing a chat app with laravel and pusher

Implementing A Chat App Using Laravel And Pusher

In this tutorial we will implement a real time chat application using laravel framework and laravel broadcasting using the pusher library as it supports a real time events and channels.

 

Laravel broadcasting based internally on Web Sockets but the advantages of using it is that it facilitates all the hard work of web sockets because implementing web sockets from scratch require a lot of work like special server to handle connections etc, you can read more about implementing a socket server in this article.

In fact laravel handles broadcasting using the event listener pattern so before starting you should have knowledge of laravel events and listeners you can more about them here.

There are a variety of drivers that can be used inside broadcasting some of them are pusher, redis, and log. In this tutorial we will be using Pusher.

 

Preparing The App

Let’s create a new laravel project, in this tutorial i will be using laravel 5.5 so initiate this command in the terminal:

After create a new database and update your .env file with the database credentials like that:

 

Creating Tables

When thinking about the tables, we need two have a users table and another table for the messages, fortunately laravel provides the users migration out of the box, so all we need is a messages migration:

 

Next open database/migrations/xxxxx_create_migrations_table.php and update it as shown below:

Now run

After creating the tables let’s proceed to prepare the models.

 

Creating Models

As we already have a User model we need only to create a new model for the messages table so initiate this command in the terminal:

Note there is no need to create a model for users as laravel already created to us out of the box.

 

Generating Authentication

Run this command to generate authentication scaffolding:

Now the auth routes be sure that the redirectTo in LoginController, RegisterController, and ResetPasswordController like this:

 

Preparing Pusher

To get the pusher credentials go to https://pusher.com/ and create a new account, then create a new app and get the credentials as shown in this image and update your .env file.

implementing a chat app with laravel and pusher

 

 

 

Preparing Chat UI

We will use bootstrap for that, a chat box contains the messages in the top and text input along with a button in the bottom area in much the same way the facebook chat looks like as shown in this image:

building a chat app

 

Project Structure

implementing a chat app with laravel and pusherimplementing a chat app with laravel and pusherimplementing a chat app with laravel and pusher

 

 

 

 

 

 

 

 

As you see in the image above this is our project file structure, so let’s first create

app/Lib/PusherFactory.php

This simple class just return a new instance of Pusher to be used by other classes to subscribe and fire events.

 

create a new css file public/css/chat.css and update it like this:

For the sound and avatar you can download them from here.

Updating main layout

Open resources/views/layouts/app.blade.php and update it like below:

This is a simple layout we just added a div with id=’chat-verlay‘ this div will contain the chat boxes and also added audio element that represent the chat alert sound.

 

Next create a new view resources/views/chat-box.blade.php

The code above represents a blueprint of the chat box template, this template will be cloned according to the selected user.

 

Displaying home users

As we enter into a chat application we first see a list of users to chat with so let’s display them now:

open app/Http/Controllers/HomeController.php and update it like this:

Then update the routes/web.php as follows:

Finally update resources/views/home.blade.php with this code:

As shown above we looped over the users to display them a long with a link that will open the chat box, currently you will see no users but try to register new users using a another browser. We also included the chat-box template and pusher javascript api and some hidden fields to be used by our javascript code.

Opening the chat box

Create a new controller called MessagesController so run this command in the terminal:

 

Now open app/Http/Controllers/MessagesController.php and update it as shown below:

In the code above we first create a new action getLoadLatestMessages, this action will be called when we open the chat box for the first time to fetch the latest messages between the two users.

 

Open resources/views/message-line.blade.php and update it as follows:

The above code represents a single message sent or received by the user.

 

update routes/web.php:

 

Finally we need to update public/js/chat.js with this code:

This code is strait forward first we created a new pusher instance and subscribed to the chat channel, we will supply this channel in the server code shortly then we added a handler for chat-toggle link. The process is to make a copy of the chatbox html template according to the selected user exactly like facebook chat when you click on any user a chat box opened, so we accomplished this by using this function:

After we cloned and opened the chat box we loaded the latest messages between the currently logged in user and the selected user using loadLatestMessages function.

Sending and receiving messages:

Open app/Http/Controllers/MessagesController.php and add this method:

In the above method, the most important part is pusherFactory::make()->trigger(), the trigger fires a new event with data and it takes three parameters [channel name, event name, array of data].

Now update routes/web.php:

Finally update public/js/chat.js:

As shown in the code when we click the send btn it will call the send function to make an ajax request to the server, after that comes the magic in this line:

This code listens for the send event that we already subscribed it in the server previously so every time you send a message to server the server fires an event which in turn get caught in the javascript code, and get displayed using displayMessage() function.

 

Handling old messages on scroll up:

If we need to fetch the old messages on scrolling up like facebook we can accomplish that using the first message created date so

open app/Http/Controllers/MessagesController.php  and add this method:

Yet a gain we fired a new event called ‘oldMsgs‘.

Now update routes/web.php:

Then open public/js/chat.js and update it as follows:

As shown in the code above i listened for scroll event then i added a condition to check if we scroll in the up direction not down then we called function fetchOldMessages() which in return will fire an event to the server.

 

Download the source code

 

Share this: