Створення Rails-додатків з Action Cable

У сучасному веб-розробці реального часу, інтерактивність та швидкість є ключовими аспектами, які впливають на досвід користувачів. Ruby on Rails, один з найпопулярніших фреймворків для веб-розробки, пропонує потужний інструмент для реалізації функцій реального часу через Action Cable. У цій статті ми розглянемо, як створити Rails-додаток з використанням Action Cable, щоб забезпечити інтерактивність у ваших веб-додатках.

Що таке Action Cable?

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

Переваги використання Action Cable

Двостороннє спілкування: Клієнти можуть надсилати дані на сервер і отримувати оновлення в реальному часі.
Зменшення затримок: Завдяки WebSocket, дані передаються швидше, ніж при традиційних запитах HTTP.
Легкість інтеграції: Action Cable інтегрується безпосередньо в Rails, що спрощує налаштування.

Налаштування Rails-додатку з Action Cable

Давайте розглянемо, як налаштувати простий Rails-додаток з Action Cable. Для цього ми створимо чат-додаток, де користувачі зможуть обмінюватися повідомленнями в реальному часі.

Крок 1: Створення нового Rails-додатку

Спочатку створимо новий Rails-додаток. Відкрийте термінал і виконайте наступну команду:

rails new chat_app --skip-javascript

Після цього перейдіть у створену директорію:

cd chat_app

Крок 2: Додавання Action Cable

Action Cable вже вбудований у Rails, тому вам не потрібно додавати жодних додаткових гемів. Однак, вам потрібно налаштувати Action Cable у вашому додатку. Відкрийте файл config/cable.yml і переконайтеся, що у вас є правильні налаштування для вашого середовища:

development:
  adapter: async

test:
  adapter: test

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

У цьому прикладі ми використовуємо адаптер async для розробки та redis для продакшн-середовища.

Крок 3: Створення каналу

Тепер давайте створимо канал для нашого чату. Виконайте команду:

rails generate channel Chat

Це створить файл app/channels/chat_channel.rb. Відкрийте його та додайте наступний код:

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

  def unsubscribed
    # Cleanup when channel is unsubscribed
  end

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

У цьому коді ми підписуємося на канал chat_channel і визначаємо метод send_message, який буде використовуватися для надсилання повідомлень.

Крок 4: Налаштування JavaScript

Тепер давайте налаштуємо JavaScript для підключення до нашого каналу. Відкрийте файл app/javascript/channels/chat_channel.js і додайте наступний код:

import consumer from "./consumer"

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) {
    const messages = document.getElementById('messages')
    messages.insertAdjacentHTML('beforeend', `${data.message}`)
  },

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

Цей код підключає наш JavaScript до каналу ChatChannel і визначає метод send_message, який буде використовуватися для надсилання повідомлень.

Крок 5: Створення інтерфейсу користувача

Тепер давайте створимо простий інтерфейс для нашого чату. Відкрийте файл app/views/layouts/application.html.erb і додайте наступний HTML-код:




  ChatApp
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_pack_tag 'application' %>

Цей код створює простий інтерфейс для чату з полем введення та кнопкою для надсилання повідомлень.

Тестування нашого чату

Тепер, коли ми налаштували наш чат-додаток, давайте запустимо сервер Rails:

rails server

Відкрийте браузер і перейдіть за адресою http://localhost:3000. Ви повинні побачити інтерфейс чату. Відкрийте кілька вкладок браузера, щоб протестувати функціональність чату. Коли ви надсилаєте повідомлення з однієї вкладки, воно повинно з'явитися в інших вкладках у реальному часі.

Висновок

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

Не забувайте експериментувати з Action Cable, щоб дізнатися більше про його можливості та як ви можете використовувати його у своїх проектах!