常連

rails6

### 発生している問題・エラーメッセージ

[https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7](https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7)
[https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27](https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27)
上記を参考にしながらグループチャット機能を実装しようとしています。

create.js.erbファイルを作成したところ、create実行時に下記のエラーが出て先に進みません。
![イメージ説明](f8f8ad778c4fb6bd948fe13e3b2a7ec4.jpeg)
### 該当のソースコード
message.rbのselfに正常にデータが渡っている所までは確認できました。
```
routes.rb
 resources :recruits do
    resources :rooms, only: [:index, :create]
  end
```

```
index.html.erb
<%= form_with(model: @message, url: recruit_rooms_path, method: :post, class: 'needs-validation', html: {novalidate: false}) do |f| %>
  <div class="input-group">
    <%= f.text_field :content, class: "form-control", id: "message_content", placeholder: "メッセージを入力(200文字以内)" %>
    <%= f.submit "送信", class: "btn btn-primary input-group-append", id: "message-button" %>
  </div>
<% end %>
```

```
room_channel.rb
  def subscribed
    stream_from "room_channel_#{params['recruit']}"
  end
```
```
/*global $ messageContainer*/
import consumer from "./consumer";

document.addEventListener('turbolinks:load', () => { // js.erb 内で使用できるように変数を定義しておく
  window.messageContainer = document.getElementById('message-container');
  if (messageContainer === null) { // 以下のプログラムが他のページで動作しないようにしておく
      return;
  }

  consumer.subscriptions.create({ channel: 'RoomChannel', recruit: $('#message-container').data('recruit_id') }, {
    connected() {
      console.log("connected");
    },
      
    disconnected() {
    },
    
  // room_channel.rbでブロードキャストされたものがここに届く
    received: function(data) {
      console.log("received");
      // サーバー側から受け取ったHTMLを一番最後に加える
      messageContainer.insertAdjacentHTML('beforeend', data['message']);
    }
  });
});
```

```
rooms_controller.rb
def index
    @recruit  = Recruit.find(params[:recruit_id])
    @messages = Message.where(recruit_id: @recruit).includes(:user, :recruit).order(created_at: :desc).page(params[:page]).per(30)
    @message  = Message.new
    略
end

def create
  @message = current_user.messages.new(message_params)
  @message.recruit = Recruit.find(params[:recruit_id])
  @message.save
  ActionCable.server.broadcast 'room_channel', message: @message.template
end
```

```
message.rb
  belongs_to :recruit
  belongs_to :user
  
  validates :content,  presence: true, length: { maximum: 200 }
  
  # 投稿されたメッセージをメッセージ用の部分テンプレートでHTMLに変換
  def template
    ApplicationController.renderer.render partial: 'messages/message', locals: { message: self }
  end
```

```
create.js.erb
// フォームに入力した文字列を消去
console.log('create.js.erb');
document.getElementById('message_content').value = '';
```
#
create.html.erbファイルを作成すると、エラーは出なくなりますが何もないcreateページに移動します。
どうすればjs.erbが読み込めるのか、それとも他が原因なのか分かりません。アドバイス頂けると助かります

[Rails]チャット機能実装中 js.erbファイルが読み込めない

### 前提・実現したいこと
Ruby on Rails でチャットアプリを開発しています。
development環境では問題なく動作するのですが、production環境ではエラーが発生してしまいます。
おそらくサーバーなどの問題かと思われます。
なんでも良いのでコメントいただけると嬉しいです。よろしくお願いいたします。

nginxやunicornのログにエラーは出ていません。

開発環境時はpumaを使用していましたので半ば自動的に動作できていたのだと思います。

どうもActionCableが動作できていないようです。そのほかは動作しております。

### 発生している問題・エラーメッセージ
google cromeコンソール
```
WebSocket connection to 'wss://ドメイン/cable' failed: Error during WebSocket handshake: Unexpected response code: 301
```

