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

Для этого проекта вам нужно будет установить 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 в живом проекте или просто для удовольствия. Пожалуйста не стесняйтесь оставить комментарий. Давайте поговорим!