Статьи

Action Cable и WebSockets: подробное руководство

Рубин на железной дороге, Вектор Плоский дизайн

Одной из долгожданных возможностей Rails 5 является официальное решение для интеграции веб-сокетов с Rails, получившее название Action Cable. Как агентство Ruby on Rails , мы очень рады этой новой версии.

Согласно их странице Github, Action Cable:

[…] Легко интегрирует WebSockets с остальной частью вашего Rails-приложения. Он позволяет в реальном времени записывать функции на Ruby в том же стиле и форме, что и остальная часть вашего Rails-приложения, при этом оставаясь производительным и масштабируемым.

Звучит потрясающе и полезно. Забудьте о работе непосредственно с такими драгоценными камнями, как Faye, Action Cable удаляет беспорядок из веб-сокетов и выступает в роли адаптера к функциональности. Он обеспечивает чистый интерфейс как для кода Javascript на стороне клиента, так и для кода Rails на стороне сервера.

Чтобы полностью понять Action Cable в Rails 5, нам нужно взглянуть на несколько вещей:

  • Основы WebSockets
  • Action Cable API и пример
  • Плюсы и минусы Action Cable

Давайте начнем!

Что такое WebSockets?

HTTP давно существует и, очевидно, является наиболее распространенным протоколом для связи между браузером и сервером. В типичном HTTP-запросе браузера браузер запрашивает у сервера отдельный документ HTML, Javascript или CSS. После этого соединение закрывается, и если браузер нуждается в дополнительных ресурсах, браузер снова инициирует диалог.

Еще до того, как WebSockets были идеей, разработчики имитировали бы концепцию WebSockets, последовательно опрашивая сервер на предмет наличия обновлений каждые несколько секунд. Возможно, у вас уже есть сигналы тревоги в вашей голове. В отношении опроса нет большой масштабируемости. Как разработчик, вы бы добавили значительную нагрузку на свои серверы. При этом опрос все еще очень широко используется во всем Интернете.

Так что же такое WebSockets? В отличие от HTTP-запросов, WebSockets – это соединения с состоянием. Это означает, что соединение между клиентом и сервером остается постоянным и связанным. По этому сценарию. любая сторона (клиент или сервер) имеет возможность инициировать запрос или сообщение. Конечным результатом является прямое взаимодействие между браузером и сервером.

Введите Action Cable

В рамках своего Rails Conf Keynote 2015 года Дэвид Хайнмайер Ханссон объявил о добавлении Action Cable в ядро ​​Rails. Обоснование этого дополнения основывалось на текущем ландшафте сред приложений и растущей потребности в такой функции. Action Cable был представлен как новая концепция для расширения функциональности Rails с помощью обмена сообщениями в реальном времени с использованием WebSockets.

API Action Cable

Чтобы начать играть с Action Cable, сначала создайте новый проект и установите гем actioncable. Для простоты использования проверьте этот проект в репозитории этого примера .

В вашем терминале перейдите в каталог проекта, запустите bundle install

Для этого проекта мы будем использовать puma и будем запускать сервис Action Cable отдельно от нашего сервера приложений. Action Cable работает со многими популярными платформами серверов приложений, такими как Unicorn, Puma и Passenger .

Для этого проекта вам нужно будет установить Redis. Ниже приведены краткие инструкции по установке Redis:

Linux:

 wget http://download.redis.io/redis-stable.tar.gz
tar xvzf redis-stable.tar.gz
cd redis-stable
make
make install

Mac:

 brew install redis

Как только Redis установлен, продолжайте и запустите ваши серверы. В одном окне терминала запустите ./bin/cable

В новом окне терминала запустите ./bin/rails server Наконец, и в еще одном окне запустите redis-server Уф!

После того, как все это успешно выполнено, вы можете перейти в вашем браузере к localhost:3000 Вы увидите карту Питтсбурга, штат Пенсильвания, США. Откройте другой браузер по тому же адресу. Это может быть другой браузер или сеанс инкогнито одного и того же браузера, так что эти два сеанса не используют одни и те же файлы cookie и т. Д.

Кабель действий в действии

В первом окне браузера нажмите ссылку «Создать дом» под тегом «Дома» на домашней странице. Это приведет вас к форме с двумя полями. Заполните поля адреса и почтового индекса дома или даже знаменитой достопримечательности Питтсбурга . Как только вы нажмете «Сохранить», вы увидите, что в другом окне вашего браузера опускается булавка, и на карте появляется новый дом. Все это было сделано через Action Cable и WebSockets.

Diving in Action Cable

Создание каналов

В Action Cable каналы – это мясо и картошка. Обратите внимание на следующие файлы в папке каналов :

  • приложение / каналы / application_channel / connection.rb
  • приложение / каналы / application_channel / channel.rb
  • Приложение / каналы / houses_channel.rb

ApplicationCable::Connection Например, мы могли бы использовать этот модуль для запроса базы данных для конкретного пользователя, который устанавливает соединение, и гарантировать, что ему разрешено прослушивать. Для этого проекта у нас нет пользователей и, следовательно, здесь не нужен код.

ApplicationCable::ChannelApplicationController Этот класс является основой всех других каналов. Обратите внимание, что все другие каналы в проекте наследуются от этого класса. Вы можете использовать этот класс для выполнения общей логики, которая может использоваться между каналами.

