2
3

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へのidの受け渡し

Last updated at Posted at 2020-01-28

Action Cableの設定でつまずいたことをする際につまずいたので備忘録も兼ねて共有します。
ご指摘やアドバイスがありましたらコメントよろしくお願いします。

##わからなかったこと
channel.rbspeak関数が実行した際に、user_id と chatroom_id を含むテーブルを作成したいが、channel.rbで id を取得する仕方がわからない

##コードの説明

###html.erbですること

1.属性値としてdata_userdata_room を設定する
2.その値としてcurrent_user.id@chatroom.id を与える
(current_userにはログイン中のユーザー情報。@chatroomには、現在いるチャットページの情報が入っています。)

html.erb
 <div>
   <textarea id="chat_input" data_user="<%= current_user.id %>" data_room="<%= @chatroom.id %>"></textarea>
   <button id="chat_button">送信</button>
 </div>

###chatroom.coffeeですること

  1. chat_inputというidであるものを探す
  2. 1が見つかると以下を実行
  3. 属性値が data_user, data_room のものを取得
  4. chat_buttonというボタンをクリック
  5. App.chatroom.speakの引数にid情報を渡す
  6. 5で受け取ったものでchatroom_channel.rbのspeak関数を実行
chatroom.coffee
# クライアントサイドの処理を受け持つチャンネ
App.chatroom = App.cable.subscriptions.create "ChatroomChannel",
  #(省略)

  received: (data) ->
    $('#posts').append data['message']


  speak: (content, data_user, data_room) ->
    @perform 'speak', message: content, user_id: data_user, room_id: data_room


document.addEventListener 'DOMContentLoaded', ->
  input = document.getElementById('chat_input') 
  if input?
    data_user = input.getAttribute("data_user")
    data_room = input.getAttribute("data_room")
    button = document.getElementById('chat_button')
    button.addEventListener 'click', ->
      content = input.value
      App.chatroom.speak(content, data_user, data_room)
      input.value = ''
      return
    return

###chatroom_channel.rbですること

  1. dataにハッシュでchatroom.coffeeでの値が入っているので data['キー'] を指定し取得し、Post.create!を実行
chatroom_channel.rb
#(省略)
  def speak(data)
    message = Post.create! content: data['message'], user_id: data['user_id'], chatroom_id: data['room_id']
    template = ApplicationController.renderer.render(partial: 'posts/post', locals: { post: message, current_user: current_user })
    ActionCable.server.broadcast 'chatroom_channel', message: template
  end

以上でuser_id と chatroom_id を含んだテーブルを作成することができます。
是非参考にしてみてください。

##関連記事
Action Cableの設定でつまずいたこと
DOMContentLoadedからturbolinks:loadへ変更

##参考記事
Rails 5 Action Cable メッセージとルームを紐付ける。

2
3
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
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?