0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Action Cableでグループチャット機能と削除機能、スクロール機能を実装したい(その1)

Posted at

#1初めまして
プログラミングというものをやり始めて、3ヶ月というど素人ですが、今回ポートフォリオで実装したaction cableの上記機能を、復習がてらもう一度作って行きたいと思います。
Qiita初投稿&素人投稿なので、ガバガバな部分もありますが、一つお願いいたします。
#2作成バージョン
使用環境
ruby 2.6.3
rails 5.2
#3土台を作りもす
今回は、ユーザーというテーブルと、ユーザーが入る為のルームを作成し、そこに中間テーブルのチャットを作って行きたいと思います。
deviseでさっくり作ります。bundle installした後に、

rails g devise:install
rails g devise User

でユーザーモデルを作成します。
続いて、ルームと中間テーブルのチャットモデルを作成します。

rails g model Room
rails g model Chat

今回は、ルームに名前のカラムと、チャットの方には外部キーのルームとユーザーIDを指定して、実際コメントを保存するメッセージカラムを用意します。

class CreateRooms < ActiveRecord::Migration[5.2]
  def change
    create_table :rooms do |t|
      t.string :name #ここのカラムはお好みで
      t.timestamps
    end
  end
end
  def change
    create_table :chats do |t|
      t.integer :user_id, null: false
      t.integer :room_id, null: false
      t.text :message
      t.timestamps
    end
  end
end

最後に忘れがちなリレーションを行って土台作りは完了です。

user.rb
has_many :chats, dependent: :destroy
room.rb
has_many :chats, dependent: :destroy
chat.rb
class Chat < ApplicationRecord
  belongs_to :user
  belongs_to :room
end

#4チャット機能の準備
土台は出来たので、次はactioncableでのチャットを行う際のコントローラーやviewの作成を行います。

rails g controller rooms

作成したコントローラーに

rooms_controller.rb
class RoomsController < ApplicationController

  def index
  @rooms = Room.all
  @room = Room.new
  end

  def create
    room = Room.new(room_params)
    room.save
    redirect_to rooms_path
  end
  
  def show
   @room = Room.find(params[:id])
   @chats = @room.chats
  end

private
  def room_params
    params.require(:room).permit(:name)
  end

end

viewには

rooms/index.html.erb
<% @rooms.each do |room| %>
<%= link_to room_path(room) do %>
<%= room.name %>
<%= room.id%>
<% end %>
<% end %>

<%= form_with model: @room, local:true do |f| %>
<%= f.hidden_field :name, :value => "ChatRoom" %>
<%= f.submit "作成"%>
<% end %>

を記入して準備はほぼ終わりです。

#5 その2へ続きます
非常に長くなってしまったので、その2に続きます。
こんな駄文でよければ、その2も見ていただけるとありがたいです。

クソお世話になった記事(ほぼこれを見ながら実装しました)
https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?