手順
- 自動更新用のJavascriptを用意する
- 自動更新したい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とか無いやろ...」という方には、以下の応用編も御覧ください。
応用編手順
- controllerでhtml以外のformatに対応させる(ajaxリクエストに対応)
-
*.html.erb
の一部をパーシャルに切り出す -
*.js.erb
を用意 -
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))