質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.60%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 270

tori315

score 21

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

class RoomChannel < ApplicationCable::Channel
  def subscribed
  end

  def unsubscribed
  end

  def speak(data)
    Message.create!(content: data['message'])
    ActionCable.server.broadcast 'room_channel',data['message']
  end
end
class RoomsController < ApplicationController
  def show
    @messages = Message.all
  end
end
App.room = App.cable.subscriptions.create("RoomChannel", {
  connected: function() {
    console.log('connected')
  },

  disconnected: function() {

  },

  received: function(message) {
    alert('555')
    const messages = document.getElementById('messages')
    messages.innerHTML += '<p>${message}</p>'
  },

  speak: function(content) {
    return this.perform('speak',{message: content});
  }
});


  document.addEventListener('DOMContentLoaded',function(){
    const input = document.getElementById('chat-input')
    const button = document.getElementById('button')
    button.addEventListener('click',function(){
      const content = input.value
      App.room.speak(content)
      input.value = ""
    })

  })
Finished "/cable/" [WebSocket] for ::1 at 2020-01-29 22:18:14 +0900
Started GET "/cable" for ::1 at 2020-01-29 22:18:14 +0900
Started GET "/cable/" [WebSocket] for ::1 at 2020-01-29 22:18:14 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
RoomChannel#speak({"message"=>"888"})
   (0.2ms)  begin transaction     
  ↳ app/channels/room_channel.rb: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"]]
  ↳ app/channels/room_channel.rb:9
   (108.1ms)  commit transaction
  ↳ app/channels/room_channel.rb:9
[ActionCable] Broadcasting to room_channel: "888"
Started GET "/" for ::1 at 2020-01-29 22:23:10 +0900
Processing by RoomsController#show as HTML
  Rendering rooms/show.html.erb within layouts/application
  Message Load (0.4ms)  SELECT "messages".* FROM "messages"
  ↳ app/views/rooms/show.html.erb:5
  Rendered collection of messages/_message.html.erb [13 times] (0.8ms)
  Rendered rooms/show.html.erb within layouts/application (7.7ms)     
Completed 200 OK in 177ms (Views: 137.5ms | ActiveRecord: 0.4ms)


Finished "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:10 +0900
Started GET "/cable" for ::1 at 2020-01-29 22:23:10 +0900
Started GET "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:11 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
Started GET "/" for ::1 at 2020-01-29 22:23:13 +0900
Processing by RoomsController#show as HTML
  Rendering rooms/show.html.erb within layouts/application
  Message Load (0.6ms)  SELECT "messages".* FROM "messages"
  ↳ app/views/rooms/show.html.erb:5
  Rendered collection of messages/_message.html.erb [13 times] (0.8ms)
  Rendered rooms/show.html.erb within layouts/application (217.2ms)
Completed 200 OK in 327ms (Views: 321.7ms | ActiveRecord: 0.6ms)


Finished "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:14 +0900
Started GET "/cable" for ::1 at 2020-01-29 22:23:14 +0900
Started GET "/cable/" [WebSocket] for ::1 at 2020-01-29 22:23:14 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る