DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Create simple Laravel Chat application using Chatify and Laravel Livewire
Akugbe Stephen
Akugbe Stephen

Posted on

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:

Create new app on Pusher

  • 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

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

Image description

  • Enable client events in the Pusher application:

Enable Pusher client events

  • 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=
Enter fullscreen mode Exit fullscreen mode

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.

Chatify-dark-mode

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
Enter fullscreen mode Exit fullscreen mode

Configure and publish Chatify assets, migrations and storage symlink:

$ php artisan chatify:install
Enter fullscreen mode Exit fullscreen mode

Run migrations:

$ php artisan migrate
Enter fullscreen mode Exit fullscreen mode

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

php artisan serve
Enter fullscreen mode Exit fullscreen mode

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.

Chatify app

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

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›