Как интегрировать уведомления в реальном времени с Laravel и Pusher

В сегодняшнем динамичном цифровом мире, благодаря возможности получать обновления в реальном времени, значительно совершенствуется пользовательское взаимодействие. Везде  —  от соцсетей до приложений служб поддержки клиентов  —  для вовлечения и информирования пользователей применяются мгновенные уведомления.

Добавление этого динамичного функционала в приложения упрощается надежным PHP-фреймворком Laravel в сочетании со службой уведомлений реального времени Pusher. Расскажем, как в приложении Laravel настроить такие уведомления.

Что потребуется

• Базовое представление о Laravel.
• Установленный в компьютере Composer.
• Учетная запись Pusher, для целей разработки настраивается бесплатно.

Настройка проекта в Laravel

Сначала в терминале создаем проект Laravel:

composer create-project --prefer-dist laravel/laravel laravelRealTime
cd laravelRealTime

Установка необходимых пакетов

Чтобы включить средства поддержки работы в реальном времени, в каталоге проекта устанавливаем SDK-пакет Pusher от PHP:

composer require pusher/pusher-php-server

Настройка Pusher в приложении

1. Получаем учетные данные Pusher, войдя в учетную запись Pusher и создав приложение, обращаем внимание на app_id, key, secret и cluster.
2. Настраиваем Laravel, в файле .env добавляем строки с учетными данными Pusher:

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_key
PUSHER_APP_SECRET=your_secret
PUSHER_APP_CLUSTER=your_cluster

Затем, чтобы корректно настроить драйвер Pusher, конфигурируем параметры трансляции, внося изменения в config/broadcasting.php.

Создание уведомлений реального времени

Генерируем в Laravel event, которым активируется уведомление:

php artisan make:event OrderStatusUpdated

Чтобы транслировать по каналу с помощью драйвера Pusher, определяем событие event:

// App/Events/OrderStatusUpdated.php

public function broadcastOn()
{
    return new Channel('orders');
}

Чтобы прослушивать эти события в приложении на стороне клиента с помощью Laravel Echo и Pusher JS, добавляем в resources/views/welcome.blade.php эти скрипты:

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo/dist/echo.js"></script>

<script>
Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your_key',
    cluster: 'your_cluster',
    encrypted: true
});

Echo.channel('orders')
    .listen('OrderStatusUpdated', (e) => {
        console.log('Order status updated: ', e);
    });
</script>

Тестирование системы уведомлений реального времени

Чтобы запустить событие вручную и протестировать обновления в реальном времени, создаем маршрут и контроллер:

// routes/web.php
Route::get('/test-event', function () {
    event(new App\Events\OrderStatusUpdated('Your order has been shipped!'));
    return "Event has been sent!";
});

Посмотрите уведомление, полученное в реальном времени на консоли.

Расширенный функционал и настройка

Чтобы повысить функциональность и безопасность приложения, изучите расширенный функционал: приватные каналы, каналы присутствия или настройку данных, отправляемых вместе с событиями.

Заключение

Теперь у вас в приложении Laravel имеется функциональная настройка уведомлений в режиме реального времени с Pusher. При такой интеграции повышается не только реактивность веб-приложений, но и вовлеченность пользователей.

Заключение

С этими пошаговыми инструкциями вы интегрируете в приложение Laravel уведомления реального времени, добавите мгновенные обновления и интерактивный функционал, значительно усовершенствуете пользовательское взаимодействие.

Читайте также:

• Полное руководство по кэшированию Laravel
• REST API CRUD в Laravel 11 с лучшими практиками
• Продвинутые техники PHP. Часть 2

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Abhishek Badar: How to Integrate Real-time Notifications Using Laravel and Pusher