Rails5のactioncableでリアルタイムチャットアプリを作っているのですが期待する動作をしません
Rails5のactioncableでリアルタイムチャットアプリを作ってますが期待する動作をしてくれません。
以下はChromeの複数タブから試したものを想定しています。
期待する動作
- ユーザーが文章を投稿
- ブラウザに投稿した文章が投稿日時の新しい順に上から表示される
- 他の閲覧しているユーザーのブラウザにも新規投稿された文章が反映されて投稿日時が新しい順に一覧の最上部に表示される。常に一覧の最上部に最新の投稿が表示される。
現状の動作
- ユーザーが文章を投稿
- 文章を投稿したユーザーのブラウザだけ投稿一覧の投稿日時が新しい順に一覧の最上部に表示され、他の閲覧しているユーザーのブラウザには投稿一覧の最下部に最新の投稿が表示されるようになっている。なお、リロードすると投稿一覧が投稿日時の新しい順に並び変わる
app/controller/rooms_controller.rb に以下のようにorderメソッドを追加しても期待する動作になりませんでした。
class RoomsController < ApplicationController
def show
@messages = Message.all.order(created_at: :desc)
end
end
app/assets/javascripts/channels/room.js
App.room = App.cable.subscriptions.create("RoomChannel", {
connected: function() {
console.log('connected')
// Called when the subscription is ready for use on the server
},
disconnected: function() {
// Called when the subscription has been terminated by the server
},
received: function(message) {
//受け取る側
const messages = document.getElementById('messages')
messages.innerHTML += message
// Called when there's incoming data on the websocket for this channel
},
speak: function(content) {
return this.perform('speak', { message: content});
}
});
document.addEventListener('DOMContentLoaded', function() {
// show.html.erbのinput idを持ってくる
const input = document.getElementById('chat-input')
// show.html.erbのbuntton idを持ってくる
const button = document.getElementById('button')
// クリックされたら値を表示
button.addEventListener('click', function() {
const content = input.value
App.room.speak(content)
input.value = ''
})
})
app/channels/room_channel.rb
class RoomChannel < ApplicationCable::Channel
def subscribed
# stream_from "some_channel"
# ここ必須
stream_from "room_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
def speak(data)
# 送る側
message = Message.create!( content: data['message'] )
template = ApplicationController.renderer.render(partial: 'messages/message', locals: {message: message})
# room.jsのRoomChannelに送る
ActionCable.server.broadcast 'room_channel', template
end
end
以上、宜しくお願い致します。