개시하다

Rails로 간단한 채팅 앱을 만들었기 때문에 당시 프로그램을 정리했다.

컨디션

$ ruby -v
ruby 2.5.1p57 (2018-03-29 version 63029) [x86_64-darwin19]

$ bin/rails -v
Rails 5.2.3

참고 자료

채팅 소프트웨어를 만들 때 아래 내용을 참고하게 해 주세요.
이 글에 실린 대부분의 원본 코드는 다음과 같은 두 페이지의 내용을 바탕으로 한다.
Action Cable 실시간 채팅 애플리케이션으로 만드는 방법(Rails5.1.4에서) (하나) 허쿠로 이동!
Rails5+Action Cable로 제작!간단한 채팅 소프트웨어(DHH 프레젠테이션 비디오)

소스 코드

채팅 소프트웨어의 소스 코드는 아래에서 확인할 수 있다.
Neufo/rails-sample-app/ChatApp

절차.

1. 앱 만들기

우선 채팅 기능을 설치한 앱을 제작한다.

$ rails new ChatApp

2. 컨트롤러 만들기

ChaApp 디렉토리로 이동하여 다음 명령을 실행합니다.

$ bin/rails generate controller rooms show

이렇게ChatApp/app/controllers/하면rooms_controller.rb만들 수 있어요.

3. 모형 만들기

사용자 입력 메시지를 저장하는 모델을 생성합니다.

$ bin/rails generate model message content:text
$ bin/rails db:migrate

4. 메시지 목록 표시

RoomsController의 Show 방법을 사용하여 정보 목록을 가져옵니다.
ChatApp/app/controllers/rooms_controller.rb

class RoomsController < ApplicationController
  def show
    @messages = Message.all
  end
end

가져온 메시지를 표시하려면 View를 편집합니다.1
ChatApp/app/views/rooms/show.html.erb

<h1>Chat room</h1>

<div id="messages">
  <%= render @messages %>
</div>

페이지에 메시지의 요소를 삽입할 부분 템플릿을 만듭니다.
(ChaApp/app/views/에 메시지 폴더를 만들고 파일을 저장)
ChatApp/app/views/messages/_message.html.erb

<div class="message">
  <p><%= message.content %></p>
</div>

5. 채널 만들기

클라이언트/서버 간의 통신 처리의 초기 형태를 만듭니다.

$ bin/rails generate channel room speak

명령을 실행하면 클라이언트와 서버에 사용할 파일을 만들 것입니다.

ChatApp/app/assets/javascripts/channels/room.coffee(클라이언트)

ChatApp/app/channels/room_channel.rb(서버)

서버 확인 작업을 시작합니다.

$ bin/rails s

브라우저에서 /rooms/show를 열고 콘솔에 App.room.speak()를 입력합니다.진짜 답장하면 성공이야.

6. jQuery 활성화

고객이 편지를 보내고 받을 때 jQuery를 사용하기 때문에 준비를 해야 합니다.
ChatApp/Gemfile

gem 'jquery-rails'

Gemfile에 이러한 내용을 추가하면 수행bundle update됩니다.
jQuery의 프로그램 라이브러리를 로드합니다.js에 추기하다.
ChatApp/app/assets/javascripts/application.js

(省略)
//= require jquery
//= require jquery_ujs
//= require_tree .

7. 메시징 처리

다음 기능을 만듭니다.

클라이언트

서버에서 메시지 수신(received)

사용자가 입력한 메시지를 서버(speak)에 보내기

ChatApp/app/views/rooms/show.html.erb

<form>
  <label>Say something:</label><br>
  <!-- room_speaker からサーバへメッセージを送信する -->
  <input type="text" data-behavior="room_speaker">
</form>

ChatApp/app/assets/javascripts/channels/room.coffee

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
    # Enterキーが押されたらサーバへメッセージを送信する
    if event.keyCode is 13 # return = send
        App.room.speak event.target.value
        event.target.value = ''
        event.preventDefault()

App.room = App.cable.subscriptions.create "RoomChannel",
  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) ->
    # メッセージ一覧の末尾に受信したメッセージを追加する
    $('#messages').append data['message']

  speak: (message) ->
    # サーバのspeakメソッドを呼び出す
    @perform 'speak', message: message

서버 측

room_channel(subscribed) 구독

고객으로부터 받은 메시지 저장(speak)

room_채널에 가입한 클라이언트에 메시지 브로드캐스트(perform)

ChatApp/app/channels/room_channel.rb

class RoomChannel < ApplicationCable::Channel
  def subscribed
    # room_channelからデータを受信する
    stream_from "room_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    # データベースにクライアントから受信したメッセージを保存する
    Message.create! content: data['message']
  end
end

메시지를 브로드캐스트할 작업을 정의합니다.

$ rails generate job MessageBroadcast

ChatApp/app/jobs/message_broadcast_job.rb

class MessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    # room_channelにメッセージをブロードキャストする
    ActionCable.server.broadcast 'room_channel', message: render_message(message)
  end

  private
    def render_message(message)
      ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message })
    end
end

데이터베이스에 메시지를 저장한 후 작업에 로그인합니다.
ChatApp/app/models/message.rb

class Message < ApplicationRecord
    # データベースにメッセージが保存されたらジョブを登録する
    after_create_commit { MessageBroadcastJob.perform_later self }
end

등록된 작업은 자동으로 수행됩니다.
Message BroadcastJob의 perform 메서드를 호출하고 모든 클라이언트에 메시지를 보냅니다.
클라이언트는received를 통해 메시지를 받고, 메시지 목록의 끝에 메시지를 추가합니다.
채팅 소프트웨어 제작은 이것으로 끝냅니다.<%= render @messages %> 생략<%= render partial: "messages/message", collection: @messages %>.참조: 모음집 렌더링↩