Action Cable로 Rails 애플리케이션 만들기

Ruby on Rails는 웹 애플리케이션 개발을 위한 강력한 프레임워크입니다. 그 중에서도 Action Cable은 실시간 기능을 쉽게 구현할 수 있도록 도와주는 도구입니다. 이 글에서는 Action Cable을 사용하여 Rails 애플리케이션을 만드는 방법에 대해 알아보겠습니다.

Action Cable이란?

Action Cable은 Rails 5에서 도입된 기능으로, 웹소켓을 통해 클라이언트와 서버 간의 실시간 통신을 가능하게 합니다. 이를 통해 채팅 애플리케이션, 실시간 알림 시스템, 게임 등 다양한 실시간 기능을 구현할 수 있습니다.

Action Cable의 주요 특징

웹소켓을 통한 실시간 통신
Rails의 기존 기능과 통합
채널을 통한 메시지 전송
Active Record와의 통합

Action Cable 설정하기

Action Cable을 사용하기 위해서는 먼저 Rails 애플리케이션을 설정해야 합니다. 다음 단계에 따라 진행해 보세요.

1. 새로운 Rails 애플리케이션 생성

터미널에서 다음 명령어를 입력하여 새로운 Rails 애플리케이션을 생성합니다.

rails new my_action_cable_app --skip-javascript

이 명령어는 새로운 Rails 애플리케이션을 생성하며, JavaScript 파일 생성을 건너뜁니다. Action Cable은 기본적으로 JavaScript를 사용하므로, 나중에 추가할 것입니다.

2. Action Cable 설정

Rails 애플리케이션의 설정 파일인 config/cable.yml을 열어 기본 설정을 확인합니다. 기본적으로 개발 환경에서는 Redis를 사용하도록 설정되어 있습니다.

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

Redis가 설치되어 있지 않다면, 설치 후 실행해 주세요. Redis는 Action Cable의 메시지 브로커 역할을 합니다.

3. 채널 생성

이제 Action Cable에서 사용할 채널을 생성해 보겠습니다. 다음 명령어를 입력하여 채널을 생성합니다.

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

위 코드에서 subscribed 메서드는 클라이언트가 채널에 구독할 때 호출됩니다. stream_from 메서드는 클라이언트가 수신할 메시지를 지정합니다. speak 메서드는 클라이언트로부터 메시지를 받아서 브로드캐스트합니다.

JavaScript에서 채널 사용하기

이제 JavaScript 파일을 수정하여 클라이언트에서 채널을 사용할 수 있도록 하겠습니다. 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 = '';
});

위 코드에서 received 메서드는 서버에서 브로드캐스트된 메시지를 수신할 때 호출됩니다. speak 메서드는 클라이언트가 메시지를 서버로 전송할 때 사용됩니다.

뷰 생성하기

이제 메시지를 입력하고 표시할 수 있는 뷰를 생성해 보겠습니다. app/views/chat/index.html.erb 파일을 생성하고 다음과 같이 작성합니다.

Chat Room

위 코드는 간단한 채팅 인터페이스를 제공합니다. 사용자가 메시지를 입력하고 전송할 수 있는 폼이 포함되어 있습니다.

서버 실행하기

모든 설정이 완료되었으니, 이제 서버를 실행해 보겠습니다. 터미널에서 다음 명령어를 입력합니다.

rails server

서버가 실행되면 브라우저에서 http://localhost:3000/chat로 이동하여 채팅 애플리케이션을 확인할 수 있습니다.

결론

Action Cable을 사용하면 Rails 애플리케이션에서 실시간 기능을 쉽게 구현할 수 있습니다. 이번 글에서는 기본적인 채팅 애플리케이션을 만드는 과정을 살펴보았습니다. Action Cable을 활용하여 더 다양한 실시간 기능을 추가해 보세요!

이제 여러분은 Action Cable을 사용하여 Rails 애플리케이션을 만들 준비가 되었습니다. 실시간 기능을 통해 사용자 경험을 향상시키고, 더 많은 사용자와 소통할 수 있는 기회를 만들어 보세요!