railsでbroadcastしたが、その際にjsのreceivedが動かない

Question

rails5を使い、簡単なチャットアプリを作ろうとしています。

しかし、以下のソースで
Chromeの検証ツールコンソールにて
「App.room.speak()」
を実行し、trueとでたものの、alertが表示されません。
これはreceivedが実行されていないという事ですが、なぜなのでしょうか？

#room.js
App.room = App.cable.subscriptions.create("RoomChannel", {
  connected: function() {
    console.log('conected');
    // 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(data) {
    alert(data);
    // Called when there's incoming data on the websocket for this channel
  },

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

class RoomChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
  	Message.create!(content: data['message'])
  	ActionCable.server.broadcast 'room_channel', data['message']
  end
end

ログには下記のように出力されています。

Started GET "/cable" for 127.0.0.1 at 2019-01-21 20:56:19 +0900
Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2019-01-21 20:56:19 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
Started GET "/cable" for 127.0.0.1 at 2019-01-21 20:56:25 +0900
Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2019-01-21 20:56:25 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
Started GET "/cable" for 127.0.0.1 at 2019-01-21 20:56:25 +0900
Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2019-01-21 20:56:25 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
Started GET "/cable" for 127.0.0.1 at 2019-01-21 20:56:27 +0900
Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2019-01-21 20:56:27 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
RoomChannel#speak({"message"=>"test now"})
   (0.8ms)  BEGIN
  ↳ app/channels/room_channel.rb:11
  Message Create (11.2ms)  INSERT INTO `messages` (`content`, `created_at`, `updated_at`) VALUES ('test now', '2019-01-21 11:56:31', '2019-01-21 11:56:31')
  ↳ app/channels/room_channel.rb:11
   (51.5ms)  COMMIT
  ↳ app/channels/room_channel.rb:11
[ActionCable] Broadcasting to room_channel: "test now"

また、「true」が出て少し時間が経ってから下記エラーが検証ツールコンソールにて出てきました。
これがalertが出ない原因なのでしょうか？

> App.room.speak()
< true
Error in event handler for (unknown): TypeError: Cannot read property 'state' of undefined
    at CSRecorder.onQueryStateCompleted (chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/content_scripts/recorder.js:106:18)

ちなみに、本件は下記youtubeの動画の通り進めてきました。
「28:37」のとこで私はalertが出ずに詰まっております。
https://youtu.be/WCsgcp5dg7M

Answer 1

subscribedのコメントアウトを外し、
room_channelをストリーミングしてください。

以前ActionCableの記事を書いたので参考にしてください

Comments

[kozica]

無事うまく行きました！
ありがとうございます！(T ^ T)