rails　チャット機能　リロードしないと表示されない

チャット機能を実装してみたのですが、リロードをしないと表示されません。仕組みがまだいまいち理解できてないのでどこが悪かったのか分かりません。ボタンをクリックしたらすぐに表示されるようにするには、どうしたらいいのでしょうか。ご教授ください。よろしくお願いします。

ruby
1class RoomChannel < ApplicationCable::Channel
2  def subscribed
3  end
4
5  def unsubscribed
6  end
7
8  def speak(data)
9    Message.create!(content: data['message'])
10    ActionCable.server.broadcast 'room_channel',data['message']
11  end
12end
13

ruby
1class RoomsController < ApplicationController
2  def show
3    @messages = Message.all
4  end
5end
6

ruby
1App.room = App.cable.subscriptions.create("RoomChannel", {
2  connected: function() {
3    console.log('connected')
4  },
5
6  disconnected: function() {
7    
8  },
9
10  received: function(message) {
11    alert('555')
12    const messages = document.getElementById('messages')
13    messages.innerHTML += '<p>${message}</p>'
14  },
15
16  speak: function(content) {
17    return this.perform('speak',{message: content});
18  }
19});
20
21
22  document.addEventListener('DOMContentLoaded',function(){
23    const input = document.getElementById('chat-input')
24    const button = document.getElementById('button')
25    button.addEventListener('click',function(){
26      const content = input.value
27      App.room.speak(content)
28      input.value = ""
29    })
30
31  })
32
33

log
1Finished "/cable/" [WebSocket] for ::1 at 2020-01-29 22:18:14 +0900
2Started GET "/cable" for ::1 at 2020-01-29 22:18:14 +0900
3Started GET "/cable/" [WebSocket] for ::1 at 2020-01-29 22:18:14 +0900
4Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
5RoomChannel is transmitting the subscription confirmation
6RoomChannel#speak({"message"=>"888"})
7   (0.2ms)  begin transaction     
8  ↳ app/channels/room_channel.rb:9
9  Message Create (5.3ms)  INSERT INTO "messages" ("content", "created_at", "updated_at") VALUES (?, ?, ?)  [["content", "888"], ["created_at", "2020-01-29 13:23:04.336544"], ["updated_at", "2020-01-29 13:23:04.336544"]]
10  ↳ app/channels/room_channel.rb:9
11   (108.1ms)  commit transaction
12  ↳ app/channels/room_channel.rb:9
13[ActionCable] Broadcasting to room_channel: "888"
14Started GET "/" for ::1 at 2020-01-29 22:23:10 +0900
15Processing by RoomsController#show as HTML
16  Rendering rooms/show.html.erb within layouts/application
17  Message Load (0.4ms)  SELECT "messages".* FROM "messages"
18  ↳ app/views/rooms/show.html.erb:5
19  Rendered collection of messages/_message.html.erb [13 times] (0.8ms)
20  Rendered rooms/show.html.erb within layouts/application (7.7ms)     
21Completed 200 OK in 177ms (Views: 137.5ms | ActiveRecord: 0.4ms)
22
23
24Finished "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:10 +0900
25Started GET "/cable" for ::1 at 2020-01-29 22:23:10 +0900
26Started GET "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:11 +0900
27Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
28RoomChannel is transmitting the subscription confirmation
29Started GET "/" for ::1 at 2020-01-29 22:23:13 +0900
30Processing by RoomsController#show as HTML
31  Rendering rooms/show.html.erb within layouts/application
32  Message Load (0.6ms)  SELECT "messages".* FROM "messages"
33  ↳ app/views/rooms/show.html.erb:5
34  Rendered collection of messages/_message.html.erb [13 times] (0.8ms)
35  Rendered rooms/show.html.erb within layouts/application (217.2ms)
36Completed 200 OK in 327ms (Views: 321.7ms | ActiveRecord: 0.6ms)
37
38
39Finished "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:14 +0900
40Started GET "/cable" for ::1 at 2020-01-29 22:23:14 +0900
41Started GET "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:14 +0900
42Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
43RoomChannel is transmitting the subscription confirmation