Rails ajax 自動更新機能が動作しない

前提・実現したいこと

railsでグループが作成でき、その中でチャットができるアプリを作成しています。
そのグループ内のチャットが時間ごと自動に更新される機能を実装したい。

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

app/assets/javascripts直下にautoReload.jsを作成、中にコードを記述しているが、恐らくこのファイル自体が読み込まれていない。

該当のソースコード

ruby
1#routes.rb
2Rails.application.routes.draw do
3  devise_for :users
4  root to: 'home#top'
5  get 'about', to:'home#about'
6  resources :users, only: [:show, :update, :edit]
7  resources :gossips, only: [:new, :create, :index] do
8    resources :chats, only: [:index, :create, :new]
9    namespace :api do
10      resources :chats, only: :new, defaults: { format: 'json' }
11    end
12  end
13  resources :movies do
14    resources :comments, only: :create
15  end
16  get 'searchs', to: 'searchs#map'
17end

ruby
1#new.json.jbuilder
2json.array! @chats do |chat|
3  json.content chat.content
4  json.image chat.image.url
5  json.created_at chat.created_at.strftime("%Y年%m月%d日 %H時%M分")
6  json.user_name chat.user.name
7  json.image chat.image.url
8  json.id chat.id
9end

javascripts
1//application.js
2
3//= require jquery
4//= require rails-ujs
5//= require_tree ./modules

javascripts
1//autoaReload.js
2$(function(){
3  function buildHTML(chat){
4    if ( chat.image ) {
5      let html =
6        `<div class="chat" data-chat-id=${chat.id}>
7          <div class="chat__in">
8            <div class="chat__in__left">
9              <div class="chat__in__left__userIcon">
10              <img src="${chat.user_image_url}">
11              </div>
12            </div>
13            <div class="chat__in__right">
14              <div class="chat__in__right__top">
15                <div class="chat__in__right__top__userName">
16                  ${chat.user_name}
17                </div>
18                <div class="chat__in__right__top__createdTime">
19                  ${chat.created_at}
20                </div>
21              </div>
22              <div class="chat__in__right__bottom">
23                <div class="chat__in__right__bottom__content">
24                  ${chat.content}
25                  <img class="Message__image" src="${chat.image}">
26                </div>
27              </div>
28            </div>
29          </div>
30        </div>`
31      return html;
32    } else {
33      let html =
34      `<div class="chat" data-chat-id=${chat.id}>
35      <div class="chat__in">
36        <div class="chat__in__left">
37          <div class="chat__in__left__userIcon">
38          <img src="${chat.user_image_url}">
39          </div>
40        </div>
41        <div class="chat__in__right">
42          <div class="chat__in__right__top">
43            <div class="chat__in__right__top__userName">
44              ${chat.user_name}
45            </div>
46            <div class="chat__in__right__top__createdTime">
47              ${chat.created_at}
48            </div>
49          </div>
50          <div class="chat__in__right__bottom">
51            <div class="chat__in__right__bottom__content">
52              ${chat.content}
53            </div>
54          </div>
55        </div>
56      </div>
57    </div>`
58      return html;
59    };
60  }
61let reloadChats = function() {
62  let last_chat_id = $('.chat:last').data("chat-id") || 0;
63  $.ajax({
64    url: "api/chats",
65    type: 'get',
66    dataType: 'json',
67    data: {id: last_chat_id}
68  })
69  .done(function(chats) {
70    if (chats.length !== 0) {
71      let insertHTML = '';
72      $.each(chats, function(i, chat) {
73        insertHTML += buildHTML(chat)
74      });
75      $('.chat_new__wrapper__chatsIndex').append(insertHTML);
76      $('.chat_new__wrapper__chatsIndex').animate({ scrollTop: $('.chat_new__wrapper__chatsIndex')[0].scrollHeight});
77    }
78  })
79  .fail(function() {
80    alert('error');
81  });
82};
83setInterval(reloadChats, 7000);
84});

haml
1-#application.html.haml
2!!!
3%html
4  %head
5    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
6    %title Night Walk
7    = csrf_meta_tags
8    = csp_meta_tag
9    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
10    = javascript_include_tag 'application'
11    %script{src: "http://maps.google.com/maps/api/js?key=#{ENV['GOOGLE_MAP_API_KEY']}", charset: 'utf-8'}
12  %body
13    = yield

