Rails5のactioncableでリアルタイムチャットアプリを作ってますが期待する動作をしてくれません。
以下はChromeの複数タブから試したものを想定しています。

期待する動作

  1. ユーザーが文章を投稿
  2. ブラウザに投稿した文章が投稿日時の新しい順に上から表示される
  3. 他の閲覧しているユーザーのブラウザにも新規投稿された文章が反映されて投稿日時が新しい順に一覧の最上部に表示される。常に一覧の最上部に最新の投稿が表示される。

現状の動作

  1. ユーザーが文章を投稿
  2. 文章を投稿したユーザーのブラウザだけ投稿一覧の投稿日時が新しい順に一覧の最上部に表示され、他の閲覧しているユーザーのブラウザには投稿一覧の最下部に最新の投稿が表示されるようになっている。なお、リロードすると投稿一覧が投稿日時の新しい順に並び変わる

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

詳しいソースはこちらをご覧下さい。

以上、宜しくお願い致します。