Create simple Laravel Chat application using Chatify and Laravel Livewire

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
• Laravel Jetstream Read about it here
• Chatify package, you can read more about it here: Chatify docs or view the Github repo

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

• 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.

• Navigate to app keys as shown and copy the values to your Laravel

• Enable client events in the Pusher application:

• 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 to set it up in application.

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

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

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