Создание приложений на Rails с использованием Action Cable

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

Что такое Action Cable?

Action Cable объединяет WebSocket с традиционными HTTP-запросами, позволяя Rails-приложениям поддерживать постоянное соединение с клиентом. Это означает, что сервер может отправлять данные клиенту в любое время, без необходимости клиенту запрашивать их. Action Cable позволяет создавать такие функции, как чаты, уведомления и обновления данных в реальном времени.

Основные компоненты Action Cable

Action Cable состоит из нескольких ключевых компонентов:

Серверные каналы: Это классы, которые обрабатывают соединения и сообщения от клиентов.
Клиентские подписки: Это JavaScript-код, который позволяет клиентам подписываться на каналы и получать сообщения.
Миграции: Для хранения данных, связанных с вашими каналами, могут потребоваться миграции базы данных.

Настройка Action Cable в вашем приложении Rails

Чтобы начать использовать Action Cable, вам нужно убедиться, что у вас установлена последняя версия Ruby on Rails. Если вы еще не создали приложение, вы можете сделать это с помощью следующей команды:

rails new my_app --skip-javascript

После создания приложения вам нужно будет настроить Action Cable. Откройте файл config/cable.yml и убедитесь, что он выглядит следующим образом:

development:
  adapter: async

test:
  adapter: test

production:
  adapter: redis
  url: redis://localhost:6379/1

В этом примере мы используем адаптер async для разработки и redis для продакшена. Убедитесь, что Redis установлен и запущен на вашем сервере, если вы планируете использовать его в продакшене.

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

Теперь давайте создадим наш первый канал. В терминале выполните следующую команду:

rails generate channel Chat

Это создаст два файла: app/channels/chat_channel.rb и app/javascript/channels/chat_channel.js. Откройте файл chat_channel.rb и добавьте следующий код:

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    ActionCable.server.broadcast("chat_channel", message: data['message'])
  end
end

В этом коде мы определяем, что когда пользователь подписывается на канал, он будет получать сообщения, отправленные в chat_channel. Метод speak будет использоваться для отправки сообщений в канал.

Клиентская часть

Теперь давайте настроим клиентскую часть. Откройте файл chat_channel.js и добавьте следующий код:

import consumer from "./consumer"

const chatChannel = consumer.subscriptions.create("ChatChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // Called when there's incoming data on the websocket for this channel
    const messageElement = document.createElement('div');
    messageElement.innerText = data.message;
    document.getElementById('messages').appendChild(messageElement);
  },

  speak(message) {
    this.perform('speak', { message: message });
  }
});

document.getElementById('message_form').addEventListener('submit', function(event) {
  event.preventDefault();
  const messageInput = document.getElementById('message_input');
  chatChannel.speak(messageInput.value);
  messageInput.value = '';
});

В этом коде мы создаем подписку на ChatChannel и определяем методы для обработки подключения, отключения и получения сообщений. Мы также добавляем обработчик событий для формы, чтобы отправлять сообщения на сервер.

Создание представления

Теперь давайте создадим представление для нашего чата. Откройте файл app/views/chat/index.html.erb и добавьте следующий код:

Чат

Это простое представление содержит область для отображения сообщений и форму для ввода новых сообщений.

Запуск приложения

Теперь, когда все настроено, вы можете запустить сервер Rails:

rails server

Перейдите в браузере по адресу http://localhost:3000/chat, и вы увидите ваше приложение чата. Откройте несколько вкладок браузера, чтобы протестировать функциональность в реальном времени.

Заключение

Action Cable — это мощный инструмент для создания приложений с функциональностью в реальном времени на Ruby on Rails. В этой статье мы рассмотрели, как настроить Action Cable, создать канал и реализовать простое приложение чата. Теперь вы можете использовать эти знания для создания более сложных приложений с поддержкой реального времени.

Не забывайте экспериментировать и добавлять новые функции в ваше приложение. Удачи в разработке!