Laravel Internal Live-Chat with Reverb and Livewire

This project is based on Laravel, Reverb and Livewire 3.

Feel free to pick the parts that you actually need in your projects.

How to install

• Clone the repository with git clone
• Copy the .env.example file to .env and edit database credentials there
• Run composer install
• Run php artisan key:generate
• Run php artisan storage:link
• Run php artisan migrate --seed (it has some seeded data for your testing)
• Run npm ci and npm run build
• Run php artisan reverb:start to start Laravel Reverb server
• Launch the main URL /. Log in with credentials for a user to desire:
  • Client: [email protected] / password
  • Developer: [email protected] / password
• That's it.

Screenshots

How It Works

Broadcasting Configuration

For real-time messaging to work, your .env file must be configured with the following broadcasting settings:

BROADCAST_CONNECTION=reverb
 
REVERB_APP_ID=your_app_id
REVERB_APP_KEY=your_app_key
REVERB_APP_SECRET=your_app_secret
REVERB_HOST=127.0.0.1
REVERB_PORT=8080
REVERB_SCHEME=http
 
VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Application Architecture

The chat system is built around a ChatController that handles chat creation and display, with real-time messaging powered by Livewire components and broadcasting.

app/Http/Controllers/ChatController.php:

class ChatController extends Controller
{
    public function store(Request $request, Job $job): RedirectResponse
    {
        // Only developers can create chats
        if (! auth()->user()->isDeveloper()) {
            abort(403, 'Only developers can chat with clients.');
        }
 
        $chat = Chat::firstOrCreate([
            'job_id'       => $job->id,
            'developer_id' => auth()->id(),
        ]);
 
        return redirect()->route('chats.show', $chat);
    }
 
    public function show(Chat $chat): View
    {
        // Ensure user has access to this chat
        if (
            (! auth()->user()->isClient() && $chat->developer_id !== auth()->id()) ||
            (! auth()->user()->isDeveloper() && $chat->job->client_id !== auth()->id())
        ) {
            abort(403);
        }
 
        $chat->load('job', 'developer', 'job.client');
 
        return view('chats.show', compact('chat'));
    }
}

The chat interface uses three Livewire...