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