0
Help us understand the problem. What are the problem?

posted at

updated at

[Rails6] 5秒ごとにブラウザリロードをさせる + α

手順

  1. 自動更新用のJavascriptを用意する
  2. 自動更新したいviewで読み込む

これだけの記事です。

やりかた: 自動更新用のJavascriptを用意する

以下のJavascriptを用意しておきます。

app/javascript/packs/autoreload.js
const interval = setInterval('location.reload()', 5000)
$(document).on('turbolinks:before-cache turbolinks:before-render', () => clearTimeout(interval))

やりかた: 自動更新したいviewで読み込む

app/views/**/*.erb.html
<%= javascript_pack_tag 'autoreload' %>

以上です。
とはいえ、「流石にreloadとか無いやろ...」という方には、以下の応用編も御覧ください。

応用編手順

  1. controllerでhtml以外のformatに対応させる(ajaxリクエストに対応)
  2. *.html.erb の一部をパーシャルに切り出す
  3. *.js.erb を用意
  4. autoreload.js を書き換える

やりかた: controllerでhtml以外のformatに対応させる(ajaxリクエストに対応)

app/controllers/**/*_controller.rb
...
def index
  ...
  @records = Record.all
  respond_to do |format|
    format.js
    format.html
  end
end
...

やりかた: *.html.erb の一部をパーシャルに切り出す

app/views/**/index.html.erb
<div id="records">
  <%= render 'record' %>
</div>
app/views/**/_record.html.erb
<%= record.name %>

やりかた: *.js.erb を用意

app/views/**/index.js.erb
$("#records").empty();
$("#records").append("<%= escape_javascript(render @records) %>");

やりかた: autoreload.js を書き換える

app/javascript/packs/autoreload.js
const milliseconds = 5000
const sync = () => {
  $.ajax({
    type: 'GET',
    url: $(location).attr('href'),
    dataType: 'script'
  })
}
const interval = setInterval(sync, milliseconds)
$(document).on('turbolinks:before-cache turbolinks:before-render', () => clearTimeout(interval))
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?