Створення динамічних функцій у реальному часі за допомогою Laravel Broadcasting

Система трансляції Laravel дозволяє розробникам створювати чутливі до змін, реальні часом застосунки, які надають миттєві оновлення користувачам. Від живих інформаційних панелей до спільних робочих просторів — трансляція перетворює статичні програми на динамічні, інтерактивні досвіди

# Реалізація Подій Трансляції

Створіть події для трансляції, реалізуючи інтерфейс ShouldBroadcast:

<?php

namespace App\Events;

use App\Models\Project;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;

class ProjectStatusUpdated implements ShouldBroadcast
{
    use SerializesModels;

    public function __construct(
        public Project $project
    ) {}

    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('projects.' . $this->project->id),
        ];
    }

    public function broadcastWith(): array
    {
        return [
            'project_id' => $this->project->id,
            'status' => $this->project->status,
            'updated_at' => $this->project->updated_at,
        ];
    }
}

Запустіть подію, щоб активувати трансляцію:

ProjectStatusUpdated::dispatch($project);

# Авторизація Каналу

Визначте правила доступу до каналу у routes/channels.php:

use App\Models\Project;
use App\Models\User;

Broadcast::channel('projects.{projectId}', function (User $user, int $projectId) {
    $project = Project::find($projectId);
    return $user->id === $project->owner_id || $user->projects->contains($projectId);
});

Розгляньте платформу для спільного управління проектами, де члени команди потребують миттєвих оновлень про прогрес завдань, завантаження файлів та командні комунікації. Функції в реальному часі підвищують продуктивність, усуваючи необхідність у ручному оновленні:

<?php

namespace App\Events;

use App\Models\Task;
use App\Models\Team;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class TaskAssigned implements ShouldBroadcast
{
    public function __construct(
        public Task $task,
        public Team $team
    ) {}

    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('users.' . $this->task->assigned_to),
            new PresenceChannel('teams.' . $this->team->id),
        ];
    }

    public function broadcastWith(): array
    {
        return [
            'task' => [
                'id' => $this->task->id,
                'title' => $this->task->title,
                'priority' => $this->task->priority,
                'due_date' => $this->task->due_date,
            ],
            'assignee' => $this->task->assignee->name,
            'project' => $this->task->project->name,
        ];
    }
}

class FileUploaded implements ShouldBroadcast
{
    public function __construct(
        public $file,
        public $project
    ) {}

    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('projects.' . $this->project->id),
        ];
    }

    public function broadcastAs(): string
    {
        return 'file.uploaded';
    }
}

class TeamMemberActive implements ShouldBroadcast
{
    public function __construct(
        public $user,
        public $team
    ) {}

    public function broadcastOn(): array
    {
        return [
            new PresenceChannel('team-workspace.' . $this->team->id),
        ];
    }
}

Авторизація каналу забезпечує безпечний доступ до чутливих даних проекту:

// routes/channels.php
use App\Models\User;

Broadcast::channel('users.{userId}', function (User $user, int $userId) {
    return $user->id === $userId;
});

Broadcast::channel('teams.{teamId}', function (User $user, int $teamId) {
    return $user->teams->contains($teamId) ? [
        'id' => $user->id,
        'name' => $user->name,
        'avatar' => $user->avatar_url,
        'role' => $user->teams()->find($teamId)->pivot->role,
    ] : false;
});

Broadcast::channel('team-workspace.{teamId}', function (User $user, int $teamId) {
    if ($user->teams->contains($teamId)) {
        return [
            'id' => $user->id,
            'name' => $user->name,
            'status' => $user->current_status,
            'last_seen' => now(),
        ];
    }
    return false;
});

# Інтеграція на Стороні Клієнта

Налаштуйте Laravel Echo для прослуховування подій у реальному часі:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

Echo.private(`users.${userId}`)
    .listen('TaskAssigned', (e) => {
        showNotification(`Нову задачу призначено: ${e.task.title}`);
        updateTaskList(e.task);
    });

Echo.join(`team-workspace.${teamId}`)
    .here((users) => {
        displayActiveTeamMembers(users);
    })
    .joining((user) => {
        addActiveUser(user);
        showAlert(`${user.name} приєднався до робочого простору`);
    })
    .leaving((user) => {
        removeActiveUser(user);
        showAlert(`${user.name} залишив робочий простір`);
    })
    .listen('TaskAssigned', (e) => {
        updateTeamActivity(e);
    });

Echo.private(`projects.${projectId}`)
    .listen('.file.uploaded', (e) => {
        refreshFileList();
        showNotification('Новий файл завантажено до проекту');
    });

Echo.private(`projects.${projectId}`)
    .whisper('typing', {
        user: currentUser.name,
        section: 'comments'
    })
    .listenForWhisper('typing', (e) => {
        showTypingIndicator(e.user, e.section);
    });

# Розширені Можливості Трансляції

Laravel підтримує миттєву трансляцію для критичних оновлень:

class UrgentSystemAlert implements ShouldBroadcastNow
{
    public function broadcastOn(): array
    {
        return [
            new Channel('system-alerts'),
        ];
    }
}

Трансляція перетворює веб-застосунки зі статичних сторінок на динамічні, колаборативні платформи. Реалізуючи функції в реальному часі, ви створюєте захопливі враження для користувачів, які підтримують синхронізацію команд та ефективність робочих процесів