ActionCableとTurboを使用してRailsでリアルタイムチャットアプリを構築する

グループチャットの場合、個々の部屋にルーティングできる必要がありますが、同じページにとどまります。これを行うには、インデックスページに必要なすべての変数をRoomsController showメソッドに追加し、インデックスページを静止させます。

#app/controllers/rooms_controller.rb
def show
  @current_user = current_user
  @single_room = Room.find(params[:id])
  @rooms = Room.public_rooms
  @users = User.all_except(@current_user)
  @room = Room.new

  render "index"
end

@single_roomという名前の追加の変数 showメソッドに追加されました。これにより、ルーティング先の特定の部屋が得られます。したがって、部屋の名前がクリックされたときに移動した部屋の名前を示す条件ステートメントをインデックスページに追加できます。これは、クラス名col-md-10でdiv内に追加されます 、以下に示すように。

<div class="col-md-10 bg-dark text-light">
  <% if @single_room %>
    <h4 class="text-center"> <%= @single_room.name %> </h4>
  <% end %>
</div>

複数の部屋への移動を示す画像

次に、もっとジューシーなメッセージ、メッセージングに移ります。チャットセクションの高さを100vhにして、ページ全体に表示し、メッセージ作成用のチャットボックスを含める必要があります。チャットボックスにはメッセージモデルが必要です。メッセージは作成者とそれが意図された部屋なしでは存在できないため、このモデルにはユーザー参照と部屋参照があります。

rails g model Message user:references room:references content:text
rails db:migrate

また、ユーザーモデルと部屋モデルに次の行を追加して、この関連付けを特定する必要があります。

has_many :messages

メッセージ作成用のフォームをページに追加して、スタイルを追加しましょう：

#app/views/layouts/_new_message_form.html.erb
<div class="form-group msg-form">
  <%= form_with(model: [@single_room ,@message], remote: true, class: "d-flex" ) do |f| %>
    <%= f.text_field :content, id: 'chat-text', class: "form-control msg-content", autocomplete: 'off' %>
    <%= f.submit data: { disable_with: false }, class: "btn btn-primary" %>
  <% end %>
</div>

#app/assets/stylesheets/rooms.scss
  .msg-form {
    position: fixed;
    bottom: 0;
    width: 90%
  }

  .col-md-10 {
    height: 100vh;
    overflow: scroll;
  }

  .msg-content {
    width: 80%;
    margin-right: 5px;
  }

このフォームには@messageが含まれています 変数;したがって、コントローラーで定義する必要があります。これをRoomsControllerのshowメソッドに追加します。

@message = Message.new

routes.rbで ファイルの場合、部屋のリソース内にメッセージリソースを追加します。これは、メッセージの作成元である部屋のIDであるparamsに添付されます。

resources :rooms do
  resources :messages
end

新しいメッセージが作成されるたびに、それが作成された部屋にブロードキャストされるようにします。これを行うには、メッセージをレンダリングする部分的なメッセージが必要です。これが放送されるものなので、turbo_streamも必要です その特定の部屋のブロードキャストメッセージと、これらのメッセージを追加するためのコンテナとして機能するdivを受信します。このコンテナのIDは、ブロードキャストのターゲットと同じである必要があることを忘れないでください。

これをメッセージモデルに追加します：

#app/models/message.rb
after_create_commit { broadcast_append_to self.room }

このようにして、作成された特定の部屋にブロードキャストします。

また、ストリーム、メッセージコンテナ、メッセージフォームをインデックスファイルに追加します。

#within the @single_room condition in app/views/rooms/index.html.erb
<%= turbo_stream_from @single_room %>
<div id="messages">
</div>
<%= render partial: 'layouts/new_message_form' >

ブロードキャストされるメッセージパーシャルを作成し、その中に、部屋が公共のものである場合にのみ送信者のユーザー名を表示します。

#app/views/messages/_message.html.erb
<div>
  <% unless message.room.is_private %>
    <h6 class="name"> <%= message.user.username %> </h6>
  <% end %>
  <%= message.content %>
</div>

コンソールからメッセージを作成すると、割り当てられたテンプレートを使用してその部屋にメッセージがブロードキャストされていることがわかります。

ダッシュボードからのメッセージ作成を有効にするには、createメソッドをMessagesControllerに追加する必要があります。

