目的
Railsで作成したアプリに、Action Cableを用いてリアルタイムチャット機能を導入する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
- アプリが作成されている。
手順
はじめに
今回はかなり長くなってしまうので、3回に分けて投稿させて頂きます。
1回目の今回は、アプリの下準備としてチャット機能実装、
2回目は、Action Cableを用いての実装、
3回は、本番環境で使用するための実装をしていきます!
コントローラーの作成
では早速始めていきます!
今回のアプリには画面の遷移は必要ないので、newアクションを指定してコントローラーを作成します。
newと指定することでnew.html.erbも生成されます。
ターミナル
% rails g controller messages new
モデルの作成
次はモデルの作成です!
ターミナル
% rails g model message text:text
モデルの作成時にmessagesテーブルにtext型でtextカラムを追加しています。
ターミナル
% rails db:migrate
マイグレーションも忘れずに!
ルーティングの設定
続いてルーティングの設定です。
newとcreateアクションのみ設定します。
routes.rb
Rails.application.routes.draw do
root 'messages#new'
resources :messages, only: [:create]
end
アクションの定義
次はアクションの定義です。
app/controllers/messages_controller.rb
class MessagesController < ApplicationController
def new
@messages = Message.all
@message = Message.new
end
def create
@message = Message.new(text: params[:message][:text])
end
end
ビューファイルの作成
最後にビューファイルの作成です。
メッセージの一覧とフォームを表示させます。
app/views/messages/new.html.erb
<%= form_with model: @message do |f| %>
<%= f.text_field :text %>
<%= f.submit '送信' %>
<% end %>
<div id='messages'>
<% @messages.reverse_each do |message| %>
<p><%= message.text %></p>
<% end %>
</div>
これで準備は完了です!
最後に
以上で下準備は完了です。
次回はAction Cableの実装を行っていきます。【Rails】リアルタイムチャット機能実装（Action Cable）2/3
では。