将客户端时间设置为服务器时间并实时更新

Question

情况是这样的..

我有一个用 React 构建的 javascript 前端，它通过 RESTful API 连接到我的 PHP 后端，该后端处理、存储和提供所有数据。我需要能够在客户端 javascript 应用程序上实时显示 PHP 服务器的当前时间（渐进式秒、分和小时）。

我正在获取 PHP 服务器的当前时间戳并将其与 API 的第一个请求一起发回。

通过使用 Javascript 的 setTime 方法，我可以很容易地在前端显示它，但我的问题是如何实时更新它（使用 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);
}

...但是我正在努力想办法将日期初始化为服务器时间戳，而不必每秒向 PHP 服务器发送一个新的 Ajax 请求以获得时间戳。

我假设有一种方法可以只设置一次日期，然后开始计时，而不必每秒获取新日期，但我可能错了吗？

Answer 1

好吧，在尝试了一些东西之后，我把它弄得沙沙作响。它绝不是完美的，在任何时间后肯定不会准确，但它是其他任何人尝试类似事情的起点。

我想您可以每分钟调用一次服务器时间的 API（还不错）并更新时间戳变量以使其更加准确。您还可以将旅行的延迟和 setInterval 添加到初始时间戳。就目前而言，这将是 API 发回时间戳所需的时间 + 添加到调用堆栈所需的时间 + 渲染 + “显示时间”实际上会滞后的 setInterval。我猜可能会在时间戳timestamp = (1549149560 * 1000) + 2000; 上增加 2 秒（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>