Если вы хотите обслуживать своих цифровых клиентов с помощью веб-приложения, вам необходимо быть прежде всего мобильным, управляемым через API, а пользовательский интерфейс должен быть надежным. Ваше веб-приложение должно отражать изменения и взаимодействия в (почти) реальном времени без загрузки страниц или других задержек, которые могут нарушить поток клиентов.
Это сообщение в блоге объяснит концепцию и то, как использовать ActionCables с вашим приложением Rails и фреймворком Vue.js.
Реактивное программирование
Последнее десятилетие большинство UI / UX основано на парадигме реактивного программирования. Реактивное программирование - это парадигма асинхронного программирования, связанная с потоками данных и распространением изменений.
Обычными человеческими словами:
Если состояние вашего приложения изменится, это будет отражено в пользовательском интерфейсе клиента. Изменение может быть вызвано заказчиком или внутренними службами.
Фреймворки Javascript, такие как React, Vue.js, ускоряют ваш путь к реактивному программированию. Но чтобы вносить изменения в реальном времени, нам нужно что-то легкое и быстрое, а не опрашивать серверный API на основе JSON, вызывающий нагрузку на ваш API и задержку по времени.
WebSockets обеспечивают простое соединение с серверной частью в режиме реального времени.
Веб-сокеты
Протокол WebSocket обеспечивает взаимодействие между браузером и веб-сервером с меньшими накладными расходами, облегчая передачу данных в реальном времени с сервера и на сервер. Это стало возможным за счет предоставления серверу стандартизированного способа отправки контента в браузер без запроса со стороны клиента и возможности передачи сообщений туда и обратно при сохранении соединения.
Таким образом, между браузером и сервером может происходить двусторонний (двунаправленный) диалог. Связь осуществляется через порт TCP с номером 80 (или 443 в случае соединений с шифрованием TLS), что является преимуществом для тех сред, которые блокируют не-веб-подключения к Интернету с помощью брандмауэра.
Но как нам использовать это с нашим приложением Rails и интегрировать с Vue.js?
Встречайте ActionCables.
Что такое ActionCables?
Action Cable легко интегрирует WebSockets с остальной частью вашего приложения Rails. Он позволяет писать функции реального времени на Ruby в том же стиле и форме, что и остальная часть вашего Rails-приложения, оставаясь при этом производительными и масштабируемыми.
Это комплексное предложение, которое предоставляет как клиентскую среду JavaScript, так и платформу Ruby на стороне сервера. У вас есть доступ к вашей полной модели предметной области, написанной с помощью Active Record или вашей ORM по выбору.
Простой ActionCable с примером Vue.js
Лучший способ показать вам, как разогнать ваше приложение, - это пример. Вы можете найти проект на Github, получить весь код и запустить его самостоятельно.
Это пример простого чат-приложения, которое просто транслирует все сообщения, отправленные подключенным клиентам. Вы можете открыть столько окон браузера, сколько захотите, изменить имя и начать общение с помощью ActionCables.
Поток
- Клиент отправляет сообщение через Vue.js
- Vue.js отправит сообщение через ActionCable на бэкэнд (Rails).
- Серверная часть рассылает сообщение всем подключенным клиентам.
- Vue.js забирает транслируемое сообщение и отображает изменение.
Пример сплетни
Вот как выглядит пример Сплетни:
Добавление великолепия Vue.js в наше приложение Rails
Чтобы упростить нашу жизнь, нам нужно включить JQuery и Vue.js в наше приложение Rails. Добавление этих драгоценных камней в ваш Gemfile
:
gem 'vuejs-rails'
gem 'jquery-rails'
Конечно, нам нужно включить Vue.js в наш application.js
//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require vue
//= require_tree .
И внесем некоторые изменения в наш application.html.erb
. Обратите внимание, что мы переместили тег include для application
вниз, потому что нам нужно, чтобы DOM была полностью в памяти, прежде чем мы получим магию Vue.js. Также нам нужно включить метатеги action_cable!
<!DOCTYPE html>
<html>
<head>
<title>Gossip</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
<body>
<%= yield %>
</body>
<%= javascript_include_tag 'application' %>
</html>
Подключение к бэкэнду
Конечно, нам нужно подключиться через Websockets (ActionCable) к нашему бэкэнду. Мы подписываемся на наш бэкэнд GossipChannel ActionCable и реализовали метод send_message
, который можно вызывать из Vue.js для отправки сообщения. Обратите внимание на функцию received
, чтобы получать все сообщения, которые вы получаете через GossipChannel, через ActionCable.
Вторая половина этого кода представляет собой простую модель Vue.js с двумя методами для добавления сообщения (receiveMessage
) в модель данных и отправки сообщения (sendMessage
) в ActionCable.
Реализация внешнего интерфейса
Интерфейс представляет собой простую HTML-форму с тегами Vue.js ({{ gossip.message }}
) для визуализации данных и предоставления двух входных данных для изменения имени Gossiper и функции отправки сообщения о событии нажатия клавиши (@keyup.enter="sendMessage"
).
Реализация бэкэнда
Бэкэнд - это канал ActionCable для получения сообщения и его немедленной трансляции. Мы не используем для этого хранилище данных, а просто играем в пинг-понг.
С помощью оператора ActionCable.server.broadcast CHANNEL_NAME, { message: data['message'], name: data['name']}
мы передаем обратно на CHANNEL_NAME
данные, полученные от подключенных клиентов.
Легко и мощно!
Развернуть в облаке 66
Cloud 66 for Rails создает, управляет и поддерживает ваши Rails-приложения, наполненные ActionCable, которые можно развернуть на любом облачном провайдере или на вашем собственном сервере. Это помогает масштабировать базу данных с помощью репликации главный-подчиненный без необходимости вносить какие-либо изменения в конфигурацию. Вы можете одним щелчком мыши добавить резервные копии, балансировщики нагрузки и выводить из эксплуатации серверы.
Посмотрите эту короткую вводную демонстрацию некоторых функций и преимуществ использования Cloud 66 для Rails для развертывания ваших приложений Rails на любом сервере или в облаке.
Наслаждайтесь и исследуйте комбинацию Rails, Vue.js и ActionCables. Отличное комбо!
Ссылка
- Руководство по ActionCable
- Руководство по Vue.js
- Страница справки начало работы со стеками Rails / Rack.
- Статья о начале работы с вашим первым приложением Rails: от начала до развертывания.
- Откройте для себя Фреймворки для стоек, доступные в Cloud 66.
супер-заряд-ваш-рубин-на-рельсах-приложение-с-actioncables-и-vue.js
Первоначально опубликовано на blog.cloud66.com 19 декабря 2017 г.