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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Action Cable

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

Ruby on Rails 5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

563閲覧

ActionCable リアルタイムチャットの実装 入力フォームからの送信ができない

kentahayashi

総合スコア19

Action Cable

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

Ruby on Rails 5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/10/19 14:40

編集2018/10/26 00:01

前提・実現したいこと

ruby on rails でチャット機能を作っています。
javaのコンソールでApp.room.speak("test")とうてばtestと表示されるようになったのですが、フォームから送信するときに、一度javaのコンソールで先ほどのようにメッセージを送らないとフォームから文字を送信することができません。更新ボタンなどを押してから、フォームからの送信を行っても何も起きません。
なんでも良いので気付かれた点や気になった点がございましたら、アドバイスをよろしくお願いします。

該当のソースコード

//channels/room.coffee App.room = App.cable.subscriptions.create "RoomChannel", connected: -> # Called when the subscription is ready for use on the server disconnected: -> # Called when the subscription has been terminated by the server received: (data) -> #alert data['message'] $('#messages').append data['message'] # Called when there's incoming data on the websocket for this channel 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()
//room_channel.rb class RoomChannel < ApplicationCable::Channel def subscribed stream_from "room_channel" ActionCable.server.broadcast 'room_channel', message: data['message'] end def unsubscribed # Any cleanup needed when channel is unsubscribed end def speak(data) Message.create! content: data['message'] end end
//models/message.rb class Message < ApplicationRecord after_create_commit { MessageBroadcastJob.perform_later self } end
//jobs/message_broadcast_job.rb class MessageBroadcastJob < ApplicationJob queue_as :default def perform(message) ActionCable.server.broadcast 'room_channel', message: render_message(message) end private def render_message(message) ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message }) end # Do something later end
//show.html.erb <h1>Chat room</h1> <div id = "messages"> <%= render @messages %> </div> <form> <label>Say something:</label><br> <input type="text" data-behavior="room_speaker" > </form>
//application.js //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree . //= require jquery //= require jquery_ujs //= require jquery.turbolinks
//Gemfile gem 'jquery-rails'#追記 gem 'jquery-turbolinks'#追記
//cable.js (function() { this.App || (this.App = {}); App.cable = ActionCable.createConsumer(); }).call(this);
//models/message.rb class Message < ApplicationRecord after_create_commit { MessageBroadcastJob.perform_later self } validates :content, {presence: true} end

試したこと

・サーバーの再起動
bundle install

補足情報(FW/ツールのバージョンなど)

ruby 2.2.3
rails 5.2.1

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

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

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

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

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

guest

回答1

0

ベストアンサー

coffee

1# channels/room.coffee 2 3# ページのロード時に有効にするために必要では? 4document.addEventListener 'turbolinks:load', -> 5 6 App.room = App.cable.subscriptions.create "RoomChannel", 7 connected: -> 8 # Called when the subscription is ready for use on the server 9 10 disconnected: -> 11 # Called when the subscription has been terminated by the server 12 13 received: (data) -> 14 #alert data['message'] 15 $('#messages').append data['message'] 16 # Called when there's incoming data on the websocket for this channel 17 18 speak: (message) -> 19 @perform 'speak', message: message 20 21 $ (document).on 'keypress', '[data-behavior~=room_speaker]', (event) -> 22 if event.keyCode is 13 # return = send 23 App.room.speak event.target.value 24 event.target.value = '' 25 event.preventDefault()

僕も以前チャットアプリに挑戦したんですが、手探りだったので苦労しました。
Qiitaに投稿してあるのでよければ参考にしてみてください。
【Rails5.2】ActionCableとDeviseの欲張りセットでリアルタイムチャット作成
ただあとで詳しく説明を書こう書こうと思ったままコード貼ったっきりあまり詳しく説明を書けてないので
その辺りは記事内の参考にした記事の説明をみてもらえればと思います...。
あと、ユーザー認証にDeviseを使ったので、その部分だけ無視してもらえれば...

投稿2018/11/02 04:36

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kentahayashi

2018/11/02 05:50

回答ありがとうございました!! 本当に助かりました!!! 本当にありがとうございました!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問