Hotwire는 복잡한 JavaScript 프레임워크 없이 실시간 기능을 구현하는 데 이상적입니다. 핵심 구성 요소는 다음과 같습니다:
-
Turbo Streams: WebSockets를 통해 실시간 DOM 업데이트를 가능하게 하며, 서버가 HTML 조각을 전송하여 UI 변경 사항을 제어합니다.
-
Action Cable: 양방향 통신을 위한 WebSocket 인프라를 제공하며, Rails의 우아함으로 연결 및 메시지 브로드캐스팅을 처리합니다.
-
Stimulus: 복잡한 JavaScript 없이 대화형 동작을 추가하며, 로직을 서버 측에 유지합니다.
기반 구축: 모델 및 컨트롤러 통합
채팅 시스템은 Chat 및 ChatMessage 모델을 중심으로 구축됩니다. ChatMessage 모델은 after_create_commit 콜백을 통해 Turbo Streams 브로드캐스팅을 통합하여, 메시지 생성/업데이트 시 연결된 모든 클라이언트가 자동으로 업데이트를 받도록 합니다.
컨트롤러는 사용자 메시지 제출 시 메시지를 즉시 저장하고 ProcessMessageJob을 통해 백그라운드 작업을 큐에 추가하여 AI 처리와 같은 느린 작업을 비동기적으로 처리, 사용자에게 즉각적인 피드백을 제공합니다.
실시간 인터페이스 및 Stimulus 활용
뷰는 turbo_stream_from 헬퍼를 통해 WebSocket 연결을 설정하고, messages-container는 실시간으로 업데이트되는 뷰포트가 됩니다. 메시지 파셜은 다양한 상태(사용자, 어시스턴트, 생성 중)를 처리합니다.
Stimulus 컨트롤러는 폼 제출을 가로채 fetch를 통해 비동기적으로 처리합니다. 서버는 메시지를 처리하고 Turbo Stream 브로드캐스트를 트리거하여 페이지 새로고침 없이 새 메시지가 UI에 즉시 나타나게 합니다.
Action Cable 및 백그라운드 작업
Action Cable은 ChatChannel에서 stream_from 패턴으로 각 대화에 고유한 채널을 생성하고 인증 로직으로 보안을 강화합니다.
백그라운드 작업은 ProcessMessageJob과 같은 패턴을 통해 AI 응답 생성 등 복잡한 작업을 비동기적으로 처리합니다. 작업은 로딩 피드백을 제공하고, 실제 작업을 처리한 후 결과를 연결된 클라이언트에 브로드캐스팅하여 UI를 업데이트합니다.
아키텍처의 확장성 및 스케일링 고려사항
이 아키텍처는 서버 측 로직, 백그라운드 처리, Turbo Streams 패턴을 기반으로 새로운 기능을 쉽게 확장할 수 있습니다. 타이핑 표시기와 같은 세부 기능도 동일한 메커니즘으로 구현됩니다. 스케일링을 위해 메시지 페이지네이션, 지연 로딩, 백그라운드 작업 큐, Redis 어댑터를 통한 Action Cable 스케일링, 데이터베이스 인덱싱 및 연결 풀링, 메시지 전송 속도 제한 등이 고려됩니다.