如何在多个浏览器选项卡中同步倒数计时器？

Question

我正在 React 上开发一个应用程序，其中 倒数计时器 是主要组件（同时页面上可以有 10-20 个计时器）。从服务器我得到：计时器应该走多长时间以及以秒为单位还剩下多少。然后每一秒我都会重新计算还剩下多少。源数据存储在 redux 中，并在组件本地状态中计算。

这些计时器应该为每个用户显示相同的值。

问题是当我复制浏览器中的选项卡时，没有发生api请求，分别是新选项卡中的计时器回滚到旧状态。 在 redux 中每秒更新数据对我来说似乎不是最好的选择，但我还没有看到其他选项。

Answer 1

您说服务器以秒为单位向您发送剩余时间。因此，您可以在客户端计算倒计时应该在客户端时间结束的时间。您可以将其存储在本地存储中。当打开一个新选项卡时，您可以使用该值来初始化您的计时器。

它不需要客户端时间正确或与服务器时间同步，因为所有选项卡共享相同（可能是错误的）客户端时间。您只关心当前客户端时间与您为正确初始化计时器而保存的客户端时间之间的秒差。

计算它的解决方案大致如下所示：

// when receiving the remaining seconds in the first tab

const onReceivedRemaining = (remaining) => {
    const now = new Date(); // current client time
    now.setSeconds(now.getSeconds() + remaining); // timer end in client time

    localStorage.set('elapsing', JSON.stringify(now));
}

// when initializing the timer in a second tab

const getInitial = () => {
    const elapsing_string = localStorage.get('elapsing');
    if (!elapsing_string) return null;

    const now = new Date();
    const elapsing = Date.parse(elapsing_string);
    return (elapsing - now) / 1000; // remaining time in seconds
}