Синхронизация клиентов в javascript без моего собственного бэкэнда

Предупреждение: звук (не громко, в коде установлена ​​громкость 0,5) Моя цель — как можно лучше синхронизировать всех, кто заходит на веб-страницу.

Скажем, есть какие-то глобальные часы. Поскольку Javascript Date.now() основан на часах устройства, полагаться на них недостаточно.

Итак, я использую worldtimeapi который возвращает время с точностью до миллисекунд, чтобы получить diff так что в идеале Date.now() + diff будет оценивать на любом устройстве одно и то же значение в любой момент. diff по сути, должен исправить отклонение устройства от некоторых глобальных часов.

Я могу слышать разницу, когда запускаю это на моем телефоне и на моем ноутбуке, но в конечном итоге я не уверен, как я могу сказать, является ли это лучшим, на что я могу рассчитывать, или есть разница, которую можно уменьшить с помощью лучшего кода и без настройки моего собственного серверного NTP.

var duration = 27193;
var diff=1000;
var handle = null;
var best_delay = 1000;
var sound = document.getElementById("sound");
var timebox = document.getElementById("time_set");
var start = document.getElementById("start");
sound.volume = 0.5;
sound.onended = (event) => {
    play();
}
function play()
{
  sound.currentTime = ((Date.now() - diff) % duration)/1000;
  sound.play()
}

function gettime() {

  console.log("getting time");
  try {
    clearInterval(handle);
  }
  catch (error) {}
  var start = new Date();
  xhttp = new XMLHttpRequest();
  xhttp.open("GET", "https://www.worldtimeapi.org/api/Asia/Macau",true);
  xhttp.onreadystatechange=function() {
    if (xhttp.readyState==4 && xhttp.status == 200) {
      let response = JSON.parse(xhttp.responseText);
      let time_at = new Date(response.datetime);
      let now = Date.now();
      let delay = now - start;
      let new_diff = now - time_at-delay/2;
      if (delay < best_delay)
      {
        best_delay = delay;
        diff = new_diff;
        console.log(diff)

      }
      timebox.innerHTML += diff.toString() + "," + delay;
      timebox.innerHTML+="n";
      play();
    }
  }
  xhttp.send(null);
}
start.onclick = function () {
  gettime();
}
<audio id="sound" src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" controls preload="auto"></audio>

<textarea id="time_set"></textarea>
<br>
<button id="start">
START
</button>

0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *