Laravel и Pusher интеграция

В этой записи блога рассматривается, как использовать Laravel Broadcasting с Pusher Channels для создания динамических веб-приложений в реальном времени.

Что такое Laravel Broadcasting?

Laravel Broadcasting позволяет вам транслировать ваши серверные события Laravel в ваше клиентское веб-приложение. Он использует WebSockets для установления соединения между вашим сервером и клиентом, обеспечивая передачу данных в реальном времени без необходимости опроса.

Pusher Channels: краткий обзор

Pusher Channels — это служба обмена сообщениями в реальном времени, которая позволяет добавлять функции реального времени в ваши веб- и мобильные приложения. Она управляет и масштабирует соединения WebSocket, обеспечивая надежную и безопасную связь между клиентом и сервером.

Настройка Laravel с Pusher Channels

Для начала вам необходимо настроить Pusher Channels в вашем проекте Laravel.

Установите Pusher PHP Server SDK:

composer require pusher/pusher-php-server

Настройте файл .env:

Добавьте ваши учетные данные Pusher в файл .env:

PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=your-app-cluster

Настройте broadcasting.php:

В config/broadcasting.php установите Pusher в качестве вещателя по умолчанию:

'default' => env('BROADCAST_DRIVER', 'pusher'),

Создание Broadcasting Events

В Laravel каждое событие трансляции представлено классом. Давайте создадим простое событие.

Создать событие:

php artisan make:event OrderStatusUpdated

Реализовать ShouldBroadcast:

Обновите класс событий, чтобы реализовать ShouldBroadcast и определить данные для трансляции:

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class OrderStatusUpdated implements ShouldBroadcast
{
 public $orderId;
 public $status;

 public function __construct($orderId, $status)
 {
 $this->orderId = $orderId;
 $this->status = $status;
 }

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

Интеграция с интерфейсом

На клиенте вам необходимо прослушивать событие:

Установите библиотеку Pusher JS:

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>

Подпишитесь на канал:

var pusher = new Pusher('your-app-key', {
 cluster: 'your-app-cluster'
});

var channel = pusher.subscribe('orders');
channel.bind('OrderStatusUpdated', function(data) {
 alert('Order ' + data.orderId + ' status updated to ' + data.status);
});

Трансляция события

Чтобы транслировать событие, просто отправьте его из своего приложения Laravel:

event(new OrderStatusUpdated($orderId, 'shipped'));

Заключение

Интеграция Laravel Broadcasting с Pusher Channels — это мощный способ улучшить ваши веб-приложения с помощью функций реального времени. Будь то обновление статусов заказов, сообщения чата или уведомления в реальном времени, сочетание Laravel и Pusher обеспечивает бесшовное и масштабируемое решение.