Action Cableの設定でつまずいたことをする際につまずいたので備忘録も兼ねて共有します。
ご指摘やアドバイスがありましたらコメントよろしくお願いします。
##わからなかったこと
channel.rb
のspeak関数
が実行した際に、user_id と chatroom_id を含むテーブルを作成したいが、channel.rb
で id を取得する仕方がわからない
##コードの説明
###html.erbですること
1.属性値としてdata_user
と data_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ですること
- chat_inputというidであるものを探す
- 1が見つかると以下を実行
- 属性値が data_user, data_room のものを取得
- chat_buttonというボタンをクリック
- App.chatroom.speakの引数にid情報を渡す
- 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ですること
- 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へ変更