[Перевод] Приложение реального времени на Vue.js
По мнению Дэвиса Керби, вице-президента Algoworks Solutions, автора этой статьи, фреймворк Vue.js набирает популярность в среде JavaScript-разработчиков благодаря своей простоте и той лёгкости, с которой можно начать работу с ним. Буквально несколько строк кода на Vue позволяют делать очень серьёзные вещи. Vue — это один из самых известных фреймворков, он находится в числе ведущих платформ для веб-разработки.
Современный пользователь Сети не любит ждать. Как быть, если на Vue нужно создать приложение для работы с некими данными в реальном времени? Дэвис отвечает на этот вопрос с помощью интеграции в приложение Vue.js 2.0. возможностей сервиса Pusher. В этом материале он, с самого начала, разберёт разработку такого приложения, названного Movie Review.
A: установка vue-cli
Инструмент командной строки vue-cli предназначен для работы с проектами Vue.js, благодаря ему мы, не тратя время на настройки, можем быстро создать проект и приступить к работе.
Установим vue-cli следующей командой:
npm install -g vue-cli
Создадим проект, основанный на шаблоне webpack, и установим зависимости с помощью следующего набора команд:
vue init webpack samplevue
cd samplevue
npm install
Обратите внимание на то, что webpack — штука весьма полезная. Так, он помогает преобразовывать код в стандарте ES6 к коду в стандарте ES5 и обрабатывать файлы компонентов Vue, что позволяет не беспокоиться о совместимости приложений, созданных с его помощью, с разными браузерами.
Для того, чтобы запустить приложение, воспользуемся следующей командой:
npm run devB: начало создания приложения Movie Review
Далее, начнём создавать компоненты приложения, подготовив пару файлов:
touch ./src/components/Movie.vue
touch ./src/components/Reviews.vue
Тут стоит учитывать, что мощь Vue.js заключается в компонентах. Это роднит его с современными JS-фреймворками. Компоненты — это то, что помогает повторно использовать различные части приложения.
▍B1: поиск и загрузка информации о фильмах
Для написания отзывов о фильмах создадим простую форму, которую будем использовать для загрузки информации о фильмах с использованием общедоступного 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().
После этого нам нужно добавить в
код для вывода сведений о фильме или показа сообщения о том, что название фильма не найдено:{{ movie.summary }}
▍{{ error_message }}
{{ movie.show_title }}
Кроме того, можно стилизовать компонент, добавив соответствующий код в нижней части файла, хотя это и необязательно:
▍B2: загрузка и написание обзоров фильмов
Отредактируем компонент Review, который содержит логику и средства для вывода отзывов, с использованием того же самого подхода, когда каждый компонент описывают в его собственном файле.Используем директиву v-for для того, чтобы перебирать доступные обзоры для фильма. Затем выведем их в шаблоне:
reviews
{{ review.content }}
{{ review.reviewer }}
{{ review.time }}
MOCK_REVIEWS используется для создания макета обзоров. Свойство, сформированное программно, применяется для фильтрации обзоров конкретного фильма.Теперь напишем код формы и методов для добавления нового обзора:
add new review.
Опять же, можно, в нижней части кода компонента, добавить стилизацию, но это необязательно:
Используем идентификатор movie из компонента Movie для того, чтобы загружать и отправлять обзоры.▍B3: обмен данными между компонентами
Для того, чтобы наладить обмен данными между компонентами, можно создать новый экземпляр Vue и использовать его как шину для передачи сообщений. Шина передачи сообщения — это объект, в который компоненты могут отправлять события, и с помощью которого могут на события подписываться. Создадим шину передачи сообщений:touch ./src/bus.js
// ./src/bus.js
import Vue from 'vue'
const bus = new Vue()
export default bus
Для отправки события при обнаружении фильма отредактируем метод fetchMovies():
import bus from '../bus'
export default {
// ...
methods: {
fetchMovie (title) {
this.loading = true
fetch(buildUrl(title))
.then(response => response.json())
.then(data => {
this.loading = false
this.error_message = ''
bus.$emit('new_movie', data.unit) // emit `new_movie` event
if (data.errorcode) {
this.error_message = `Sorry, movie with title '${title}' not found. Try searching for "Fairy tail" or "The boondocks" instead.`
return
}
this.movie = data
}).catch(e => { console.log(e) })
}
}
}
В хуке created будем прослушивать события в компоненте Review:
В этом коде мы указали, что когда происходит событие new_movie, надо установить свойство movie в значение movieId, которое и передаётся всем заинтересованным получателям с помощью соответствующего события.Итак, для завершения работы над базовым приложением, зарегистрируем компоненты в App.vue и выведем шаблон:
samplevue.
realtime movie reviews with Vue.js and Pusher.
Теперь запустим приложение и проверим его функционал по загрузке информации о фильмах и добавлению обзоров:npm run dev
Обратите внимание на то, что для успешной загрузки информации о фильмах с использованием API Netflix требуется полное название фильма.C: добавление обновлений в реальном времени с использованием Pusher
Теперь разберёмся с тем, как добавить нашему приложению функциональность реального времени. Это позволит показывать всем пользователям, просматривающим сведения о некоем фильме, новые обзоры по мере их появления.Настроим простой бэкенд, где можно обрабатывать post-запросы с новыми обзорами и, используя pusher, будем оформлять эти данные как события.
▍C1: настройка Pusher
Зарегистрируйте бесплатную учётную запись на сайте Pusher. Создайте приложение с помощью панели управления и скопируйте его учётные данные.▍C2: настройка бэкенда и широковещательная передача событий
Создадим простой сервер с помощью Node.js. Добавим зависимости, которые нам понадобятся, в package.json, и установим необходимые пакеты: npm install -S express body-parser pusher
Создадим файл server.js, в котором напишем приложение Express: // ./server.js
/*
* Инициализация Express
*/
const express = require('express');
const path = require('path');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname)));
/*
* Инициализация Pusher
*/
const Pusher = require('pusher');
const pusher = new Pusher({
appId:'YOUR_PUSHER_APP_ID',
key:'YOUR_PUSHER_APP_KEY',
secret:'YOUR_PUSHER_SECRET',
cluster:'YOUR_CLUSTER'
});
/*
* Определения маршрута post для создания новых обзоров
*/
app.post('/review', (req, res) => {
pusher.trigger('reviews', 'review_added', {review: req.body});
res.status(200).send();
});
/*
* Запуск приложения
*/
const port = 5000;
app.listen(port, () => { console.log(`App listening on port ${port}!`)});
Инициализируем приложение Express, затем инициализируем Pusher, воспользовавшись полученными ранее учётными данными. Замените YOUR_PUSHER_APP_ID, YOUR_PUSHER_APP_KEY, YOUR_PUSHER_SECRET и YOUR_CLUSTER данными с панели управления Pusher.Зададим маршрут для создания отзывов: /review. В данной конечной точке используем Pusher для вызова события review_added в канале reviews. Затем передадим все необходимые данные в виде обзора. Вот как выглядит работа с методом trigger:
pusher.trigger(channels, event, data, socketId, callback);
▍C3: создание API-прокси
Создадим прокси в config/index.js, для того, чтобы обращаться к нашему серверному API из фронтенд-сервера, созданного Vue Webpack. Затем мы можем запустить сервер разработки и бэкенд API одновременно.// config/index.js
module.exports = {
// ...
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://localhost:5000', // эту строку надо отредактировать в соответствии с портом, на котором работает ваш сервер
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
// ...
}
}
Отредактируем метод addReview для обращения к API в /src/components/Reviews.vue:
▍C4: прослушивание событий
Когда публикуется новый обзор, будем прослушивать события, отправляемые Pusher, и расширять их с использованием более подробных сведений. Установим библиотеку pusher-js:npm install -S pusher-js
Отредактируем Review.vue:
Как уже было сказано, мы импортируем объект Pusher из библиотеки pusher-js. Теперь создадим метод subscribe, который выполняет следующие действия: Подписка на канал reviews с помощью команды pusher.subscribe('reviews').
Прослушивание события review_added с помощью pusher.bind. Тут, в качестве второго аргумента, используется функция обратного вызова. При получении широковещательного сообщения функция обратного вызова вызывается с переданными данными в качестве параметра.
D. Сборка готового проекта
Добавим файл server.js с Node-сервером в dev-зависимости приложения, или выполним скрипт для того, чтобы сервер API запустился вместе с сервером, предоставленным шаблоном webpack: {
// ...
"scripts": {
"dev": "node server.js & node build/dev-server.js",
"start": "node server.js & node build/dev-server.js",
// ...
}
}
Теперь можно запустить всё, из чего состоит приложение:run dev
Итоги
Vue.js — это надёжный и простой фреймворк, который даёт отличную базу для разработки качественных приложений реального времени. Из этого материала вы узнали о том, как создавать такие приложения с привлечением возможностей сервиса Pusher.Уважаемые читатели! Какими технологиями вы пользуетесь для создания веб-приложений, предназначенных для работы с данными в реальном времени?
