🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

1925閲覧

[rails6] ActionCable データの受け渡しが上手く行かない。

Ayustak

総合スコア30

Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/11/28 12:03

編集2020/11/29 00:45

https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27
を参考にしながらチャット機能を実装しようとしています。

room_channel.jsのspeak → message_broadcast_job.rbのperform(message)にデータが渡らない(speakのログは表示されるが、performのbyebugが実行されない)状況です。
参考記事と違う点はRoomモデルがRecruitモデルになっている点だけです。何かおかしな点がありましたら教えて頂けると幸いです。

※11/29追記
stream_from "room_channel_#{params['recruit']}"
ここでparams['recruit']が取得できておらず、ログにてRecruit(参考記事のRoom)が無いとのバリデーションエラーが発生していたので確認中です。

//room_channel.js import consumer from "./consumer"; $(function() { const chatChannel = consumer.subscriptions.create({ channel: 'RoomChannel', recruit: $('#messages').data('recruit_id') }, { connected() { console.log("connected"); }, disconnected() { }, received: function(data) { console.log("received"); return $('#messages').append(data['message']); }, speak: function(message) { console.log("message : " + message); return this.perform('speak', { message: message }); } }); $(document).on('keypress', '[data-behavior~=room_speaker]', function(event) { if (event.keyCode === 13) { console.log('enter : ' + event.target.value); chatChannel.speak(event.target.value); event.target.value = ''; return event.preventDefault(); } }); });
// room_channel.rb class RoomChannel < ApplicationCable::Channel def subscribed stream_from "room_channel_#{params['recruit']}" end def unsubscribed # Any cleanup needed when channel is unsubscribed end def speak(data) // messageを受け取り、room_channelのreceivedにブロードキャストする Message.create! content: data['message'], user_id: current_user.id, recruit_id: params['recruit'] byebug end end
# message_broadcast_job.rb class MessageBroadcastJob < ApplicationJob queue_as :default def perform(message) ActionCable.server.broadcast "room_channel_#{message.recruit_id}", message: render_message(message) byebug end private def render_message(message) ApplicationController.renderer.render partial: 'messages/message', locals: { message: message } end end
# message.rb class Message < ApplicationRecord belongs_to :recruit belongs_to :user validates :content, presence: true, length: { maximum: 200 } # createの後にコミットする { MessageBroadcastJobのperformを遅延実行 引数はself } after_create_commit { MessageBroadcastJob.perform_later self } end
rooms/new.html.erb <%= text_field_tag :content, nil, class: "form-control", data: { behavior: 'room_speaker'} %>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

<div id="messages" data-recruit_id="<%= @recruit.id %>" ><%= render @messages %></div>

viewにて
data-recruit_id="<%= @recruit.id %>"
が抜けていたため、recruit_idが取得できていませんでした。

投稿2020/11/29 01:26

Ayustak

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問