◆
Система управления задачами с аналитикой
SPA для команд: роли, канбан, графики продуктивности в реальном времени
← ко всем проектам
▣ разбор кейса
Интерактивная доска для команды
Совместное рисование и заметки на Canvas через WebSocket
FastAPIWebSocketRedisJavaScript (Canvas API)DockerPostgreSQL
01 Задача
Сделать онлайн-доску для брейншторма: несколько человек одновременно рисуют, клеят стикеры, двигают блоки — и всё видят изменения друг друга без перезагрузки.
02 Сложности
При частой отрисовке в сокет летели сотни событий в секунду — сервер захлёбывался, а у клиентов появлялся лаг. Отдельная задача — восстановление состояния доски для того, кто подключился позже, и корректная работа при обрыве связи.
03 Решение
Ввёл батчинг событий: координаты буферизуются и уходят пакетом раз в 40 мс. Состояние комнаты держу в Redis, историю операций — в PostgreSQL, поэтому новый участник получает снапшот одним запросом, а не тысячу событий. Добавил переподключение с экспоненциальной задержкой и очередь неотправленных действий на клиенте.
04 Результат
Доска стабильно держит одновременных участников без заметной задержки, трафик после батчинга упал примерно в 8 раз, а после обрыва интернета рисунок не теряется — догружается при реконнекте.
★ Чему меня научил этот проект
Впервые работал с WebSocket и Redis всерьёз. Понял, что сеть — это не «просто отправить данные»: без буферизации и продуманного реконнекта красивый прототип разваливается на первом же плохом Wi-Fi.
Обсуждение
Комментарии к проекту
Другие проекты
⚡
E-commerce платформа с рекомендациями
Каталог, корзина, оплата и блок «вам может понравиться»
◈
Сайт-портфолио с системой комментариев
Тот самый сайт, который вы сейчас читаете
Комментарии доступны зарегистрированным пользователям.