Наконец, есть HouseChannel Когда клиент пытается подписаться на канал, вызывается метод follow

Имейте в виду, что есть два метода, которые могут достичь похожих результатов: stream_fromstream_for Метод stream_from Например, в нашем проекте мы подписались на трансляции, связанные со строкой «дома». Когда новый дом создан, мы хотим знать об этом. Напротив, stream_for В рамках Action Cable генерирует уникальную строку для этой записи или той записи и ее ассоциации, а затем вызывает метод stream_for

ПРИМЕЧАНИЕ. Другое преимущество метода stream_for

Трансляции изменений

В нашем примере трансляция на домашнем канале происходит после добавления дома. Чтобы это работало, мы создали один ActiveJob и обратный вызов для модели.

Обратный звонок в нашей модели House

 after_commit { HouseRelayJob.perform_later(self) }

Это создает HouseRelayJob

Метод HouseRelayJob.perform

 class HouseRelayJob < ApplicationJob
  def perform(house)
    ActionCable.server.broadcast "houses",
      house: house
  end
end

Это сообщает HouseChannel Для этого примера это будет отправка JSON клиенту.

Подписки на стороне клиента

Последняя часть нашего канала – это код на стороне клиента. Есть два файла, которые определяют это отношение. Первый файл – это app / assets / javascripts / channel / application_channel.coffee . Этот файл просто определяет кабель:

 #= require cable

@App = {}
App.cable = Cable.createConsumer 'ws://localhost:28080'

Второй файл – это app / assets / javascripts / channel / Houses.coffee, который устанавливает подписку на HousesChannel

 App.houses = App.cable.subscriptions.create 'HousesChannel',

  dropMarker: (house) ->
    new google.maps.Marker
      position: { lat: house.latitude, lng: house.longitude},
      map: window.map,
      animation: google.maps.Animation.DROP
      title: "#{house.address} #{house.zipcode}"

  received: (data) ->
    @dropMarker(data.house)

Плюсы и минусы действий Cable / WebSockets

Полное понимание технологии важно при принятии решения, будет ли она соответствовать вашим потребностям. Внедрение новой технологии ради технологий может быть дорогой ошибкой. Поскольку Action Cable является оберткой вокруг WebSockets, мы должны действительно понимать за и против использования WebSockets.

Плюсы

Одним из самых больших преимуществ WebSockets и Action Cable является то, что это открытое соединение является чрезвычайно легким по сравнению с обычным HTTP-запросом:

Веб-сокеты HTML5 обеспечивают огромный шаг вперед в масштабируемости веб-сайтов реального времени […] Веб-сокеты HTML5 могут обеспечить 500: 1 или – в зависимости от размера заголовков HTTP – даже сокращение ненужного HTTP-заголовка на 1000: 1 трафик и снижение задержки 3: 1. Это не просто постепенное улучшение; это революционный скачок – квантовый скачок!

HTML5 WebSocket: квантовый скачок в масштабируемости для Интернета
,

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

Наконец, соединение WebSocket является полнодуплексным соединением. Сервер и клиент могут использовать это соединение для одновременной связи друг с другом. Это сильно отличается от обычного полудуплексного HTTP-соединения.

После рассмотрения плюсов кажется, что добавление WebSockets в приложение может значительно повысить производительность за счет сокращения данных, которые необходимо передавать по проводам.

Минусы

Одним из главных аргументов против WebSockets является невозможность кэширования этих запросов. Исследуя Action Cable, я наткнулся на действительно глубокую статью о Action Cable, написанную Нейтом Беркопеком, под названием Action Cable – Друг или Враг? , Он ссылается на множество различных альтернатив WebSockets и стоит ли Action Cable того.

При ссылке на Action Cable и WebSockets он заявляет:

Я не уверен, что я покупаю в «WebSockets полностью избавляет от необходимости HTTP!» Риторика. HTTP имеет много положительных моментов, и, отойдя от HTTP, мы потеряем все. Кеширование, маршрутизация, мультиплексирование, архивирование и многое другое. Вы можете переопределить все эти вещи в Action Cable, но почему?

Он продолжает, говоря, что, возможно, стоит немного подождать. Как Action Cable, так и WebSockets являются более новыми технологиями, и мы можем подождать, пока пыль осядет, прежде чем добавлять ее только ради технологии.

Нейт продолжает говорить, что в некоторых случаях Action Cable имеет смысл:

[F] или ситуации с высокой пропускной способностью, когда клиент связывается с сервером несколько раз в секунду, я думаю, что Action Cable вполне подойдет.

Еще один минус WebSocket – поддержка браузеров. В настоящее время 70% рынка браузеров допускают подключения WebSocket. Это оставляет 30% нуждающихся во вторичном растворе.

Прежде чем обратиться к Action Cable в качестве решения вашей проблемы, убедитесь, что вы исследовали и точно знаете, что Action Cable подойдет вашим потребностям.

Завершение

Action Cable – мощное дополнение к фреймворку Rails. Надеемся, что эта статья предоставила вам инструменты, необходимые для того, чтобы решить, стоит ли использовать Action Cable и WebSockets для дальнейшего изучения.

Мне бы хотелось узнать больше о том, как вы использовали Action Cable в живом проекте или просто для удовольствия. Пожалуйста не стесняйтесь оставить комментарий. Давайте поговорим!