haml
1-#new.html.haml
2= javascript_include_tag 'autoReload'
3.chat_new
4  .chat_new__title
5    = @gossip.name
6    .chat_new__title__links
7      =link_to root_path do
8        Home
9      = link_to gossip_chats_path(@gossip.id) do
10        Chat一覧
11  .chat_new__wrapper
12    .chat_new__wrapper__chatsIndex
13      - @chats.each do |chat|
14        .chat{data: {chat: {id: chat.id}}}
15          .chat__in
16            .chat__in__left
17              .chat__in__left__userIcon
18                = image_tag src= "#{chat.user.image}"
19            .chat__in__right
20              .chat__in__right__top
21                .chat__in__right__top__userName
22                  = chat.user.name
23                .chat__in__right__top__createdTime
24                  = chat.created_at.strftime("%Y年%m月%d日 %H時%M分")
25              .chat__in__right__bottom
26                .chat__in__right__bottom__content
27                  = chat.content
28                  = image_tag chat.image.url, class: 'Message__image' if chat.image.present?
29    .chat_new__wrapper__contents
30      %p
31        メッセージ作成
32      .chat_new__wrapper__contents__user
33        %p
34          %span 
35            作成者
36          = current_user.name
37      .chat_new__wrapper__contents__form
38        = form_with model: [@gossip, @chat], html: {class: "Form"}, local: true do |f|
39          .formContents
40            = f.text_area :content, class: 'Form__inputContent', placeholder: 'type a message'
41            = f.label :image, class: 'Form__inputImage' do
42              = icon('far', 'image', class: 'Form__icon')
43              = f.file_field :image, class: 'Hidden'
44          .formBtn
45            = f.submit 'Chat', class: 'Form__submit'
46            = icon('fas', 'hand-point-left')
47

試したこと

このままのファイル構造で、autoReload.jsにconsole.log('hoge')を記述したがコンソールに出力されない。
ファイル構造を
app/assets/javascripts/autoReload.jsからapp/assets/javascripts/modules/autoReload.jsとしたところautoReload.js内のfunctionは動きました。
しかし、このファイル構造だと関係のないページで無駄なトラフィックが起きてしまうため、ファイル構造はapp/assets/javascripts/autoReload.jsとしたいです。

補足情報（FW/ツールのバージョンなど）

Rails 6.0.3.2
ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

Rails６　は　app/assets/javascripts　ではないです
app/javascript　の下に置きます。
例えばこのあたりを参考にしてください

投稿2020/09/18 03:54

winterboum

総合スコア23329

tomoZQ

2020/09/18 09:03

autoReload.js作成前は他のjsファイルが動いておりました。 autoReload.jsファイル作成後、javascripts直下にmodulesというフォルダを用意し、その中にautoReload以外のjsファイルを格納しており、そちらは問題なく動作しております。 new.html.hamlに = javascript_include_tag 'autoReload' の記述、 config/initializers/assets.rbに Rails.application.config.assets.precompile += %w[autoReload.js] を記述しています。

行動規範の内容に同意します

自己解決

app/assets/javascripts/modulesに入れてあるGoogleMapApiを使用するためのjsファイル（search.js）が邪魔をしていた模様。

javascript
1//search.js
2
3$(function(){
4  var directions; 
5  var map;      
6  var ds = google.maps.DirectionsStatus;
7  var directionsErr = new Array(); 
8  directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
9  directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
10  directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
11  directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
12  directionsErr[ds.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
13  directionsErr[ds.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
14  directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";
15
16    directions = new google.maps.DirectionsService();
17    var mapOptions = {
18      zoom: 14,
19      mapTypeId: google.maps.MapTypeId.ROADMAP,
20      center: new google.maps.LatLng(35.666674, 138.568785)
21  };
22  
23  map = new google.maps.Map(document.getElementById("map"), mapOptions);
24
25  
26  $('#searchBtn').click(function(searchRoute){
27    var origin = document.getElementById("origin").value;
28  var destination = document.getElementById("destination").value;
29  
30  directions.route(
31      { 
32        'origin'     : origin,     
33        'destination': destination,
34        'travelMode' : google.maps.DirectionsTravelMode.DRIVING 
35      },
36      function(results, status) { 
37        if (status == ds.OK) {  
38          var poly = new google.maps.Polyline({
39            map: map,              
40            path: results.routes[0].overview_path,
41            strokeWeight: 5,       
42            strokeColor: "#0000EE",
43            strokeOpacity: 0.5     
44          });
45          
46          map.setCenter(results.routes[0].bounds.getCenter());
47        } else {
48            alert("ルート検索が失敗しました。理由: " + directionsErr[status]);
49        }
50      });
51    })
52});

search.jsをapp/assets/javascripts直下に移動し、application.html.hamlの

%script{src: "http://maps.google.com/maps/api/js?key=#{ENV['GOOGLE_MAP_API_KEY']}", charset: 'utf-8'}

をapplication.html.hamlから削除、GoogleMapApiを使用しているviewファイルに記述。さらにこのviewファイルに

= javascript_include_tag 'search'

を記述
最後にconfig/initializers/assets.rbの

Rails.application.config.assets.precompile += %w[autoReload.js]

を

Rails.application.config.assets.precompile += %w[autoReload.js search.js]

とし、サーバーを再起動することで解消。

原因がわかりません、おわかりの方いらっしゃいましたら教えていただければと存じます。

投稿2020/09/19 06:55

tomoZQ

総合スコア14

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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