### 該当のソースコード
config/environments/prodution.rb
```ここに言語名を入力
Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Action Cable
  ActionCable.server.config.disable_request_forgery_protection = true
  config.action_cable.allowed_request_origins = [ 'https://ドメイン/', /https://ドメイン.*/ ]

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

  # Mount Action Cable outside main process or domain
  # config.action_cable.mount_path = nil
  # config.action_cable.url = 'wss://example.com/cable'
  # config.action_cable.allowed_request_origins = [ 'http://example.com', /http://example.*/ ]

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  config.force_ssl = true

  # Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level = :debug

  # Prepend all log lines with the following tags.
  config.log_tags = [ :request_id ]

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Use a real queuing backend for Active Job (and separate queues per environment)
  # config.active_job.queue_adapter     = :resque
  # config.active_job.queue_name_prefix = "****_#{Rails.env}"
  config.action_mailer.perform_caching = false

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Use a different logger for distributed setups.
  # require 'syslog/logger'
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false

end

```

### 該当のソースコード
nginx ***.conf
```ここに言語名を入力
  error_log  /var/www/*****/current/log/nginx.error.log;
  access_log /var/www/*****/current/log/nginx.access.log;
  client_max_body_size 2G;
  upstream app_server {
    server unix:/var/www/*****/current/tmp/sockets/.unicorn.sock fail_timeout=0;
  }

  server {
    listen 80;
    server_name ドメイン;
    keepalive_timeout 5;
    root /var/www/******/current/public;
    try_files $uri/index.html $uri.html $uri @app;
    location @app {
      # HTTP headers
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_pass http://app_server;
    }
    error_page 500 502 503 504 /500.html;
    location = /500.html {
      root /var/www/*****/current/public;
    }
  }
  server {

    listen 443 ssl;
    proxy_set_header X-Forwarded-Proto $scheme;
    ssl_certificate     /etc/letsencrypt/live/ドメイン/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/ドメイン/privkey.pem;
    ssl_prefer_server_ciphers on;
    location ^~ /.well-known/acme-challenge/ {
            default_type "text/plain";
            root         /var/www/******/current/public;
            try_files $uri/index.html $uri.html $uri @app;
    }
    location / {
            proxy_pass http://ドメイン;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-Proto $scheme;
    }
    location /cable {
            proxy_pass http://app_server/cable;
            proxy_http_version 1.1;
            proxy_set_header Upgrade websocket;
            proxy_set_header Connection Upgrade;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }

```

### 試したこと

