Приложение реального времени на Vue.js

Инструмент командной строки vue-cli предназначен для работы с проектами Vue.js, благодаря ему мы, не тратя время на настройки, можем быстро создать проект и приступить к работе.

Установим vue-cli следующей командой:

Создадим проект, основанный на шаблоне webpack, и установим зависимости с помощью следующего набора команд:

Обратите внимание на то, что webpack — штука весьма полезная. Так, он помогает преобразовывать код в стандарте ES6 к коду в стандарте ES5 и обрабатывать файлы компонентов Vue, что позволяет не беспокоиться о совместимости приложений, созданных с его помощью, с разными браузерами.

Для того, чтобы запустить приложение, воспользуемся следующей командой:

B: начало создания приложения Movie Review

Далее, начнём создавать компоненты приложения, подготовив пару файлов:

Тут стоит учитывать, что мощь Vue.js заключается в компонентах. Это роднит его с современными JS-фреймворками. Компоненты — это то, что помогает повторно использовать различные части приложения.

Для написания отзывов о фильмах создадим простую форму, которую будем использовать для загрузки информации о фильмах с использованием общедоступного API Netflix Roulette:

В этом коде мы создаём форму и задаём собственный обработчик события отправки формы fetchMovie() .

Директива @submit — это сокращение для v-on:submit . Она используется для прослушивания событий DOM и выполнения действий или обработчиков при возникновении этих событий. Модификатор .prevent помогает создать event.preventDefault() в обработчике.

Для привязки значения текстового поля ввода к title мы используем директиву v-model . И, наконец, мы можем привязать атрибут кнопки disabled так, что он будет установлен в true , если title пусто, и наоборот. Кроме того, обратите внимание на то, что :disabled — это сокращение для v-bind:disabled .

Теперь определим методы и значения данных для компонента:

Как только мы задали внешний URL, к которому хотим обратиться для загрузки данных о фильме, нам нужно задать важнейшие параметры Vue, которые могут потребоваться для настройки компонентов:

• data : задаёт свойства, которые могут понадобится в компоненте.
• methods : задаёт методы компонента. Сейчас задан лишь один метод, служащий для загрузки данных о фильмах — fetchMovie() .

Отредактируем компонент R eview , который содержит логику и средства для вывода отзывов, с использованием того же самого подхода, когда каждый компонент описывают в его собственном файле.

Используем директиву v-for для того, чтобы перебирать доступные обзоры для фильма. Затем выведем их в шаблоне:

MOCK_REVIEWS используется для создания макета обзоров. Свойство, сформированное программно, применяется для фильтрации обзоров конкретного фильма.

Теперь напишем код формы и методов для добавления нового обзора:

Опять же, можно, в нижней части кода компонента, добавить стилизацию, но это необязательно:

Используем идентификатор movie из компонента Movie для того, чтобы загружать и отправлять обзоры.

Для того, чтобы наладить обмен данными между компонентами, можно создать новый экземпляр Vue и использовать его как шину для передачи сообщений. Шина передачи сообщения — это объект, в который компоненты могут отправлять события, и с помощью которого могут на события подписываться. Создадим шину передачи сообщений:

Для отправки события при обнаружении фильма отредактируем метод fetchMovies() :

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

В этом коде мы указали, что когда происходит событие new_movie , надо установить свойство movie в значение movieId , которое и передаётся всем заинтересованным получателям с помощью соответствующего события.

Итак, для завершения работы над базовым приложением, зарегистрируем компоненты в App.vue и выведем шаблон:

Теперь запустим приложение и проверим его функционал по загрузке информации о фильмах и добавлению обзоров:

Обратите внимание на то, что для успешной загрузки информации о фильмах с использованием API Netflix требуется полное название фильма.

C: добавление обновлений в реальном времени с использованием Pusher

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

Настроим простой бэкенд, где можно обрабатывать post-запросы с новыми обзорами и, используя pusher , будем оформлять эти данные как события.

Зарегистрируйте бесплатную учётную запись на сайте Pusher. Создайте приложение с помощью панели управления и скопируйте его учётные данные.

Создадим простой сервер с помощью Node.js. Добавим зависимости, которые нам понадобятся, в package.json , и установим необходимые пакеты:

Создадим файл server.js , в котором напишем приложение Express:

Инициализируем приложение Express, затем инициализируем Pusher, воспользовавшись полученными ранее учётными данными. Замените YOUR_PUSHER_APP_ID , YOUR_PUSHER_APP_KEY , YOUR_PUSHER_SECRET и YOUR_CLUSTER данными с панели управления Pusher.

Зададим маршрут для создания отзывов: /review . В данной конечной точке используем Pusher для вызова события review_added в канале reviews . Затем передадим все необходимые данные в виде обзора. Вот как выглядит работа с методом trigger :

Создадим прокси в config/index.js , для того, чтобы обращаться к нашему серверному API из фронтенд-сервера, созданного Vue Webpack. Затем мы можем запустить сервер разработки и бэкенд API одновременно.

Отредактируем метод addReview для обращения к API в /src/components/Reviews.vue :

Когда публикуется новый обзор, будем прослушивать события, отправляемые Pusher, и расширять их с использованием более подробных сведений. Установим библиотеку pusher-js:

Как уже было сказано, мы импортируем объект Pusher из библиотеки pusher-js . Теперь создадим метод subscribe , который выполняет следующие действия:

• Подписка на канал reviews с помощью команды pusher.subscribe('reviews') .
• Прослушивание события review_added с помощью pusher.bind . Тут, в качестве второго аргумента, используется функция обратного вызова. При получении широковещательного сообщения функция обратного вызова вызывается с переданными данными в качестве параметра.

D. Сборка готового проекта

Добавим файл server.js с Node-сервером в dev-зависимости приложения, или выполним скрипт для того, чтобы сервер API запустился вместе с сервером, предоставленным шаблоном webpack :

Теперь можно запустить всё, из чего состоит приложение:

Итоги

Vue.js — это надёжный и простой фреймворк, который даёт отличную базу для разработки качественных приложений реального времени. Из этого материала вы узнали о том, как создавать такие приложения с привлечением возможностей сервиса Pusher.

Уважаемые читатели! Какими технологиями вы пользуетесь для создания веб-приложений, предназначенных для работы с данными в реальном времени?