現在、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>
あなたの回答
tips
プレビュー