# naiemofficial/laravel-realtime-chat architecture

> Architecture diagram of the GitHub repository naiemofficial/laravel-realtime-chat, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/naiemofficial/laravel-realtime-chat
- Repository: https://github.com/naiemofficial/laravel-realtime-chat

## Overview

1. **Application shape**
   - This is a Laravel monolith for a realtime chat app. The backend is PHP/Laravel; the frontend is server-rendered Blade plus Livewire components, with Vite-built JavaScript and CSS.

2. **Primary user-facing surfaces**
   - The main UI is the chat workspace (`resources/views/chat/index.blade.php`) and standard auth/profile pages.
   - Layout composition is split between guest/auth layouts and reusable Blade components, so the diagram should show a shared presentation layer rather than separate SPA frontends.

3. **Chat feature boundary**
   - The chat domain is concentrated in `app/Livewire/Chat/*`, `app/Http/Controllers/ChatController.php`, `ConversationController.php`, `MessageController.php`, `ParticipantController.php`, and the models `Conversation`, `Message`, `Participant`, and `Call`.
   - This is the core subsystem for listing conversations, opening message threads, sending messages, and managing participants.

4. **Realtime messaging flow**
   - Message actions originate in Livewire components such as `SendMessage`, `Messages`, `Conversations`, and related alert/not-available components.
   - Those components interact with the Laravel domain models and then broadcast updates so other connected clients receive new messages without a page reload.
   - The presence of `app/Events/ConversationConnection.php`, `BroadcastServiceProvider`, `routes/channels.php`, and `resources/js/echo.js` indicates a classic Laravel broadcasting pipeline.

5. **WebSocket/broadcasting boundary**
   - Realtime delivery is abstracted behind Laravel broadcasting, with the app configured to work with **Pusher or Reverb** per the README and `config/broadcasting.php`, `config/reverb.php`.
   - Private channel authorization is part of the architecture, so chat data is not pushed through public channels.

6. **Call subsystem**
   - Audio/video calling is a separate but related feature, implemented through `app/Livewire/Chat/Call.php`, `SendCall.php`, and `app/Models/Call.php`.
   - The frontend includes call-specific JavaScript (`resources/js/custom/call.js`, `resources/js/Socket.js`) and incoming/outgoing call audio assets in `public/audio/`.
   - The README’s WebRTC mention suggests call setup/signaling is handled in-browser, with Laravel used to coordinate session state and realtime events.

7. **Authentication and user management**
   - Auth is handled with standard Laravel auth controllers under `app/Http/Controllers/Auth/*`, plus request objects such as `LoginRequest`.
   - User profile editing, password change, email verification, registration, and session management are separate bounded areas from chat.
   - `app/Http/Middleware/UserAuth.php` and Sanctum config indicate additional auth protection for API/session access.

8. **Persistence layer**
   - Data is stored in MySQL via Eloquent models and migrations.
   - The schema centers on `users`, `conversations`, `participants`, `messages`, and `calls`, with additional Laravel tables for cache, jobs, and personal access tokens.
   - `database/seeders` and `factories` support bootstrapping and test data.

9. **Request handling and controller responsibilities**
   - Controllers are used for page-level and action-level endpoints, while Livewire handles the interactive parts of the chat UI.
   - This creates a split where traditional controllers serve initial pages and account/profile workflows, and Livewire handles in-page chat state transitions.

10. **Frontend composition and asset pipeline**
   - Styling uses Tailwind CSS plus custom CSS, and the build pipeline uses Vite.
   - JavaScript is organized into app bootstrap files and feature scripts under `resources/js/custom`, with Echo/socket wiring for realtime behavior.
   - Blade components are heavily used for buttons, form controls, modals, nav, alerts, and message templates.

11. **Message rendering and UX states**
   - There is a dedicated message rendering subsystem under `resources/views/message/*` with templates for default and text-only variants and states like success, warning, pending, error, and unknown.
   - This suggests the app presents structured message/status feedback separate from the core chat data flow.

