💬

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

2021/11/11に公開約1,500字

手順

  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))

Discussion

ログインするとコメントできます