質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

Railsのリアルタイムチャットにルーム機能を追加したいけど、Roomのidが指定できない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 566

p-plus

score 43

ご覧いただきありがとうございます。
こちらの記事を参考にcoffeescriptとactioncableを使って部屋なしのリアルタイムチャットを作りました。
その後こちらの記事を参考にしながらルーム機能を追加しようとしたのですが
room_channel.rbやroom.coffee周りの書き方がわからず詰まっています。(参考サイトはjavascriptを使っているというのもあり・・・)

railsコンソールから下記のようにしてメッセージを入れ、表示されることは確認したので、モデル側ではないのかなと思っています。
room.coffeeにroomのidとcurrent_userのidが入るようになればいけるかと思うのですが・・・

Message.create!( content: 'H22222ello' ,user_id:1, room_id:1)

エラーメッセージ

RoomChannel#speak({"message"=>"dfafadfa"})
   (0.1ms)  BEGIN
  ↳ app/channels/room_channel.rb:11
  User Load (0.3ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
  ↳ app/channels/room_channel.rb:11
   (0.1ms)  ROLLBACK
  ↳ app/channels/room_channel.rb:11
Could not execute command from ({"command"=>"message", "identifier"=>"{\"channel\":\"RoomChannel\"}", "data"=>"{\"message\":\"dfafadfa\",\"action\":\"speak\"}"}) [ActiveRecord::RecordInvalid - バリデーションに失敗しました: Roomを入力してください]: /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/validations.rb:80:in `raise_validation_error' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/validations.rb:52:in `save!' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/transactions.rb:315:in `block in save!' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/transactions.rb:387:in `block in with_transaction_returning_status' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/connection_adapters/abstract/database_statements.rb:267:in `block in transaction'

対象だと思うコード

app/channels/room_channel.rb
RoomChannel#speak({"message"=>"dfafadfa"})
   (0.1ms)  BEGIN
  ↳ app/channels/room_channel.rb:11
  User Load (0.3ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
  ↳ app/channels/room_channel.rb:11
   (0.1ms)  ROLLBACK
  ↳ app/channels/room_channel.rb:11
Could not execute command from ({"command"=>"message", "identifier"=>"{\"channel\":\"RoomChannel\"}", "data"=>"{\"message\":\"dfafadfa\",\"action\":\"speak\"}"}) [ActiveRecord::RecordInvalid - バリデーションに失敗しました: Roomを入力してください]: /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/validations.rb:80:in `raise_validation_error' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/validations.rb:52:in `save!' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/transactions.rb:315:in `block in save!' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/transactions.rb:387:in `block in with_transaction_returning_status' | /home/ec2-user/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.3/lib/active_record/connection_adapters/abstract/database_statements.rb:267:in `block in transaction'
app/assets/javascripts/channels/room.coffee
App.room = App.cable.subscriptions.create "RoomChannel",

  connected: ->
    # Called when the subscription is ready for use on the server
    $('body').addClass('already');

  disconnected: ->
    # Called when the subscription has been terminated by the server


  received: (data) ->
    $('#messages').append data['message']
    $(window).scrollTop( $("#messages")[0].scrollHeight );

  speak: (message) ->
    @perform 'speak', message: message

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
  if event.keyCode is 13 # return = send

    App.room.speak event.target.value
    event.target.value = ''
    event.preventDefault()  
app/channels/application_cable/connection.rb
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private

      def find_verified_user
        verified_user = User.find_by(id: env['warden'].user.id)
        return reject_unauthorized_connection unless verified_user
        verified_user
      end
  end
end
app/jobs/message_broadcast_job.rb
class MessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    ActionCable.server.broadcast "room_channel_#{message.room_id}", message: render_message(message)
  end

  private
    def render_message(message)
      ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message })
    end
end
app/controllers/rooms_controller.rb
class RoomsController < ApplicationController
      before_action :authenticate_user!

  def index
    @rooms = Room.all.order(:id)
  end      

  def show
    @room = Room.find(params[:id])
    @messages = @room.messages
  end