#app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def create
    @current_user = current_user
    @message = @current_user.messages.create(content: msg_params[:content], room_id: params[:room_id])
  end

  private

  def msg_params
    params.require(:message).permit(:content)
  end
end

これが私たちが得るものです：

上のビデオでわかるように、メッセージは追加されていますが、別のチャットルームに移動すると、戻ったときに前のチャットルームのメッセージが失われたように見えます。これは、表示用の部屋に属するメッセージをフェッチしていないためです。これを行うには、RoomsController showメソッドで、部屋に属するすべてのメッセージをフェッチする変数を追加し、インデックスページで、フェッチされたメッセージをレンダリングします。また、メッセージの送信後にメッセージフォームがクリアされないこともわかります。これは、今後の刺激で処理されます。

#in the show method of app/controllers/rooms_controller.rb
@messages = @single_room.messages

#within the div with id of 'messages'
  <%= render @messages %>

これで、各部屋の入り口にメッセージが読み込まれます。

現在のユーザーのメッセージを右に、他のユーザーのメッセージを左に揃えて、これをより見やすくする必要があります。これを実現する最も簡単な方法は、条件message.user == current_userに基づいてクラスを割り当てることです。 、ただし、ローカル変数はストリームで使用できません。したがって、ブロードキャストされたメッセージの場合、current_userはありません。 。私たちは何ができる？メッセージ送信者IDに基づいてメッセージコンテナにクラスを割り当ててから、current_userを利用できます。 application.html.erbにスタイルを追加するためのヘルパーメソッド ファイル。このように、現在のユーザーのIDが2の場合、application.html.erbのスタイルタグのクラス .msg-2になります 、これは、メッセージの送信者が現在のユーザーである場合、メッセージの部分的なクラスにも対応します。

#app/views/messages/_message.html.erb
<div class="cont-<%= message.user.id %>">
  <div class="message-box msg-<%= message.user.id %> " >
    <% unless message.room.is_private %>
      <h6 class="name"> <%= message.user.username %> </h6>
    <% end %>
  <%= message.content %>
  </div>
</div>

message-boxを追加します スタイリング：

#app/assets/stylesheets/rooms.scss
.message-box {
  width: fit-content;
  max-width: 40%;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #555555 ;
  padding: 10px
}

application.html.erbのヘッドタグ内 ファイル。

#app/views/layouts/application.html.erb
<style>
  <%= ".msg-#{current_user&.id}" %> {
  background-color: #007bff !important;
  padding: 10px;
  }
  <%= ".cont-#{current_user&.id}" %> {
  display: flex;
  justify-content: flex-end
  }
</style>

!importantを追加します background-colorにタグを付ける 現在のユーザーの背景色を上書きしたいからです。

チャットは次のようになります。

#app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @current_user = current_user
    @rooms = Room.public_rooms
    @users = User.all_except(@current_user)
    @room = Room.new
    @message = Message.new
    @room_name = get_name(@user, @current_user)
    @single_room = Room.where(name: @room_name).first || Room.create_private_room([@user, @current_user], @room_name)
    @messages = @single_room.messages

    render "rooms/index"
  end

  private
  def get_name(user1, user2)
    users = [user1, user2].sort
    "private_#{users[0].id}_#{users[1].id}"
  end
end

rails g model Participant user:references room:references
rails db:migrate

#app/models/room.rb
has_many :participants, dependent: :destroy
after_create_commit { broadcast_if_public }

def broadcast_if_public
  broadcast_append_to "rooms" unless self.is_private
end

def self.create_private_room(users, room_name)
  single_room = Room.create(name: room_name, is_private: true)
  users.each do |user|
    Participant.create(user_id: user.id, room_id: single_room.id )
  end
  single_room
end

#app/models/message.rb
before_create :confirm_participant

def confirm_participant
  if self.room.is_private
    is_participant = Participant.where(user_id: self.user.id, room_id: self.room.id).first
    throw :abort unless is_participant
  end
end

<h4 class="text-center"> <%= @user&.username || @single_room.name %> </h4>

<%= link_to 'Sign Out', signout_path,  :method => :delete %>

bundle add stimulus-rails
rails stimulus:install

//app/javascript/controllers/reset_form_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  reset() {
    this.element.reset()
  }
}

data: { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }

<%= form_with(model: [@single_room ,@message], remote: true, class: "d-flex",
     data: { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }) do |f| %>