Когда я начал работать над проектом со своим коллегой, нам не потребовалось много времени, чтобы решить, что мы хотим создать. Мы сразу же подумали о создании приложения для чата и подумали, что разобраться в нем не так уж и сложно. Конечно, у нас было всего два дня, но, может быть, это будет тот огонь, который нам нужен, чтобы создать что-то действительно потрясающее! Единственная проблема заключалась в том, что везде, где мы смотрели, только перечисленные примеры использования ActionCable с полным стеком Ruby on Rails, и мы использовали его только для Backend Rails API.
Шаг 1. Настройте базу данных, сериализаторы и внесите свой API в белый список (CORS)
Чтобы ваш Frontend мог взаимодействовать с вашим Backend с помощью JavaScript, вам потребуется настроить базу данных и сериализовать данные. Причина, по которой это важно, заключается в том, что это позволит вашему Frontend взаимодействовать с вашим Rails API через Websockets. Без него это НЕ будет работать.
В разделе config ›initializers› cors.rb укажите в белом списке веб-сайты, которым вы хотите разрешить доступ к вашему API:
А затем внесите его в белый список в config ›environment› development.rb следующим образом:
Шаг 2: Подключите ActionCable и создайте Websocket
После того, как вы убедились, что ваши данные доступны на локальном хосте, пора создать доступный веб-узел. Перейдите в config ›routes.rb и подключите ActionCable:
Как только это будет настроено, перейдите к своему Frontend и создайте функцию для открытия нового Websocket, который взаимодействует с смонтированным ActionCable:
Шаг 3. Создайте канал
В разделе приложение ›каналы создайте канал для информации, которую вы пытаетесь транслировать и обрабатывать. В этом случае мы пытаемся передавать сообщения чата между пользователями (анонимными и вошедшими) на канал (Users has_many Messages on a Channel). Здесь принимаются и обрабатываются сообщения от Frontend:
В приведенном выше примере метод подписанный вызывает метод self.all_messages внутри ChatMessagesChannel. Это означает, что пользователь (анонимный или вошедший в систему) подписывается на текущую «трансляцию» после открытия веб-страницы. Эта трансляция - это то, как информация передается в прямом эфире всем, кто в настоящее время может быть подписан на тот же канал (например, пользователям в чате).
Шаг 4: общайтесь с серверной частью через WebSocket
Пришло время собрать все воедино! Вернитесь во внешний интерфейс и создайте функцию, которая будет подписывать анонимного или вошедшего в систему пользователя на любого и все сообщения, которые будут получены в режиме реального времени после загрузки страницы:
Мы вызываем созданную ранее функцию openConnection и добавляем прослушиватель событий onopen в chatWebSocket. Это событие немедленно подписывается на канал сообщений чата. Давайте разберемся еще дальше:
В объекте subscribeMsg вы видите «command»: «subscribe» - вам это кажется знакомым? Он вызывает метод, который мы создали ранее в канале сообщений чата. Однако как узнать, что это правильный канал? Давайте посмотрим на следующую часть: «идентификатор»: «{\» канал \ »: \« ChatMessagesChannel \ »}» - как вы можете видеть по значению идентификатора, он специально ищет канал под названием ChatMessagesChannel.
Вот и все!
Теперь все, что осталось, - это доработать ваше приложение и реализовать способ анализа данных вашего сообщения и их рендеринга в реальном времени. Однако теперь любой на вашей странице может получать ЛЮБЫЕ новые сообщения, которые отправляются, а затем транслируются из канала сообщений чата.
Если вы действительно заинтересованы в развертывании серверной части ActionCable Rails API в Heroku, посетите блог моего коллеги, который подробно описывает установку здесь.
