Створення адаптивних компонентних мереж за допомогою системи подій #[On] у Laravel Livewire

Створення взаємопов’язаних компонентів, які безперешкодно спілкуються між собою, є ключовим для сучасних веб-додатків. Laravel Livewire пропонує розвинуту архітектуру на основі подій через атрибут #[On] та систему диспетчеризації, що дозволяє компонентам взаємодіяти без тісного зв’язку

Атрибут #[On] замінює традиційну властивість $listeners, забезпечуючи більш елегантний підхід до обробки подій. Компоненти можуть слухати конкретні події та реагувати на них, створюючи динамічні інтерфейси, які відповідають на зміни в додатку

use Livewire\Component;
use Livewire\Attributes\On;

class NotificationBell extends Component
{
    public $unreadCount = 0;

    #[On('notification-added')]
    public function incrementCount()
    {
        $this->unreadCount++;
    }

    public function render()
    {
        return view('livewire.notification-bell');
    }
}

Події активуються за допомогою методу dispatch з будь-якого компонента вашого додатку. Це створює патерн публікації-підписки, в якому компоненти залишаються незалежними, але координують свою поведінку

class MessageSender extends Component
{
    public function sendAlert($message)
    {
        Notification::create(['message' => $message, 'user_id' => auth()->id()]);

        $this->dispatch('notification-added', message: $message);
    }

    public function render()
    {
        return view('livewire.message-sender');
    }
}

Система підтримує кілька слухачів подій для кожного компонента та дозволяє використовувати динамічні назви подій на основі властивостей компонента. Також можна націлюватися на конкретні компоненти за допомогою методу dispatch()->to() для більш точної комунікації

#[On('user-{userId}-updated')]
public function refreshUserData($userData)
{
    $this->userData = $userData;
}

Уявіть проектний менеджмент дашборд, на якому різні компоненти повинні залишатися синхронізованими. Дошка завдань, трекер прогресу та сповіщення команди потребують оновлень, коли відбуваються зміни у ключових етапах проекту, але функціонують незалежно один від одного

class ProjectDashboard extends Component
{
    public $activeProjects = [];
    public $completedTasks = 0;
    public $teamAlerts = [];

    #[On('task-completed')]
    public function updateProgress($taskData)
    {
        $this->completedTasks++;
        $this->teamAlerts[] = "Завдання '{$taskData['title']}' виконано {$taskData['assignee']}";
    }

    #[On('project-milestone-reached')]
    public function addMilestoneAlert($projectId, $milestone)
    {
        $project = Project::find($projectId);
        $this->teamAlerts[] = "🎉 {$project->name} досягнуто: {$milestone}";

        $this->dispatch('send-team-email',
            subject: "Досягнення ключового етапу",
            project: $project->name,
            milestone: $milestone
        );
    }

    #[On('new-project-added')]
    public function refreshProjectList()
    {
        $this->activeProjects = Project::where('status', 'active')->get();
    }

    public function render()
    {
        return view('livewire.project-dashboard');
    }
}

Цей компонент дашборда демонструє, як можна обробляти кілька типів подій в одному компоненті. Коли завдання виконуються, ключові етапи досягаються чи додаються нові проекти, дашборд автоматично оновлює свій вигляд і може викликати додаткові дії, такі як надсилання сповіщень команді

Система подій безперешкодно інтегрується з Laravel Echo для реального мовлення, слухачами подій JavaScript та компонентами Alpine.js. Події можуть бути ініційовані як на серверній частині з допомогою PHP, так і на клієнтській частині за допомогою JavaScript або безпосередньо з шаблонів Blade за допомогою допоміжного $dispatch