前提・実現したいこと
こちらのサイトを参考にして非同期のチャットアプリを実装出来たのですが、
全て左側に表示されているので、ユーザごとに左右に表示したいと思っています。
https://qiita.com/OgawaNorihiro/items/6d9f85d8e89d1def4f15#usersindexhtmlerb%E3%81%AE%E4%BD%9C%E6%88%90
試したこと
<% if current_user.id == direct_message.user_id %>
<%= direct_message.content %>
<% else %>
<%= direct_message.content %>
<% end %>
上記のように試してみましたが、そうなると非同期ではなくなりました。
再読み込みで表示される。
どなたかご教授していただきたいです。
ruby 2.6.6
rails 5.2.4
下記がコードとなっております。
ほぼコードは参考にしたサイトと変わってないと思います。
よろしくお願いおいします。
class User < ApplicationRecord has_many :entries has_many :direct_messages has_many :rooms, through: :entries end
class DirectMessage < ApplicationRecord belongs_to :user belongs_to :room after_create_commit { DirectMessageBroadcastJob.perform_later self } end
class DirectMessageBroadcastJob < ApplicationJob queue_as :default def perform(direct_message) ActionCable.server.broadcast "room_channel_#{direct_message.room_id}", direct_message: render_direct_message(direct_message) end private def render_direct_message(direct_message) ApplicationController.renderer.render partial: 'direct_messages/direct_message', locals: { direct_message: direct_message } end end
class RoomsController < ApplicationController before_action :authenticate_user! def show @room = Room.find(params[:id]) #present?の戻り値は真偽値。よって、trueの場合、 if Entry.where(:user_id => current_user.id, :room_id => @room.id).present? @direct_messages = @room.direct_messages @entries = @room.entries else redirect_back(fallback_location: root_path) end end def create @room = Room.create(:name => "DM") @entry1 = Entry.create(:room_id => @room.id, :user_id => current_user.id) @entry2 = Entry.create(params.require(:entry).permit(:user_id, :room_id).merge(:room_id => @room.id)) redirect_to room_path(@room.id) end end
views/rooms/show.html.erb <div style="margin-top: 100px; margin-left: 100px;"> <h1>Chat room</h1> <div class="chats-wrapper"> <div class="chats-inside"> <div id="direct_messages" data-room_id="<%= @room.id %>"> <%= render @direct_messages %> </div> </div> <div class="chatForm"> <div class="form-message"> <form> <input type="text" id="chat-input" data-behavior="room_speaker"> </form> </div> </div> </div>
direct_messages/direct_message.html.erb <div class="each-say"> <%= direct_message.content %> <%= direct_message.user.nickname %> </div>
class RoomChannel < ApplicationCable::Channel def subscribed # stream_from "some_channel" stream_from "room_channel_#{params['room']}" end def unsubscribed # Any cleanup needed when channel is unsubscribed end def speak(data) DirectMessage.create! content: data['direct_message'], user_id: current_user.id, room_id: params['room'] end end
javascripts/channels/room.coffee document.addEventListener 'turbolinks:load', -> App.room = App.cable.subscriptions.create { channel: "RoomChannel", room: $('#direct_messages').data('room_id') }, connected: -> disconnected: -> received: (data) -> $('#direct_messages').append data['direct_message'] speak: (direct_message) -> @perform 'speak', direct_message: direct_message $('#chat-input').on 'keypress', (event) -> if event.keyCode is 13 App.room.speak event.target.value event.target.value = '' event.preventDefault()
あなたの回答
tips
プレビュー