RailsからJsにサーバー時間を送りたい

Question

実装したいこと

Jsでカウントダウン機能を作ったのですが、Jsだとサーバーからの時間が取れないので、どうにかRailsから送れるようにしたいです。

function countdown(){
const now=new Date(); //ここをrailsから取りたい
const tomorrow=new Date(now.getFullYear(),now.getMonth(),now.getDate()+1);
const differ=tomorrow.getTime()-now.getTime();


const sec=Math.floor(differ/1000)%60;
const min=Math.floor(differ/1000/60)%60;
const hour=Math.floor(differ/1000/60/60);


document.getElementById("hour").textContent=String(hour).padStart(2,"0");
document.getElementById("min").textContent=String(min).padStart(2,"0")
document.getElementById("sec").textContent=String(sec).padStart(2,"0")
setTimeout(countdown,1000);
}
countdown();

カウントダウンを出しているviewにTime.currentを置いたのですが、毎秒とることができないので詰まっています。
どなたかご教授お願いします。

##　再修正

// start_timeとcurrent_timeはviewから取っています。
const start_time = new Date(document.getElementById('start_time').dataset.time);
const countdown = () => {
const current_time = new Date(document.getElementById('current_time').dataset.time);
var diff = start_time - current_time;
  if (diff <= 0) {
    alert('セール開始です！');
  }
  const diff_sec = Math.floor(diff / 1000) % 60;
  const diff_min = Math.floor(diff / 1000 / 60) % 60;
  const diff_hour = Math.floor(diff / 1000 / 60 / 60) % 24;
  const diff_day = Math.floor(diff / 1000 / 60 / 60 / 24);
  document.getElementById('min').textContent = String(diff_min).padStart(2, '0');
  document.getElementById('sec').textContent = String(diff_sec).padStart(2, '0');
  document.getElementById('hour').textContent = String(diff_hour).padStart(2, '0');
  document.getElementById('day').textContent = String(diff_day).padStart(2, '0');
  diff --;
  setTimeout(countdown, 1000);
  }
  countdown();

Answer 1

• Ajaxで取るとか
• .js.erbで書くとか
• .html.erbにsrciptタグでとりあえず変数に入れとくとかhiddenのvalueに指定してJavaScriptで得るとか

Comments

[takaaa]

ご回答ありがとうございます
それらの案は現在時刻を毎秒取れないと思うのですが、どうでしょうか？

[m.ts10806]

質問内容からだと用途が分かりませんが、Ajax案でJavaScript側でsetIntervalとか使って1000ms毎に実行すれば良いのでは。（1000msだとズレる懸念あるのでしたら10msとかでもいいですけど比較面倒ですし）
カウントダウンタイマーのようなもので、確実にタイムラグが発生するサーバーサイドの言語を利用するのは悪手だと思います。

[takaaa]

用途としましてはあるページにセール開始場での時間を現在時刻からカウントダウンする感じです（質問内容のコードには明日になっていますが）
jsのnew Date()だとデバイスの時間を取っちゃうので、どうにかサーバーから時間を取りたいなと考えているのですが、何か良い方法はないでしょうか？

[m.ts10806]

既に書いた通りです。
しいてなら、画面アクセス時の時間はサーバーから取得し、カウントダウンはその時間から開始でJavaScriptでカウントダウンするとかでしょうか。
結局「開始」されたらボタンなり何なり出てくるでしょうから、その制御は必ずサーバーサイドでするとか。残り時間0になった時にサーバサイドに問い合わせて「開始時間」かどうかチェックするようにすれば、制限できないことはないです。

[takaaa]

ご教授ありがとうございます。
画面アクセス時に現在時間と開示時間を取り、その差を求めて１秒ずつ減らしていくようにしてみましたが、秒数は変わらないままでした。
変更点に現在のコードをあげましたので指摘していただけると幸いです

[m.ts10806]

current_timeを都度更新しないと変わらないままなのは当然かと。

[m.ts10806]

current_time の取得とdiff計算をタイマーの中でやればいいのでは。

[takaaa]

タイマーの中に入れたのですが、やはりできないです。。current_timeの取得が都度やるためにはページ自体を毎秒更新しないといけないと思うのですが、何かいい方法ないでしょうか？

[m.ts10806]

>const current_time = new Date(document.getElementById('current_time').dataset.time);
var diff = start_time - current_time;

この１セットを
if (diff <= 0) {

の前に持ってきたわけでないのでしたらこちらの意図した実装になってないと思います。

[takaaa]

再修正したものをアップしました。
こちらでもやはりできないです。

[takaaa]

const current_time = new Date(document.getElementById('current_time').dataset.time);
こちらがviewからとっているのでページを開いた時間しか取れていないのが原因なのかとおもいます。current_timeをcountdownの外に出して、diff --;で毎秒減らしてみたのですがこちらもダメでした。。