rails5でチャット機能を実装したい。

前提・実現したいこと

rails5 + dockerでアプリケーション開発をしています。
action cableを使用してチャット機能を追加したいのですが、サーバー側とフロント側を接続できず困っています。
rails g channel chat_room speakコマンドでchannelを作成しました。
接続確認のために、devツールで App.chat_room.speak()を実行すると以下のエラーがでます。
また、binding.pryを使用して接続確認してみましたが、やはりつながっていないようです。

発生している問題・エラーメッセージ

Uncaught ReferenceError: App is not defined

該当のソースコード

chat_room_channel.rb

class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "chat_room_channel"
    binding.pry
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak
  end
end

chat_room.js

App.chat = App.cable.subscriptions.create("ChatRoomChannel", {
  connected: function() {
    //called when the subscription is ready for use on the server
    console.log(777);
  },

  disconnected: function() {
    //called when the subscription has been terminated by the server
  },

  received: function(data) {},
});

cable.js

// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();
}.call(this));

route.rb(一部)