Хронограф/таймер обратного отсчета в вебе?

Question

[Alex Pro]

Доброго дня, прошу помощи! Требуется создать хронограф/таймер обратного отчета на вэбе. Пока не понятно как и на чем.
Смысл таков:
Есть таймер обратного отсчета начало 60 секунд и до 0 или от 120 секунд до 0.
Есть управление - старт/пазу/сброс и 2 или 1 минута
Этот таймер должен работать на любых клиентах (браузерах) синхронно. Те запуск в одном месте а данные на всех и при этом этот таймер нужно встраивать (отображать) на разных страницах.
Те запускаем таймер на странице (10.0.0.1/timer) а на странице Табло (10.0.0.1/tablo) и других отображается этот таймер с одинаковым временем и возможностью управления (старт/пауза)
Обычный таймер на клиенте - понятно. Но как такое сделать и как, пока не понятно.
Раньше по вебсокету + js, пинал на php, но все сложно и плохо работало и прочее.
Куда копать, что читать, как это вообще возможно написать??? Может с БД может какие еще инструменты??

Благодарю Вас!

схема работы:

Answer 1

[Aetae]

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

Никакая постоянная долбёжка сервера и синхронизация не нужна, если у юзера нет проблем с часами. Если есть(шанс на что пренебрежимо мал) - то это его проблемы, сервер всё рано знает точную дату.

Comments

[Alex Pro]

А что с паузой? Иногда требуется нажать на паузу и потом далее от этого времени.

[Aetae]

Alex Pro, шлёшь на сервер паузу. Ставишь статус пауза, вычисляешь(как обычно) и запоминаешь остаток и возвращаешь его.
При всех запросах возвращает статус "пауза" и остаток.

При запросе "плей", "программистский" вариант: переписываешь дату старта как:

<текущая дата> - (<начальный остаток таймера> - <запомненный остаток>)

и дальше как обычно, либо переписываешь <начальный остаток таймера> как <запомненный остаток> и ставишь дату старта как <текущая дата>.
"Нормальный" вариант - ничего не переписывать, а написать нормальный класс с логикой по статусам и вычислениями, но мне лень.

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

[Alex Pro]

Спасибо! Буду реализовывать!
Это как штурм мозговой, благодарю, я иначе думал совсем, а оказалось все проще значительно )
В одиночку туговато порой бывает.

Answer 2

[Alex Pro]

готово в целом. вспомнил отписать!

Но без долбежки ЕЖЕСЕКУНДНО с некоторых клиентов, а это (судя по логам мускуля)

Сетевой трафик с момента запуска: 873.7 МБ
Этот сервер MySQL работает 0 дней, 25 часов, 37 минут и 16 секунд. Запущен Мар 16 2023 г.

ибо 100% необходима достоверные данные (json) короткие.
до 5-ти клиентов при работе в 3-4 часа максимум нагрузки, остальное простой

Вывод : нагрузка приемлемая, нужно тестировать. а так - все налмалды! Всем спасибо!

Answer 3

[Александр Кубинцев]

Я думаю можно спокойно ограничиться серверным стеком centrifugo + php-fpm.
При загрузке страницы происходит подключение к центрифуге и подписка на канал уведомлений о таймере.
При операциях старт/стоп/пауза отсылается запрос на бекенд. Бекенд делает необходимую логику по фиксации и шлёт уведомление в центрифугу в канал уведомлений, чтобы клиенты отреагировали соответствующим образом.

Comments

[Alex Pro]

Читал о Центриуге, но пока не пробовал! Спасибо!

[Alex Pro]

Центрифуга хороша, но немного сложна да и очень крута. У меня максимум 20-30 клиентов.
Может есть что-то подобное но поп проще Вам знакомое?

[Александр Кубинцев]

Alex Pro, да я не сказал бы, что это что-то сложное. Поставить сервис не сложно, api без заморочек. Из альтернатив можно поднять что-нибудь самописное на go или node.js, реализовать через websocket

[Alex Pro]

И в целом для 10-15 клиентов оказалось не требуется центрифуга. Но интересная ага, спасибо!)