end

ご確認よろしくおねがいいたします。

追記です

チャットルームにあるテキストフォームから投稿しようとした際に上記のエラーメッセージが出ます。
view.html.erbも追記しておきます

app/models/message.rb
class Message < ApplicationRecord
   after_create_commit { MessageBroadcastJob.perform_later self }
     belongs_to :user
  belongs_to :room
end
db/schema.rbから抜粋
  create_table "messages", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
    t.text "content"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.bigint "user_id", null: false
    t.bigint "room_id", null: false
    t.index ["room_id"], name: "index_messages_on_room_id"
    t.index ["user_id"], name: "index_messages_on_user_id"
  end

  create_table "rooms", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

  create_table "users", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "name", default: "", null: false
    t.text "profile"
    t.string "thumb"
    t.string "image"
    t.boolean "admin", default: false
    t.index ["email"], name: "index_users_on_email", unique: true
    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
  end

  add_foreign_key "messages", "rooms"
  add_foreign_key "messages", "users"
app/views/rooms/show.html.erb
<h1>Chat room</h1>

<div id='messages' data-room_id="<%= @room.id %>">
  <%= render @messages %>
</div>
<form>
  <label>Say something:</label><br>
  <input type="text" data-behavior="room_speaker">
</form>
app/views/messages/_message.html.erb
<div class="message">
  <p><%= "#{message.user.email}" %>:<%= time_ago_in_words(message.created_at)+"前" %>:<%= message.content %></p>
</div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • p-plus

    2019/10/14 20:11

    show.html.erbにあるこちらです
    <input type="text" data-behavior="room_speaker">

    キャンセル

  • winterboum

    2019/10/14 20:24

    なるほど、$(document).on 'keypress', で処理してるんですね。
    ここで <div id='messages' data-room_id="<%= @room.id %>"> にあるroom.idを一緒に渡せば良いのだと思いますが、JS得意でないので私には難しそう。

    なお、「room.coffeeにroomのidとcurrent_userのidが入るようになればいけるかと思うのですが」というのは正しいと思います。

    キャンセル

  • p-plus

    2019/10/14 20:41

    そうですか・・・!
    ありがとうございます!
    方向性がわかっただけでもありがたいです、もう少し自分でも頑張ってみようかと思います!

    キャンセル

回答 1

checkベストアンサー

+1

Qiitaにコメントしていただきありがとうございます。
ルームIDについてですが、データの登録時点ではparams['room']から取得しています。
データを作成している箇所は以下にあたりますので参考にしてください。

# app/channels/room_channel.rb
def speak(data)
  Message.create! content: data['message'], user_id: current_user.id, room_id: params['room']
end

記事で言うとここapp/channels/room_channel.rbに当たる箇所です。

追記

<div id='messages' data-room_id="<%= @room.id %>">

room_idはメッセージ登録後にブロードキャストしたHTMLをレンダリングする際、
どのroom_idに表示させるかの判断に利用します。コードで言えば以下の部分です。

// app/javascript/channels/room_channel.js
const chatChannel = consumer.subscriptions.create({ channel: 'RoomChannel', room: $('#messages').data('room_id') }, {
// ...
  received: function(data) {
    return $('#messages').append(data['message']);
  },

もちろん$('#messages').data('room_id')をそのままroom_channel.rbに渡してもいいです。

speak: function(message) {
  return this.perform('speak', {
    message: message, room_id: $('#messages').data('room_id')
  });
}
def speak(data)
  Message.create! content: data['message'], user_id: current_user.id, room_id: data['room_id']
end


動作確認してないですが、こんな感じですかね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/14 23:24

    ありがとうございます!参考にさせていただきます!

    キャンセル

  • 2019/10/15 19:29

    リアルタイム更新はされなくなってしまいましたが、
    フォームから投稿はできるようになりました。
    質問の趣旨はクリアされたので解決済みとさせていただきます!
    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る