Работы
2025NDAИнтерфейс мониторинга с непрерывным потоком обновлений
Данные приходили быстрее, чем интерфейс успевал перерисовываться, и наивная реализация просто вставала.
Клиент под NDA. Публикуются задача, решение и стек; название и материалы — нет.
Роль
- Архитектура клиента
- Разработка
Стек
- React
- TypeScript
- WebSocket
Поток данных отделён от дерева компонентов
Каждое входящее сообщение, превращённое в обновление состояния, — это перерисовка, и на таком потоке их набирается больше, чем кадров. Обновления накапливаются вне React и отдаются в отрисовку пачками, привязанными к кадру, а не к сообщению. Таблица и графики читают из одного буфера, поэтому не могут показывать состояние на разные моменты времени — расхождение здесь опаснее задержки.
Разрыв связи — обычное состояние, а не ошибка
Соединение рвётся регулярно, и интерфейс, который в этот момент продолжает показывать последние полученные цифры как актуальные, вводит в заблуждение ровно тогда, когда на них смотрят внимательнее всего. Состояние подключения показано явно, а данные помечаются устаревшими, как только поток прерван. Переподключение и добор пропущенного происходят сами, но без молчаливой подмены: пользователь видит, что был разрыв.
- Реальное время
- Производительность
- Визуализация данных