Приложения реального-времени (real-time) на Laravel 5.1, используя широковещательные события (перевод)

Оригинал: http://www.sitepoint.com/real-time-apps-laravel-5-1-event-broadcasting/

Версия Laravel 5.1 включает в себя функционал, называемый вещанием событий, который с легкостью позволяет создавать приложения реального времени (real-time) на PHP. Этот функционал позволяет приложению посылать события на различные «облачные» PubSub-сервисы, наподобие Pusher‘а, или в Redis.

В этой статье мы разберем простое TODO-приложение и превратим его в real-time приложение, используя вещание событий в Laravel.

Скачайте и установите приложение

Самый простой способ начать, это развернуть Homestead. Если же вы не хотите использовать Homestead, у вас в системе должны быть установлены git и composer.

Мы положим начальный код в директорию todo-app  путем клонирования репозитория из git’а.

Как только клонирование завершится, перейдите в директорию todo-app . Нам необходимо установить все зависимости приложения, выполнив следующую команду (в зависимости от того, как в вашей системе установлен Composer, команда может быть немного другой):

После установки зависимостей необходимо проинициализировать базу данных.

Тестируем приложение (пока еще не real-time)

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

Поиграйтесь с todo-списком в первом окне. Затем сделайте что-нибудь во втором окне. Вы заметите, что содержимое в другом окне (не в том, в котором вы в данные мамомент манипулируете списком) не обновляется самостоятельно, а только при ручном обновлении страницы. Это потому, что в приложении еще нет real-time функционала. Давайте добавим его.

Добавление real-time возможностей в приложение

Добавление real-time возможностей позволит обоим окнам обновлять содержимое без необходимости нажимать кнопку «Обновить».

В данном примере мы определим три класса-события, которые будут срабатывать в разные моменты времени в нашем приложении. Первое событие — это ItemCreated , которое будет срабатывать каждый раз, когда будет создан новый элемент. Второе событие — ItemUpdated , которое будет срабатывать при изменении элемента (завершен или не завершен). И, наконец, последнее — ItemDeleted , которое будет срабатывает при удалении элемента из todo-списка.

Широковещательные события

Для работы с широковещательными событиями, мы создадим обычное событие Laravel, но при этом будем реализовывать интерфейс ShouldBroadcast . Когда Laravel видит, что событие реализует этот интерфейс, он понимает, что это — широковещательное событие. Этот интерфейс требует от нас реализации метода broadcastOn . Он должен возвращать массив строк-названий каналов, на которые следует вещать данное событие.

Чтобы создать нужные нам классы-события, нужно выполнить несколько команд artisan’а:

Откройте файл app/Events/ItemCreated.php  и замените его содержимое следующим кодом:

Система событий Laravel впоследствии сериализует этот объект и будет вещать его в облачный сервис на канал itemAction . Оставшаяся пара событий похожа на первое.

Откройте файл app/Events/ItemUpdated.php  и замените его содержимое следующим кодом:

Откройте файл app/Events/ItemDeleted.php и замените его содержимое следующим кодом:

События базы данных

Существует несколько мест, в которых мы могли бы «выбрасывать» наши события. Мы могли бы делать это внутри контроллера, или же внутри событий базы данных. В этом примере мы воспользуемся событиями базы данных, поскольку лично мне это кажется более естественным и не захламляет контроллер лишним кодом. Также, выбрасывание событий из слоя базы данных делает возможным возбуждение этих событий из, например, скрипта для командной строки, или же по cron-скрипту.

Библиотека для работы с БД Eloquent вызывает события каждый раз, когда модель создается, сохранятся после обновления, или удаляется. Мы будем прослушивать эти события, чтобы возбуждать свои собственные широковещательные события. Это можно сделать внутри сервис-провайдера.

Откройте файл app/Providers/AppServiceProvider.php и замените его содержимое следующим кодом:

Pusher

В данном примере мы воспользуется облачным сервисом Pusher. Поддержка этого сервиса встроена в Laravel и его легче всего настроить.

Регистрация

Мы должны зарегистрировать учетную запись, чтобы получить набор идентификационных данных. После регистрации на сайте Pusher’а, перейдите в раздел администрирования и создайте новое приложение todo-app . Обратите внимание на app_id , key  и secret . Они понадобятся нам позже.

Серверная библиотека для работы с Pusher’ом

Чтобы наше приложение смогло начать использовать Pusher, необходимо добавить соответствующую библиотеку. Это делается при помощи composer’а:

JavaScript

Мы также добавим немного JavaScript-кода на нашу странице. Откройте resources/views/index.blade.php  (шаблон домашней страницы), и разместите следующий код прямо перед закрывающим тэгом body :

Код, приведенный выше, загружает клиентскую JavaScript библиотеку для работы с Pusher’ом, создает экземпляр Pusher, передавая наш ключ (key) в конструктор, а также загружает специфичную логику нашего приложения.

В начальной версии приложения элементы списка добавлялись и удалялись на основе событий, происходящих на странице (отправка формы, щелчок по иконке удаления, и т.д.). Поэтому мы открыли два окна, и оба не обновлялись автоматически. Одно окно не может видеть, что происходит в другом. Чтобы сделать приложение «живым» (real-time), мы будем добавлять и удалять элементы на основе событий из Pusher’а. Но сначала откройте фалй public/js/app.js  и закомментируйте все вызовы методов addItem()  и removeItem() . Но будьте внимательны — не удалите сами определения этих функций.

Создайте файл public/js/pusher.js и вставьте в него следующий код:

Приложение подписывается на канал itemAction . По умолчанию, Laravel использует полное имя класса-события в качестве имени события для Pusher’а. JavaScript код, приведенный выше, прослушивает три события:  App\Events\ItemCreated ,  App\Events\ItemUpdated  и  App\Events\ItemDeleted . Имеются также обратные вызовы функций, которые обрабатывают эти события. Таким образом, теперь элементы добавляются или удаляются на основе событий от Pusher’а.

Тестируем наше приложение

Чтобы протестировать приложение, вам нужно будет установить ключи для Pusher’а. По умолчанию, Laravel ищет их среди переменных окружения. Откройте файл .env  и разместите внизу следующие строки:

Таким образом вы установите переменные. Здесь YOUR_PUSHER_KEY , YOUR_PUSHER_SECRET  и  YOUR_PUSHER_APP_ID  — это, соответственно, ваши key , secret  и app_id , полученные при регистрации приложения в Pusher’е.

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

Напоследок

Хоть об этом и не было сказано в этой статье, используемый фреймоврком механизм является расширяемым, и если Laravel не поддерживает конкретно ваше real-time решение, возможно уже существует готовый пакет с подходящим широковещательным драйвером для него. Или же вы можете написать свой собственный драйвер.

С новым механизмом вещания событий в Laravel 5.1 PHP-разработчикам стало проще разрабатывать real-time приложения. Этот механизм открывает многие возможности, ранее доступные лишь приложениям, написанным для других платформ вроде Node.js.

Поделиться в соц. сетях

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.