Как синхронизировать время между сервером и фронтендом?

Question

[AE42]

У меня есть сервер, который отдает дату new Date() + 20 seconds (2021-08-11T07:18:38.085Z)
На фронтенде у меня стоит обратный отсчет от этой даты

Суть в том, что при изменении времени на компьютере увеличивается и цифра на таймере

Answer 1

[Вадим]

Пусть сервер присылает не дату, а количество секунд до истечения времени.
А на клиенте запустите setInterval каждые 1000мс. (1с)
Профит(почти).

P.s. почему почти:
1) коллбэк сработает через 1000мс только если поток документа не заблокирован другими тяжёлыми синхронными вычислениями.
2) браузеры, хром в частности, могут оптимизировать тики таймеров, если пользователь покинул вкладку(перешёл на другую или свернул браузер). Таким образом, он будет тикать не каждые 1000мс, а реже. Я такого не встречал, но, возможно, вообще не будет тикать.

По моему опыту - в рамках нескольких минут, если свернуть браузер, таймер начинал отставать на несколько секунд.

Comments

[V Sh.]

можно еще раз в n-ное кол-во времени обновлять таймер запросами. Для человека будет не сильно заметно.

[Вадим]

V Sh., можно, но тут много зависит от ресурсов и проекта. Если пользователей много, даже если раз в 5 секунд обновлять - ддос.
А ещё, судя из текста вопроса, там всего 20 секунд разницы.
Особо не наобновляешься.

[WbICHA]

А на клиенте запустите setInterval каждые 1000мс. (1с)

Можно же просто ставить таймауты на Date.now() % 1000.

[Вадим]

WbICHA, мм, а какой профит?

[Вадим]

WbICHA, Date.now вернёт время согласно текущему клиентскому времени, которое может быть как в будущем, относительно серверного времени, так и в прошлом.

[WbICHA]

Вадим, в смысле? % 1000 ─ это количество милисекунд до следующей секунды.

[Вадим]

WbICHA, а, Вы об этом. Как по мне это уже микрооптимизация, особенно с учётом не гарантированного срабатывания таймеров милисекунда в милисекунду. Но да, как вариант.

[WbICHA]

Вадим, это не для срабатывания милисекунды в милисекунду, это для того, чтобы таймер не тормозил.
Конечно, это не абсолютная защита (если таймер сработает на секунду позже это не поможет), но в остальных случаях сведёт задержки к минимуму.

Answer 2

[Армянское Радио]

Подозреваю некие костыли aka проблему X-Y.

Защитой от накрутки пользователем времени может быть только проверка на сервере.