#はじめに
こんにちは、とあるプログラミングスクールでメンターをしている者です。
今回Actioncableを用いたリアルタイムグループチャット機能の第二部となっております。
第一部をまだ読んでいない方はぜひそちらの方を読んでいただければと思います。
【Rails6】ActionCableを用いたリアルタイムグループチャット機能① ~リアルタイムチャット完成まで~
#参考記事
Railsでグループチャット機能を実装
#本題
今回作成していくために使っている機能は以下の通りです。
- ユーザー認証・・・Devise
- リアルタイムチャットの実現・・・Actioncable
また第一部の実装が完了していることが前提となっております。
##作成順序
以下の手法で作成していきます。
- チャット機能の作成
- グループに参加するメンバーのみでチャットができるよう改良
第二部では、グループ作成→完成まで行います。
##開発環境
macOS Big Sur 11.4
Ruby2.7.4
Rails6.1.4.1
DB:sqlite3
##必要なファイルの作成
アソシエーション用に必要なファイルを作成していきます。
ターミナル
$ rails g controller room_users
$ rails g model room_user
db/migrate/マイグレーションファイル
class CreateRoomUsers < ActiveRecord::Migration[6.1]
def change
create_table :room_users do |t|
t.references :room, foreign_key: true
t.references :user, foreign_key: true
t.timestamps
end
end
end
ターミナル
$ rails db:migrate
##モデルファイルの修正
モデルファイルの修正を行います。
app/models/user.rb
has_many :room_users, dependent: :destroy
has_many :rooms, through: :room_users, source: :room, dependent: :destroy
app/models/room.rb
class Room < ApplicationRecord
has_many :messages
has_many :room_users, dependent: :destroy
has_many :users, through: :room_users, source: :user
end
app/models/room_user.rb
class RoomUser < ApplicationRecord
belongs_to :room
belongs_to :user
end
参考：外部キー周りでエラーが出ることがあるのでご注意ください。
参考：アソシエーションはroomとuserが1:N、userとroomが1:N
##ルーティング
第一部のまま。
##コントローラーの作成
以下のようにコントローラーを書きます。
app/controllers/rooms_controller.rb
class RoomsController < ApplicationController
before_action :set_group, only: [:edit, :update]
def index
@room_lists = Room.all.order(:id)
@room_joining = RoomUser.where(user_id: current_user.id)
@room_lists_none = "You don't join any groups."
end
def new
@room = Room.new
@room.users << current_user
end
def create
@room = Room.new(room_params)
if @room.save
redirect_to rooms_path, notice: 'make a group.'
else
render :new
end
end
def show
@room = Room.find(params[:id])
@messages = @room.messages
end
def edit
# @group = Group.find(params[:id])
end
def update
# @group = Group.find(params[:id])
if @room.update(room_params)
redirect_to rooms_path, notice: 'update your group.'
else
render :edit
end
end
def destroy
delete_room = Room.find(params[:id])
if delete_room.destroy
redirect_to rooms_path, notice: 'delete your group.'
end
end
private
def set_group
@room = Room.find(params[:id])
end
def room_params
params.require(:room).permit(:roomname, user_ids: [])
end
end
before_actionの仕様に関しては自分で調べていただければと思います。
##ビューの作成
第一部とかぶっている所はありますが、以下のように記述しました。
デザインの導入で一部Bootstrapの機能を使っています。導入はしてもらった方が便利なのでぜひしてみてください。
Bootstrap公式記事
app/views/rooms/index.html.erb
<h1>Real part</h1>
<div>
<ul>
<% @room_lists.each do |room| %>
<li><%= link_to "ROOM#{room.id}", room_path(room) %></li>
<% end %>
</ul>
</div>
<div class="chat-group">
<h1>All chat groups</h1>
<div class="group-search">
<div class="group-search-form">
<%= form_with(url: rooms_path, local: true) do |f| %>
<%= f.text_field :keyword, placeholder: "search for group", class: "group-search-form-input" %>
<%= f.submit 'search' %>
<% end %>
</div>
<div class="group-new">
<%= link_to 'make a group', new_room_path %>
</div>
<% if @room_joining == [] %>
<%= @room_lists_none %>
<% else %>
<div class="group-list">
<ul class="group-list-table">
<% @room_lists.each do |list| %>
<% if list.user_ids.include?(current_user.id) %>
<li class="group-list-table-each-group">
<%= link_to "/rooms/#{list.id}" do %>
<%= list.roomname %>(<%= list.user_ids.count %>)
<%= link_to 'edit', edit_room_path(list.id), method: :get %>
<%= link_to 'delete', room_path(list.id), method: :delete %>
<% end %>
</li>
<% end %>
<% end %>
</ul>
</div>
<% end %>
</div>
<div class="user-page">
<%#= link_to 'ユーザーページへ', current_user %>
</div>
</div>
app/views/rooms/new.html.erb
<h1>Create new group</h1>
<%= form_with(model: @room, local: true) do |f| %>
<div class="group-new-form">
<div class="gtoup-new-form-name">
<%= f.label :roomname, 'group name' %>
<%= f.text_field :roomname, class: 'form-control' %>
<%= f.collection_check_boxes :user_ids, User.all, :id, :username %>
</div>
<%= f.submit '新規作成', class: "btn btn-primary" %>
</div>
<% end %>
app/views/rooms/edit.html.erb
<h1>edit group</h1>
<%= form_with(model: @room, local: true) do |f| %>
<div class="group-new-form">
<div class="gtoup-new-form-name">
<%= f.label :roomname, 'group name' %>
<%= f.text_field :roomname, class: 'form-control' %>
<%= f.collection_check_boxes :user_ids, User.all, :id, :username %>
</div>
<%= f.submit 'update', class: "btn btn-primary" %>
</div>
<% end %>
app/views/rooms/show.html.erb
<h1>Real Chat room</h1>
<div id='messages' data-room_id="<%= @room.id %>">
<%= render @messages %>
</div>
<form>
<%= label_tag :content, 'Say something:' %>
<input type="text" data-behavior="room_speaker">
</form>
#完成
これでリアルタイムグループチャットの完成となります。
まだデザインを整えたらどのように動くか確認は出来ていないので、デザイン時にはあまりコードをいじらずにデザインしていただければと思います。
#おまけ
今回が私が実装したコードをgithubの方に載せています。
もし、エラーがでて詰まったという場合は参考にしてください。→参考コード
また今回第二部で載せさせていただいた参考記事とコメント機能を合わせると、リアルタイムではないですがグループチャットが完成できます。そちらのコードも載せているのでぜひ参考にしてみてください。