Установите время клиента на время сервера и обновляйте в реальном времени - PullRequest
Новая
       24

Установите время клиента на время сервера и обновляйте в реальном времени

0 голосов
/ 03 февраля 2019

Вот ситуация ..

У меня есть javascript-интерфейс, созданный с помощью React, который подключается через RESTful API к моему PHP-бэкэнду, который обрабатывает, хранит и обслуживает все данные.Мне нужно иметь возможность отображать текущее время сервера PHP в режиме реального времени (прогрессивные отметки секунд, минут и часов) на клиентском JavaScript-приложении.

Я получаю текущую метку времени сервера PHP и отправляю ее обратно ссамый первый запрос к API.

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

Я понимаю и знаю, как отображать текущее время с помощью JS:

Например, для отображения тикающих 24-часовых часов я бы сделал ... 

setTime = () => {
  this.time = new Date().toLocaleTimeString('en-US', {
    hour12: false
  });
  this.clock.innerText = this.time;
}

componentDidMount() {
  this.interval = setInterval(this.setTime, 1000);
}

... Но я изо всех сил пытаюсь придумать способ инициализации даты для метки времени сервера без необходимости отправлять новый запрос Ajax на сервер PHP для метки времени каждую секунду.

Я предполагаю, что есть способ установить дату только один раз, а затем начать отсчет времени без необходимости получать новую дату каждую секунду, но я могу ошибаться?

1 Ответ

0 голосов
/ 03 февраля 2019

Хорошо, попробовав кое-что, я зашумел.Он ни в коем случае не идеален и, конечно, не будет точным через какое-то время, но это отправная точка для всех, кто пытается что-то подобное сделать.

Я думаю, вы могли бы делать вызов API для сервера раз в минуту(не так уж плохо) и обновите переменную timestamp, чтобы сделать ее более точной.Вы также можете добавить задержку для travel и setInterval для запуска к начальной отметке времени.В существующем состоянии API потребуется время, чтобы отправить обратно метку времени + время, необходимое для добавления в стек вызовов + рендеринг + setInterval, на который «отображаемое время» будет фактически отставать.Я предполагаю, что, вероятно, добавление 2 секунд (2000) к отметке времени timestamp = (1549149560 * 1000) + 2000; охватит ее.

Если кто-нибудь знает, как сделать это более точно, я бы с удовольствием это услышал. 

var d = null;
var timestamp = null;

function setTime() {
  timestamp = 1549149560 * 1000; // This would be the PHP timestamp * 1000
  d = new Date();
  d.setTime(timestamp);
  setInterval(updateTime, 1000);
}

function updateTime() {
  d.setSeconds(d.getSeconds() +1);
  document.getElementById('time').innerText = d;
}

setTime();
<div id="time"></div>
...