Если вы хотите обслуживать своих цифровых клиентов с помощью веб-приложения, вам необходимо быть прежде всего мобильным, управляемым через 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. Отличное комбо!

Ссылка

супер-заряд-ваш-рубин-на-рельсах-приложение-с-actioncables-и-vue.js

Первоначально опубликовано на blog.cloud66.com 19 декабря 2017 г.