nginxの設定を弄ったり、prodution.rbを弄ったりしましたが解決できませんでした。
見当たるエラーコードはコンソールのみです。
下記のサイトを参考にしましたが解決できませんでした。
[Rails5のActionCable(WebSocket)をPumaとnginxで本番環境で動かす](https://qiita.com/narikei/items/e6372fda07a024bbf8be)
[Rails5のActionCableをNginxとPumaの環境にデプロイする](https://qiita.com/maggam/items/5259543569093689d6e4)
[AWS、Nginx、Unicorn、RailsでActionCableを使用する](http://taremimi.hatenablog.jp/entry/2017/11/01/012121)
[Action Cableでリアルタイムチャットアプリの作成方法 （Rails 5.1.4にて）（その１）　herokuで動かす！](https://qiita.com/Hijiri-K/items/c3774c72a2cb68e1a720)
[rails guide](https://railsguides.jp/configuring.html#action-cable%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)
[アクションケーブルが接続できません（WebSocketにアップグレードできませんでした） - ruby​​-on-rails、nginx、ruby-on-rails-5、actioncable](https://living-sun.com/ja/ruby-on-rails/765744-action-cable-unable-to-connect-failed-to-upgrade-to-websocket-ruby-on-rails-nginx-ruby-on-rails-5-actioncable.html)
[[Rails] Action CableでWebsocketが繋がらない（原因はconfig）](https://qiita.com/Masahiro_T/items/92d8b1b40d1982dd5b62)
[Nginx,Redis,MySQLを使ってほんの少し実践的なRails ActionCableと、iOS/Androidのサンプルアプリを作って全体像を学ぶ〜バックエンド編〜](https://qiita.com/devnokiyo/items/4945ed7cd17ba43c3e05)


### 補足情報（FW/ツールのバージョンなど）
ruby
rails 5.1.6
ActionCable(websocket)
mysql
capistrano
unicorn
nginx
devise gem
conohaVPS
CentOS8
ssl let's encrypt

WebSocket connection to '' failed: Error during WebSocket handshake: Unexpected response code: 301

Ruby on Railsを使ってチャットができるサイトを勉強のために作ろうと思っています。
作りたい機能は
・ActionCable使ったチャット
・グループを作ることができる
・グループは「公開」「限定公開」「非公開」の設定ができる
・グループの検索機能
・非公開グループの認証コード作成（非公開グループに入るため）
・参加しているグループ一覧
などです。（イメージは下記画像）

ユーザーモデルなどチャット以外の部分は大体完成しています。

Qiitaなどで色々調べたのですがなかなかわかりやすい記事がなく困っています。
一度 [こちら](https://qiita.com/fujisawaryohei/items/3a567a64691276da0d45) の記事を参考に作ってみたのですがうまくできませんでした。
わかりやすくチャットの作り方を説明してくれているサイトが有りましたら教えていただけますと幸いです。
参考になるサイトだけでもいいので教えていただければ幸いです。
初心者ですみません。

### 完成イメージ（理想）
![イメージ説明](1225573b416e2a761fe252766e574107.png)
![イメージ説明](bcd048805ebdc5647e2fc99ceaaaef26.png)
![イメージ説明](7dfa0d14fe04f271ff3134992be6deb1.png)
![イメージ説明](00c82deb068c0c64aa26177afd6f26ec.png)

Railsでチャット機能を作りたい

#実行環境
・ ubuntu14.04
・ Rails 5.0.0
・ ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-linux]

閲覧ありがとうございます。

現在Rails5の新機能であるActionCableについて勉強をしています。

まずはリアルタイム更新のチャットテストをしようと思い[このページ](http://ticklecode.com/rails-5-0-0-rc1-chat-action-cable/)を使いテストをしているところです。

しかし

> 出力された app/assets/javascripts/cable.js を確認

の部分で以下のようなエラーが出てしまいます。



クライアント側:

```
WebSocket connection to 'ws://[サーバ側のURL]:3000/cable' failed: Error during WebSocket handshake: Unexpected response code: 404
```

サーバ側:

```
Started GET "/cable" for 210.136.2.23 at 2016-08-03 17:02:11 +0900
Cannot render console from [クライアント側のURL]! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Started GET "/cable/" [WebSocket] for [クライアント側のURL] at 2016-08-03 17:02:11 +0900
Request origin not allowed: http://[サーバ側のURL]:3000
Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
Finished "/cable/" [WebSocket] for [クライアント側のURL] at 2016-08-03 17:02:11 +0900
```

[github](https://github.com/rails/rails/tree/master/actioncable)をみるとそのままで動かすとlocalhost:3000でのみ動くということなので設定ファイルの`config/environments/production.rb`に以下のように記述したのですが同じエラーが出てしまい実行することができません

```
config.action_cable.url = 'ws://[サーバ側のURL]:3000'
config.action_cable.allowed_request_origins = [ ‘http://サーバ側のURL:3000’ ]
```

ご教示のほどよろしくお願いします

Rails5のActionCableのエラーについて

### 前提
APIにRails、フロントにVueを使ってチャット機能を作っています。
ActionCableを使用しているのですが、フロント側でエラーが発生しています。

### 発生している問題・エラーメッセージ
チャットページにアクセスするとブラウザのコンソールに下記のエラーが表示されます。

``` 
Uncaught TypeError: Cannot read properties of undefined (reading 'received')
    at Subscriptions.notify (action_cable.js?90ce:493:1)
    at Connection.message (action_cable.js?90ce:347:1)
```
### 該当のソースコード
チャットページのVueコンポーネントが下記のようになっています。

```javascript
<template>
  <div class="flex flex-col mt-4 relative">
    <div
      v-for="message in messages"
      :key="message.id"
      class="px-2"
      :class="{
        received: message.user_id !== $store.getters.currentUserId,
        sent: message.user_id === $store.getters.currentUserId,
      }"
    >
      <span class="content">{{ message.content }}</span>
      <span class="created-at">{{ message.created_at | dateTime }}</span>
    </div>
    <div class="w-full px-2 absolute bottom-0 left-0">
      <textarea
        name="message"
        id="message"
        placeholder="メッセージを入力してください"
        v-model="enteredMessage"
        @keypress.enter.prevent="postMessage"
        class="w-full bg-gray-100 mb-1.5 p-2.5 box-border border-0 rounded-lg resize-none"
      ></textarea>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ActionCable from "actioncable";
import DateConverter from "@/mixins/dateConverter.js";

export default {
  mixins: [DateConverter],
  data() {
    return {
      messages: "",
      enteredMessage: "",
      chatRoomChannel: "",
    };
  },
  methods: {
    resizeMessageArea() {
      const messageArea = document.getElementById("message");
      function setMessageAreaHeight() {
        messageArea.style.height = "auto";
        messageArea.style.height = `${messageArea.scrollHeight}px`;
      }
      messageArea.addEventListener("input", () => {
        if (messageArea.scrollHeight < 220) {
          setMessageAreaHeight();
        }
      });
    },
    getMessages() {
      axios
        .get(
          process.env.VUE_APP_API_BASEURL +
            "/chat_rooms/" +
            this.$route.params["chatRoomId"]
        )
        .then((response) => {
          this.messages = response.data.messages;
        });
    },
    createConnection() {
      const consumer = ActionCable.createConsumer(
        "ws://" + process.env.VUE_APP_API_HOST + "/cable"
      );
      this.chatRoomChannel = consumer.subscriptions.create("ChatRoomChannel", {
        connected() {
          this.getMessages();
        },
        received() {
          this.getMessages();
        },
        speak() {
          return this.perform("speak", {
            message: {
              content: this.enteredMessage,
              user_id: this.$store.getters.currentUserId,
              chat_room_id: this.$route.params["chatRoomId"],
            },
          });
        },
      });
    },
    postMessage() {
      this.chatRoomChannel.speak(this.enteredMessage);
      this.enteredMessage = "";
    },
  },
  mounted() {
    this.resizeMessageArea();
    this.getMessages();
    this.createConnection();
  },
  beforeUnmount() {
    this.chatRoomChannel.unsubscribe();
  },
};
```

### 試したこと
createConnectionメソッドのreceivedをコメントアウトしてもエラーは消えませんでした。
また、フロントのactioncableを再インストールしてみたんですが、特に変化はありませんでした。

エラーの解消方法をご存じの方いましたら回答お願いします！


ActionCableでundefinedエラー

##はじめに

私は、現在、Rails5でポートフォリオ作成中の初学者です。

Action Cableを用いてDM機能(チャット機能)を実装しているのですが、
チャットを送った後、リロードしないと送ったメッセージが表示されません。

##実装の参考にした記事
[Rails 5 + ActionCableで作る！シンプルなチャットアプリ（DHH氏のデモ動画より）](https://qiita.com/jnchito/items/aec75fab42804287d71b)


[[Rails]ActionCableを使用してリアルタイムチャットの実装](https://qiita.com/yuto_1014/items/249c93970780b498d86e)


[リアルタイムチャットは誰でもつくれる~Action CableでDM機能を作ろう~](https://qiita.com/OgawaNorihiro/items/6d9f85d8e89d1def4f15)

など

##メッセージ送信後のターミナル出力結果

出力結果はこちらです。
※見やすいように適宜改行しています。

```Terminal
DirectMessage Create (0.5ms)  INSERT INTO "direct_messages" ("user_id", "room_id", "message", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?)  [["user_id", 4], ["room_id", 6], ["message", "そそそ"], ["created_at", "2021-04-13 04:18:35.981227"], ["updated_at", "2021-04-13 04:18:35.981227"]]
  ↳ app/channels/room_channel.rb:13
   (3.4ms)  commit transaction
  ↳ app/channels/room_channel.rb:13
Could not execute command from ({"command"=>"message", "identifier"=>"{\"channel\":\"RoomChannel\",\"room\":6}", "data"=>"{\"direct_message\":\"そそそ\",\"action\":\"speak\"}"}) 
[RuntimeError - Circular dependency detected while autoloading constant ApplicationJob]
: /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/activesupport-5.2.5/lib/active_support/dependencies.rb:508:in `load_missing_constant'
| /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/activesupport-5.2.5/lib/active_support/dependencies.rb:195:in `const_missing' 
| /home/ec2-user/environment/enrich-ity/app/jobs/application_job.rb:1:in `<main>' | /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/bootsnap-1.7.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:59:in `load' 
| /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/bootsnap-1.7.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:59:in `load'
```
調べたところ、Railsでは一度読み込んだファイルをキャッシュして２回目は読み込まないようにしているため、このようにエラーがでるみたいです。
```
 [RuntimeError - Circular dependency detected while autoloading constant ApplicationJob]:
```

[参考にした記事①](https://blog.kozakana.net/2015/10/error-occurred-when-using-multithreading-with-rails/)

[参考にした記事②](https://qiita.com/tjnet/items/cecf9eae6e34a057e4d8)

上記記事を参考に色々試行錯誤しましたが解決できませんでした。

##ソースコード

※リロードすればメッセージを表示することは可能なので、viewファイルの記述は間違っていないと思います。

#######db/schema.rb
```
create_table "direct_messages", force: :cascade do |t|
    t.integer "user_id", null: false
    t.integer "room_id", null: false
    t.string "message", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
```
#######rooms_controller.rb
```
class Public::RoomsController < ApplicationController
  before_action :authenticate_user!

  def create
    @room = Room.create(:name => "DM")
    @entry1 = Entry.create(:room_id => @room.id, :user_id => current_user.id)
    @entry2 = Entry.create(params.require(:entry).permit(:user_id, :room_id).merge(:room_id => @room.id))
    redirect_to room_path(@room.id)
  end

  def show
    @room = Room.find(params[:id])

    if Entry.where(:user_id => current_user.id, :room_id => @room.id).present?
      @direct_messages = @room.direct_messages
      @entries = @room.entries
    else
      redirect_back(fallback_location: root_path)
    end
  end
end
```
#######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 = {});

  /* global ActionCable */
  App.cable = ActionCable.createConsumer();

}).call(this);
```

#######room.coffee
```
document.addEventListener 'turbolinks:load', ->
  if App.room
    App.cable.subscriptions.remove App.room
  App.room = App.cable.subscriptions.create { channel: "RoomChannel", room: $('#direct_messages').data('room_id') },

    connected: ->

    disconnected: ->

    received: (data) ->
      $('#direct_messages').append data['direct_message']

    speak: (direct_message) ->
      @perform 'speak', direct_message: direct_message

  $(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
    if event.keyCode is 13
      App.room.speak event.target.value
      event.target.value = ''
      event.preventDefault()
```

#######connection.rb
```
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    protected
    def find_verified_user
      #こっちの書き方だとメッセージをcreateできない
      # if verified_user = User.find_by(id: cookies.encrypted[:user_id])
      #   verified_user
      # else
      #   reject_unauthorized_connection
      # end
      verified_user = User.find_by(id: env['warden'].user.id)
      return reject_unauthorized_connection unless verified_user
      verified_user
    end
  end
end
```

#######room_cannel.rb
```
class RoomChannel < ApplicationCable::Channel

  def subscribed
    # stream_from "some_channel"
    stream_from "room_channel_#{params['room']}"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    DirectMessage.create! message: data['direct_message'], user_id: current_user.id, room_id: params['room']
  end
end
```

#######application_job.rb
```
class DirectMessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(direct_message)
    # マルチスレッド処理対策？書いても効果なし
    # Rails.application.eager_load!
    ActionCable.server.broadcast "room_channel_#{direct_message.room_id}", message: render_direct_message(direct_message)
  end

  private

  def render_direct_message(direct_message)
    # マルチスレッド処理対策？書いても効果なし
    # Rails.application.eager_load!
    ApplicationController.renderer.render(partial: 'direct_messages/direct_message', locals: { direct_message: direct_message })
  end
end
```
#######direct_message_broadcast_job.rb
```
class DirectMessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(direct_message)
    ActionCable.server.broadcast "room_channel_#{direct_message.room_id}", direct_message: render_direct_message(direct_message)
  end

  private

  def render_direct_message(direct_message)
    ApplicationController.renderer.render(partial: 'direct_messages/direct_message', locals: { direct_message: direct_message })
  end
end
```

#######direct_message.rb
```
class DirectMessage < ApplicationRecord
  belongs_to :user
  belongs_to :room
  has_many :notifications

  validates :message, presence: true

  after_create_commit { DirectMessageBroadcastJob.perform_later self }
end
```

#######config/application.rb
```
require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module EnrichIty
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }
    config.i18n.default_locale = :ja
    config.time_zone = 'Tokyo'
    config.active_record.default_timezone = :local

    # マルチスレッド処理対策？書いても効果なし
    config.eager_load_paths += %W(#{config.root}/.rvm/gems/ruby-2.6.3/gems/activesupport-5.2.5/lib/active_support/dependencies.rb)

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end
```

##

2日間このエラーと戦っています。
初学者故に拙い知識での質問になりますが、
ご回答のほど、何卒よろしくお願いいたします。

Rails ActionCable ページをリロードしないとチャット(DM)が更新されない

### 前提・実現したいこと
Ruby on RailsのActionCableを使用してチャットアプリの作成をしております。
show.html.erbの中にrenderで@messagesという引数を設定し、_message.html.erbにレンダリングさせ、ブラウザを更新の際にNoMethodErrorが表示されてしまいrenderで読み込まれる_message.html.erbのnameメゾットがないとエラーでは出ているのですが、定義する場所を間違えている可能性もあり解決策が分かりません。
質問に不備があるかもしれませんが、ご教授お願いします。

▼アプリ作成に参考にしたサイト
https://qiita.com/sunaga70/items/1f0add0dbcd0564cafee
https://qiita.com/Hijiri-K/items/c3774c72a2cb68e1a720

### 発生している問題・エラーメッセージ
▼rails s で localhost:3000にアクセスした際にターミナルに下記のエラーが表示されます。
```

ActionView::Template::Error (undefined method `name' for #<Message:0x00007fd055283ea8>):
    1: <div class="messages">
    2:   <p>
    3:     <%= "#{message.name} : #{message.content}(#{message.created_at.strftime('%Y/%m/%d %H:%M:%S')})" %>
    4:   </p>
    5: </div>

app/views/messages/_message.html.erb:3:in `_app_views_messages__message_html_erb___2950380043806694761_70266379310280'
app/views/rooms/show.html.erb:3:in `_app_views_rooms_show_html_erb__2936794920191071488_70266395210460'
```

▼localhost:3000のブラウザ上には下記のエラーが表示されます。
```
NoMethodError in Rooms#show
Showing /Users/nika/git/mogura/app/views/messages/_message.html.erb where line #3 raised:

undefined method `name' for #<Message:0x00007fd055283ea8>
Extracted source (around line #3):
1
2
3
4
5
              
<div class="messages">
  <p>
    <%= "#{message.name} : #{message.content}(#{message.created_at.strftime('%Y/%m/%d %H:%M:%S')})" %>
  </p>
</div>



```

### 該当のソースコード

```Ruby
app/views/rooms/show.html.erb

<h1>Chat</h1>

<form>
  <label>名前</label>
  <input type="text" class="js-name" value="名無子">
  <br>
  <label>内容</label>
  <input type="text" class="js-content" data-behavior="room_speaker">
</form>

<div id="messages">
  <%= render @messages %>
</div>

```

```Ruby
app/views/messages/_message.html.erb

<div class="messages">
  <p>
    <%= "#{message.name} : #{message.content}(#{message.created_at.strftime('%Y/%m/%d %H:%M:%S')})" %>
  </p>
</div>

```

### 試したこと
・railsサーバの再起動
・rails bd:migrateでデータベースの保存
・_message.html.erbを
<%= "#{message.name} : #{message.content}(#{message.created_at.strftime('%Y/%m/%d %H:%M:%S')})" %>
=>
<%= "#{@message.name} : #{@message.content}(#{@message.created_at.strftime('%Y/%m/%d %H:%M:%S')})" %>
のように@をつけてみましたがエラー内容は変わらず。

### 補足情報（FW/ツールのバージョンなど）
Ruby ver: 2.5.1p57
Rails ver: 5.2.2

エディタ:Atom
・terminal-plus
・browser-plus

OS:macOS 10.13.6

Rails: renderで呼び出し先のNoMethodError

### 前提・実現したいこと

リアルタイムチャットの機能をAction cableを使って実装しています。
ローカル環境では非同期でリアルタイムに問題なく動くのに本番環境になると再読み込みをしないと反映されません。
本番環境でも非同期で実装するためにお力を借りたいです。
アプリはheroku上にアップしています。

### 発生している問題・エラーメッセージ
ターミナルにてログを見てみると下記の通りにエラーが出ています。
```
2020-09-18T08:06:33.015455+00:00 app[web.1]: [f87b85ba-b644-4ced-97b7-be54d88e4320]Completed 500 Internal Server Error in 28ms (ActiveRecord: 18.4ms | Allocations: 1766)
2020-09-18T08:06:33.017267+00:00 app[web.1]: [f87b85ba-b644-4ced-97b7-be54d88e4320]
2020-09-18T08:06:33.017268+00:00 app[web.1]: [f87b85ba-b644-4ced-97b7-be54d88e4320] Gem::LoadError (Error loading the 'redis' Action Cable pubsub adapter. Missing a gem it depends on? redis is not part of the bundle. Add it to your Gemfile.):


```

### 該当のソースコード

エラー文にはGemの読み込みがうまく行っていない感じのエラーが出ています。今回Action Cableでリアルタイムチャット機能を実装するためにGemを入れてはいませんが念の為、Gemfileのソースコードを添付します。

```Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.5.3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 4.0.0'
  gem 'factory_bot_rails'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'pry-rails'

gem 'devise'

gem "aws-sdk-s3", require: false

gem 'jquery-rails'

gem 'active_hash'

gem 'rails-i18n'

gem 'mini_magick'
gem 'image_processing', '~> 1.2'


gem 'omniauth-google-oauth2'

gem 'kaminari'


group :production do
  gem 'rails_12factor'
end
```

### 試したこと
以下の記事のエラー状況が似ていたので参考にしました。
[参考記事]("https://qiita.com/Hijiri-K/items/c3774c72a2cb68e1a720")

production.rbを以下のように編集（コメントを解除し編集）

```production.rb
コメントアウトを外し、編集
config.action_cable.allowed_request_origins = [ /http://.*/ ]
```
config/cable.ymlを以下のように編集
production:に書かれているものをコメントアウトして、adapter: asyncを追加。
```config/cable.yml
production:
  # adapter: redis
  # url: redis://localhost:6379/1
  # channel_prefix: ＊＊＊＊＊_production
  adapter: async
```
＊＊＊＊＊はアプリ名が入っています。

上記の方法を試しましたが、変わらずでした。
変化が無かったので編集した所は元のコードに戻しています。

### 補足情報（FW/ツールのバージョンなど）

上記のソースコードでは情報が足りない場合は教えていただけると幸いです。
宜しくお願い致します。