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

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

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

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

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

1160閲覧

rails6.0 action cableを使ったチャット機能の実装について

dfasdf

総合スコア6

Action Cable

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

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/05/01 01:14

現在、action cableを使ったチャット機能の実装を行なっており、正常に動作しているかを確認するためにテキストに入力された値をenterキーを押したタイミングでアラートとして表示しようとしているのですが、enterキーを押してもアラートが表示されません。こちらを正常にアラートとして表示させるにはどこを修正すればよろしいでしょうか?
最初はjqueryがうまく動作していないのかと思いましたが、他のajaxがしっかりと動作していたので、別の原因が考えられるのですが、自分では見つけることができていない状況ですので、ご教授お願いします。
以下がソースコードになります。

app/javascript/packs/application.js //= require jquery //= require jquery.turbolinks //= require rails-ujs //= require activestorage //= require turbolinks //= require channels //= require bootstrap-sprockets //= require_tree . import "bootstrap"
app/javascript/channels/room_channel..js import consumer from "./consumer" const appRoom = consumer.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) { return alert(data['message']); }, speak: function(message) { return this.perform('speak', { message: message }); } }); /*global $*/ /*global location*/ if(/rooms/.test(location.pathname)) { $(document).on("keydown", "#message", function(e) { if (e.key === "Enter") { appRoom.speak(e.target.value); e.target.value = ''; e.preventDefault(); } }); }
app/channels/room_channel.rb class RoomChannel < ApplicationCable::Channel def subscribed stream_from "room_channel" end def unsubscribed # Any cleanup needed when channel is unsubscribed end def speak(data) ActionCable.server.broadcast 'room_channel', message: data['message'] end end
app/views/rooms/show.html.erb <% provide(:title, "talk") %> <%= render 'shared/talk' %>
app/views/shared/_talk.html.erb <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="room-icon"> <div class="icon"> <% @entries.each do |e| %> <% unless e.user == current_user %> <%= link_to gravatar_for(e.user, size: 50), user_path(e.user) %> <% end %> <% end %> </div> </div> <div class="room"> <% if @messages.present? %> <% @messages.each do |m| %> <% if m.user_id == current_user.id %> <div class="mymessage"> <p><%=safe_join(m.message.split("\n"),tag(:br))%></p> </div> <% else %> <div class="fukidasi"> <div class="icon"> <%= link_to gravatar_for(m.user, size: 50), user_path(m.user) %> </div> <div class="messaging"> <div class="says"> <p><%=safe_join(m.message.split("\n"),tag(:br))%></p> </div> </div> </div> <% end %> <% end %> <% else %> <h3 class="text-center">メッセージはまだありません</h3> <% end %> </div> <div class="message-form"> <%= form_with(model: @message) do |f| %> <%= render 'shared/error_messages', object: f.object %> <%= f.text_area :message, placeholder: "メッセージを入力...", id: "message" %> <%= f.hidden_field :room_id, :value => @room.id %> <br> <%= f.submit "投稿する", class: "btn btn-primary" %> <% end %> </div> </div> </div>

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問