12. **External services and operational dependencies**
   - Realtime messaging depends on a WebSocket provider (Pusher or Reverb).
   - Email verification and password reset imply mail service integration through Laravel’s mail stack.
   - Session, cache, queue, and logging configs are standard Laravel support services, but broadcasting and WebRTC are the key architecture drivers here.

Main entry points: [`app/Livewire/Chat`](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/app/Livewire/Chat) (Chat Livewire), [`routes/web.php`](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/routes/web.php) (Web Routes), [`resources/views/chat/index.blade.php`](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/chat/index.blade.php) (Chat Workspace), [`resources/views/layouts/app.blade.php`](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/layouts/app.blade.php) (App Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Presentation"]
  node_chat_index_view["Chat Workspace<br/>blade page<br/>[index.blade.php]"]
  node_layouts_app["App Layout<br/>blade layout<br/>[app.blade.php]"]
  node_layouts_guest["Guest Layout<br/>blade layout<br/>[guest.blade.php]"]
  node_blade_components["UI Components<br/>blade components"]
  node_message_views["Message Views<br/>blade templates"]
end

subgraph group_chat["Chat Domain"]
  node_chat_controller["Chat Controller<br/>[ChatController.php]"]
  node_conversation_controller["Conversation Ctrl<br/>controller"]
  node_message_controller["Message Ctrl<br/>controller"]
  node_participant_controller["Participant Ctrl<br/>controller"]
  node_chat_livewire["Chat Livewire<br/>interactive components"]
end

subgraph group_realtime["Realtime"]
  node_routes_channels["Channel Rules<br/>broadcast channels<br/>[channels.php]"]
  node_broadcast_event(("Conversation Event"))
  node_broadcast_provider["Broadcast Provider"]
  node_echo_client["Echo Client<br/>browser realtime<br/>[echo.js]"]
  node_socket_js["Socket JS<br/>browser realtime<br/>[Socket.js]"]
  node_call_js["Call JS<br/>browser webrtc<br/>[call.js]"]
end

subgraph group_auth["Auth & Profile"]
  node_routes_auth["Auth Routes<br/>[auth.php]"]
  node_auth_views["Auth Views<br/>blade pages"]
  node_profile_views["Profile Views<br/>blade pages"]
  node_auth_controllers["Auth Controllers"]
  node_profile_controller["Profile Ctrl<br/>controller"]
  node_user_auth{{"User Auth MW<br/>middleware<br/>[UserAuth.php]"}}
end

subgraph group_data["Persistence"]
  node_conversation_models[("Chat Models<br/>Eloquent models")]
  node_migrations[("Schema Migrations<br/>database schema")]
  node_seeders_factories["Seeders & Factories<br/>test data"]
end

node_routes_web["Web Routes<br/>[web.php]"]

node_routes_web -->|"serves"| node_chat_index_view
node_routes_web -->|"dispatches"| node_chat_controller
node_routes_web -->|"dispatches"| node_conversation_controller
node_routes_web -->|"dispatches"| node_message_controller
node_routes_web -->|"dispatches"| node_participant_controller
node_routes_web -->|"dispatches"| node_profile_controller
node_routes_auth -->|"maps to"| node_auth_controllers
node_routes_channels -->|"authorizes"| node_broadcast_provider
node_chat_index_view -->|"uses"| node_layouts_app
node_auth_views -->|"uses"| node_layouts_guest
node_profile_views -->|"uses"| node_layouts_app
node_layouts_app -->|"composes"| node_blade_components
node_layouts_guest -->|"composes"| node_blade_components
node_chat_index_view -->|"mounts"| node_chat_livewire
node_chat_livewire -->|"reads/writes"| node_conversation_models
node_chat_livewire -->|"broadcasts"| node_broadcast_event
node_broadcast_event -->|"uses"| node_broadcast_provider
node_broadcast_provider -->|"consumed by"| node_echo_client
node_echo_client -->|"wires"| node_socket_js
node_socket_js -->|"syncs"| node_chat_livewire
node_call_js -->|"supports"| node_chat_livewire
node_chat_livewire -->|"coordinates"| node_call_js
node_chat_livewire -->|"renders"| node_message_views
node_auth_controllers -->|"protected by"| node_user_auth
node_profile_controller -->|"protected by"| node_user_auth
node_conversation_models -->|"persisted by"| node_migrations
node_seeders_factories -->|"populate"| node_conversation_models

click node_routes_web "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/routes/web.php"
click node_routes_auth "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/routes/auth.php"
click node_routes_channels "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/routes/channels.php"
click node_chat_index_view "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/chat/index.blade.php"
click node_layouts_app "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/layouts/app.blade.php"
click node_layouts_guest "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/layouts/guest.blade.php"
click node_blade_components "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/components"
click node_message_views "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/message"
click node_auth_views "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/auth"
click node_profile_views "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/profile"
click node_chat_controller "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ChatController.php"
click node_conversation_controller "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ConversationController.php"
click node_message_controller "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/MessageController.php"
click node_participant_controller "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ParticipantController.php"
click node_chat_livewire "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/app/Livewire/Chat"
click node_conversation_models "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/app/Models"
click node_broadcast_event "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Events/ConversationConnection.php"
click node_broadcast_provider "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Providers/BroadcastServiceProvider.php"
click node_echo_client "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/js/echo.js"
click node_socket_js "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/js/Socket.js"
click node_call_js "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/js/custom/call.js"
click node_auth_controllers "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/app/Http/Controllers/Auth"
click node_profile_controller "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ProfileController.php"
click node_user_auth "https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Middleware/UserAuth.php"
click node_migrations "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/database/migrations"
click node_seeders_factories "https://github.com/naiemofficial/laravel-realtime-chat/tree/main/database/seeders"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_chat_index_view,node_layouts_app,node_layouts_guest,node_blade_components,node_message_views toneBlue
class node_chat_controller,node_conversation_controller,node_message_controller,node_participant_controller,node_chat_livewire toneAmber
class node_routes_channels,node_broadcast_event,node_broadcast_provider,node_echo_client,node_socket_js,node_call_js toneMint
class node_routes_auth,node_auth_views,node_profile_views,node_auth_controllers,node_profile_controller,node_user_auth toneRose
class node_conversation_models,node_migrations,node_seeders_factories toneIndigo
class node_routes_web toneNeutral
```

## Components

### Presentation

Blade layouts, components, and page views that compose the UI

- [Chat Workspace](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/chat/index.blade.php): blade page · Primary chat workspace page · `resources/views/chat/index.blade.php`
- [App Layout](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/layouts/app.blade.php): blade layout · Authenticated application shell · `resources/views/layouts/app.blade.php`
- [Guest Layout](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/views/layouts/guest.blade.php): blade layout · Unauthenticated page shell · `resources/views/layouts/guest.blade.php`
- [UI Components](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/components): blade components · Reusable buttons, nav, modal, inputs, and shared UI fragments · `resources/views/components`
- [Message Views](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/message): blade templates · Message rendering and status templates · `resources/views/message`

### Chat Domain

Core conversation, messaging, participant, and call feature boundary

- [Chat Controller](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ChatController.php): controller · Entry controller for the chat workspace · `app/Http/Controllers/ChatController.php`
- [Conversation Ctrl](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ConversationController.php): controller · Conversation listing and thread-level actions · `app/Http/Controllers/ConversationController.php`
- [Message Ctrl](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/MessageController.php): controller · Message submission and message endpoints · `app/Http/Controllers/MessageController.php`
- [Participant Ctrl](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ParticipantController.php): controller · Conversation membership and participant management · `app/Http/Controllers/ParticipantController.php`
- [Chat Livewire](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/app/Livewire/Chat): interactive components · Conversation list, message thread, alerts, and call orchestration · `app/Livewire/Chat`

### Realtime

Broadcasting, Echo, and browser-side socket wiring

- [Channel Rules](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/routes/channels.php): broadcast channels · Private channel authorization for realtime chat · `routes/channels.php`
- [Conversation Event](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Events/ConversationConnection.php): event · Broadcastable conversation update event · `app/Events/ConversationConnection.php`
- [Broadcast Provider](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Providers/BroadcastServiceProvider.php): provider · Bootstraps Laravel broadcasting · `app/Providers/BroadcastServiceProvider.php`
- [Echo Client](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/js/echo.js): browser realtime · Frontend Echo setup for listening to broadcasts · `resources/js/echo.js`
- [Socket JS](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/js/Socket.js): browser realtime · Socket integration and realtime client glue · `resources/js/Socket.js`
- [Call JS](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/resources/js/custom/call.js): browser webrtc · Browser-side call handling and media/session behavior · `resources/js/custom/call.js`

### Auth & Profile

Login, registration, password, verification, and profile management

- [Auth Routes](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/routes/auth.php): routes · Authentication route definitions · `routes/auth.php`
- [Auth Views](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/auth): blade pages · Login, register, password reset, and verification screens · `resources/views/auth`
- [Profile Views](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/resources/views/profile): blade pages · Profile edit and account management screens · `resources/views/profile`
- [Auth Controllers](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/app/Http/Controllers/Auth): controllers · Login, registration, verification, and password workflows · `app/Http/Controllers/Auth`
- [Profile Ctrl](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Controllers/ProfileController.php): controller · Profile edit and account update actions · `app/Http/Controllers/ProfileController.php`
- [User Auth MW](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/app/Http/Middleware/UserAuth.php): middleware · Custom user/session protection middleware · `app/Http/Middleware/UserAuth.php`

### Persistence

Eloquent models, migrations, seeders, and factories

- [Chat Models](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/app/Models): Eloquent models · Conversation, message, participant, and call records · `app/Models`
- [Schema Migrations](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/database/migrations): database schema · Users, conversations, participants, messages, calls, and support tables · `database/migrations`
- [Seeders & Factories](https://github.com/naiemofficial/laravel-realtime-chat/tree/main/database/seeders): test data · Bootstrap and sample data for local development · `database/seeders`

### Other components

- [Web Routes](https://github.com/naiemofficial/laravel-realtime-chat/blob/main/routes/web.php): routes · Main HTTP routes that dispatch pages and chat actions · `routes/web.php`

## Connections

- Web Routes → Chat Workspace: serves · Loads the main chat workspace
- Web Routes → Chat Controller: dispatches · Routes page-level chat requests
- Web Routes → Conversation Ctrl: dispatches · Conversation endpoints
- Web Routes → Message Ctrl: dispatches · Message endpoints
- Web Routes → Participant Ctrl: dispatches · Participant management endpoints
- Web Routes → Profile Ctrl: dispatches · Profile and account actions
- Auth Routes → Auth Controllers: maps to · Authentication workflow routes
- Channel Rules → Broadcast Provider: authorizes · Defines private channel access rules
- Chat Workspace → App Layout: uses · Rendered inside the authenticated shell
- Auth Views → Guest Layout: uses · Rendered inside the guest shell
- Profile Views → App Layout: uses · Rendered inside the authenticated shell
- App Layout → UI Components: composes · Shared app chrome and controls
- Guest Layout → UI Components: composes · Shared guest UI pieces
- Chat Workspace → Chat Livewire: mounts · Chat workspace is driven by Livewire components
- Chat Livewire → Chat Models: reads/writes · Loads threads, stores messages, and updates membership
- Chat Livewire → Conversation Event: broadcasts · Emits realtime conversation updates
- Conversation Event → Broadcast Provider: uses · Delivered through Laravel broadcasting
- Broadcast Provider → Echo Client: consumed by · Browser listens to private channels
- Echo Client → Socket JS: wires · Client socket/bootstrap integration
- Socket JS → Chat Livewire: syncs · Keeps chat UI updated in realtime
- Call JS → Chat Livewire: supports · Browser call UI used by Livewire call components
- Chat Livewire → Call JS: coordinates · Call components trigger browser-side call behavior
- Chat Livewire → Message Views: renders · Uses message/status templates for feedback states
- Auth Controllers → User Auth MW: protected by · Session and access protection
- Profile Ctrl → User Auth MW: protected by · Authenticated profile access
- Chat Models → Schema Migrations: persisted by · Underlying database schema
- Seeders & Factories → Chat Models: populate · Bootstraps sample users and chat data