DEV Community

AL Mamon
AL Mamon

Posted on

Building a Real-Time Chat Application in Laravel with Wirechat

Why Choose Wirechat?
Wirechat simplifies real-time chat implementation in Laravel applications by providing

  • Seamless Livewire integration
  • Built-in WebSocket support
  • Polymorphic chat relationships
  • Developer-friendly customization
  • Production-ready components

Installation Guide

  1. Project Setup 
composer create-project laravel/laravel your-project
cd your-project
Enter fullscreen mode Exit fullscreen mode
  1. Authentication Setup (Recommended) 
composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev
php artisan migrate
Enter fullscreen mode Exit fullscreen mode
  1. Package Installation 
composer require namu/wirechat
php artisan wirechat:install
php artisan migrate
Enter fullscreen mode Exit fullscreen mode

To ensure Tailwind purges CSS classes from the package, add the following lines to your /resources/css/app.css file:

/* resources/css/app.css */

@source '../../vendor/namu/wirechat/resources/views/**/*.blade.php';
@source '../../vendor/namu/wirechat/src/Livewire/**/*.php';
Enter fullscreen mode Exit fullscreen mode

Note: This package requires the @tailwindcss/forms plugin. Make sure it is installed and included in your Tailwind config.

WebSocket Setup

php artisan install:broadcasting
Enter fullscreen mode Exit fullscreen mode

Follow prompts to install Laravel Reverb

php artisan reverb:start
Enter fullscreen mode Exit fullscreen mode

Queue Worker
For optimal performance, prioritize message processing:

bash

php artisan queue:work --queue=messages,default
Enter fullscreen mode Exit fullscreen mode

Development Workflow
Terminal 1: Start Laravel server

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Terminal 2: Start WebSocket server

php artisan reverb:start
Enter fullscreen mode Exit fullscreen mode

Terminal 3: Start queue worker

php artisan queue:work
Enter fullscreen mode Exit fullscreen mode

Terminal 4: Start Vite dev server

npm run dev
Enter fullscreen mode Exit fullscreen mode

Implementation Guide

  1. Make Models Chatable 
php
use Namu\WireChat\Traits\Chatable;

class User extends Authenticatable
{
    use Chatable;

    // Your existing model code
}
Enter fullscreen mode Exit fullscreen mode
  1. Starting Conversations Programmatically create chats:

php
// One-to-one chat
$user->startConversationWith($recipient);

// Group chat
$user->createGroupChat([$participant1, $participant2], 'Group Name');

  1. Customizing Components Publish views for customization: 
php artisan vendor:publish --tag=wirechat-views
Enter fullscreen mode Exit fullscreen mode
  1. Extending Functionality Create a service provider to extend Wirechat: 
php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Namu\WireChat\WireChat;

class ChatServiceProvider extends ServiceProvider
{
    public function boot()
    {
        WireChat::messageReceived(function ($message) {
            // Custom logic when message is received
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Wirechat provides a robust foundation for Laravel chat applications while maintaining flexibility for customization. By following this guide, you can implement a production-ready chat system quickly while having the option to extend functionality as your application grows.

For further assistance:

  • Check the package documentation
  • Review Laravel broadcasting and Livewire documentation
  • Explore the package source code for implementation examples

Happy coding!

Top comments (0)