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

Question

ご覧いただきありがとうございます。
こちらの記事を参考に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>

Comments

[winterboum]

何をしたらそのエラーが起きたのか、
と
modelのfileも載せて下さい。　validationエラーになっているのでモデルの情報も必要です

[p-plus]

ありがとうございます、追記させていただきました！

[winterboum]

チャットルームにあるテキストフォーム　とはどのファイルですか？

[p-plus]

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

[winterboum]

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

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

[p-plus]

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

Answer 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

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

Comments

[p-plus]

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

[p-plus]

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