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

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
}