Create simple Laravel Chat application using Chatify and Laravel Livewire
Tags: laravel, chat, chatify, tutorial
Published: 2022-05-23 12:06:44

Laravel is a web application framework with expressive, elegant syntax. It is currently the most used PHP framework, as it is very easy to use and robust for almost any kind of PHP application you might want to develop.

Today, I'll be showing you how to build a real time chat application quickly using Laravel.

To continue with this tutorial, you need the following:
- Have adequate understanding of the Laravel framework (Creating applications, Installing packages, adding routes, etc.)
- Pusher API account, you can create one here [Pusher account](https://pusher.com/)
- Laravel Jetstream [Read about it here](https://jetstream.laravel.com/2.x/introduction.html)
- Chatify package, you can read more about it here: [Chatify docs](https://chatify.munafio.com/installation) or view the [Github repo](https://github.com/munafio/chatify)

Why Chatify?
Below are some features of chatify that makes it a top choice for this chat application:
- Real-time contacts list updates.
- Favorites contacts list (Like stories style) and add to favorite button.
- Saved Messages to save your messages online like Telegram messenger app.
- Search functionality.
- Contact item's last message indicator (e.g. You: ....).
- Real-time user's active status.
- Real-time typing indicator.
- Real-time seen messages indicator.
- Real-time internet connection status.
- Upload attachments (Photo/File).
- Shared photos, delete conversation. (User's info right side).
- Responsive design with all devices.
- User settings and chat customization: user's profile photo, dark mode and chat color. with simple and wonderful UI design.


The Chatify package uses Pusher Api, so you need to setup a new channel on your Pusher account, and add those credentials to your Larael ".env" file. 

Follow the steps below to create a new channel on your Pusher account and link the app keys to your Laravel app:

- Login to your Pusher dashboard, go to channels and create a new app [or click this link](https://dashboard.pusher.com/apps)

![Create new app on Pusher](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nr7b6rrbjden0gose490.png)
- Select your preferred frontend and backend languages to get code snippets (This can be changed later on). For this app, I selected jQuery and Laravel for the frontend and backend respectively.

![Select app stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngsqq2rbgzn99i6uf1iz.png)
- Navigate to app keys as shown and copy the values to your Laravel

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/welhv2mogqw5jp8qdc9i.png)
- Enable client events in the Pusher application:

![Enable Pusher client events](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npwolvnswl0svwfgnygb.png)

- Replace these values in your .env Laravel with the appropraite values you copied from the app keys online

```
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
```

Before we continue with the tutorial, make sure to setup Laravel Jetstream/Livewire in your Laravel app, follow the steps [here](https://dev.to/osalumense/how-to-setup-jetstreamlivewire-in-laravel-application-54gd) to set it up in application.

![Chatify-dark-mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ib6o3spflxnn85glomo.png)

Now that you have configured your Laravel app with Pusher details and have set up Jetstream/Livewire in your application, we will go on to install Chatify.

Run the following command to install Chatify:
```
$ composer require munafio/chatify
```
Configure and publish Chatify assets, migrations and storage symlink:

```
$ php artisan chatify:install
```
Run migrations:

```
$ php artisan migrate
```

Once you have done all these, you can serve your application

```
php artisan serve
```
Navigate to 
http://127.0.0.1:8000/chatify , /chatify is the default route for the chatify package, it can however be configured following the instructions [here](https://chatify.munafio.com/configurations)

You should see your chat application live. 
Here is a screenshot of what my final application looks like.

![Chatify app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n4kcvv9fdh7bjza803z.png) 

Thanks for following this tutorial. Please don't forget to like if you found it helpful.