Совместное рисование в реальном времени в мобильном приложении

Реализация коллаборативного рисования в мобильном приложении

Встречается ситуация: два пользователя рисуют на одном холсте, и спустя 200 мс штрихи накладываются не в том порядке. Причина — отсутствие честного упорядочивания. Мы решаем это с помощью CRDT (Conflict-free Replicated Data Type). Наш стек — Flutter 3.x, Kotlin Multiplatform, Swift 5.9. Синхронизация построена на бинарном протоколе поверх WebSocket, что даёт задержку менее 100 мс при 60 FPS.

Бинарный протокол вместо JSON даёт выигрыш в 3 раза по объёму данных. Типичная ошибка — отправлять каждое событие отдельно. Мы используем батчинг: группируем точки за 50–80 мс и отправляем одним сообщением. Это снижает нагрузку на канал и сервер, экономя ресурсы.

Как работает CRDT для рисования?

Конфликты при одновременном рисовании в одной области — частая проблема. Мы применяем CRDT с вектором часов. Каждое действие (начало, точки, завершение штриха) получает метку времени. При получении конфликтующих правок порядок восстанавливается по вектору: отправитель не ждёт подтверждения, а просто применяет локально и фоново синхронизирует. Это гарантирует отсутствие потери данных и честный порядок.

Как обеспечивается локальный отклик при удалённой синхронизации?

Пользователь должен видеть свой штрих сразу, без ожидания сети. Для этого мы рендерим локальный штрих немедленно, а синхронизацию запускаем параллельно.

// Flutter: локальный штрих
class DrawingBloc extends Bloc<DrawingEvent, DrawingState> {
  void onPointerDown(PointerDownEvent e) {
    currentStroke = Stroke(id: uuid(), points: [e.localPosition]);
    emit(state.copyWith(activeStroke: currentStroke));
    _syncService.beginStroke(currentStroke.id, color, brushSize);
  }

  void onPointerMove(PointerMoveEvent e) {
    currentStroke.points.add(e.localPosition);
    emit(state.copyWith(activeStroke: currentStroke));
    _syncService.appendPoints(currentStroke.id, [e.localPosition]);
  }

  void onPointerUp(PointerUpEvent e) {
    _syncService.finalizeStroke(currentStroke.id);
  }
}

Синхронизация идёт независимо — локальный рендер не блокируется.

Почему важен батчинг точек?

На мобильном устройстве 60 кадров в секунду генерируют до 60 событий pointerMove. Если отправлять каждое сразу, будет избыточный трафик и задержка на сериализацию. Мы собираем точки в батчи по 10–15 штук и отправляем каждые 50–80 мс. Это баланс между задержкой и трафиком.

Формат бинарного сообщения (экономия 3–5x по сравнению с JSON):

[strokeId: 16 bytes][pointCount: uint8][x1:f32][y1:f32][p1:f16][x2:f32]...

Float16 для давления (0.0–1.0 с точностью 0.001) достаточно. Координаты — float32 для субпиксельной точности. Итого ~10 байт на точку против ~30 в JSON.

На WebSocket передаём бинарные кадры (ArrayBuffer в JS, Uint8List в Dart, ByteBuffer в Kotlin).

Алгоритм сглаживания на стороне получателя

Удалённые точки приходят батчами с задержкой и дискретно. Простая отрисовка линий между точками даёт ступенчатые линии. Нужно сглаживание. Мы рекомендуем два метода:

• Catmull-Rom Spline — проходит через все контрольные точки, низкая сложность, среднее качество.
• Perfect Freehand — симулирует форму кисти с учётом давления и скорости, генерирует SVG-path. Высокое качество, средняя сложность.

Для удалённого штриха применяем Perfect Freehand ко всему массиву точек при каждом обновлении. Path перерисовывается полностью — это дороже по CPU, но визуально правильно (сглаживание учитывает весь контекст).

Слои и порядок объектов

Базовая модель: каждый штрих имеет z-index (timestamp создания). При конкурентном рисовании в одной области — кто нарисовал последним, тот сверху.

Слои (layers) — опциональная фича. Каждый слой — отдельный Y.Array объектов. Пользователь выбирает активный слой. Видимость/блокировка слоя — поле в Y.Map слоя.

При рендеринге: Canvas рисует слои снизу вверх. Каждый слой — отдельный offscreen canvas (iOS: UIGraphicsImageRenderer, Android: Bitmap с Canvas). Слои кешируются и перерисовываются только при изменении.

Ластик: специальный инструмент

Ластик не рисует белым — он удаляет пиксели. Два варианта:

1. Object-level eraser — удаляет весь штрих при пересечении. Прост в реализации, хорошо синхронизируется (delete(strokeId) — атомарная операция).
2. Pixel-level eraser — разрезает штрих на части. Требует геометрических вычислений (clip polygon by path). В коллаборативном контексте сложнее — нужно разрезать штрих и создать новые объекты, что проблема для CRDT.

Мы рекомендуем object-level eraser для начала.

Apple Pencil и Android Stylus

Apple Pencil через UITouch.type == .pencil передаёт давление (force 0.0–1.0), угол наклона (altitudeAngle, azimuthAngle) и предсказанные точки (predictedTouches). Flutter унифицирует: PointerEvent.pressure, PointerEvent.tilt, PointerEvent.orientation. Синхронизация pressure/tilt на удалённые клиенты даёт реалистичное отображение кисти партнёра.

Как интегрировать коллаборативное рисование: пошаговая инструкция

1. Анализ требований — определите число одновременно рисующих, требуемые инструменты, уровень сглаживания.
2. Выбор стека — Flutter, Kotlin Multiplatform или нативный Swift/Kotlin. Мы рекомендуем Flutter для кроссплатформенности.
3. Интеграция SDK — подключите нашу библиотеку, следуйте документации. Примеры кода для iOS, Android и Flutter включены.
4. Настройка серверной части — разверните WebSocket-сервер с поддержкой CRDT. Мы предоставляем Docker-образ.
5. Тестирование — проверьте синхронизацию при различных сетевых условиях, используйте TestFlight/Firebase Distribution.
6. Деплой — публикация в App Store / Google Play.

Сроки и что входит

Коллаборативное рисование с базовыми инструментами (кисть, ластик, цвет) на Flutter — 8–14 недель. С поддержкой стилуса, слоями, pixel-level eraser и масштабируемым холстом — 20–28 недель.

В разработку входит:

• Документация API и архитектуры
• Доступ к репозиторию с примерами
• Обучение команды заказчика
• Поддержка в течение месяца после релиза

Для точной оценки вашего сценария свяжитесь с нами — мы рассчитаем сроки и бюджет под конкретные требования. Получите консультацию наших инженеров с 10-летним опытом.

Типичные ошибки при реализации:

• Отправка каждого события отдельным сообщением вместо батчинга
• Использование JSON для точек — высокий overhead
• Игнорирование предсказания касаний для стилуса
• Отсутствие CRDT для конфликтов
• Рендеринг всех слоёв каждый фрейм без кеширования

Свяжитесь с нами, чтобы обсудить вашу задачу. Получите оценку проекта уже сегодня.

Интеграция API в мобильное приложение: с чего начать

Запрос уходит, ответ не приходит, timeout — 30 секунд. Пользователь смотрит на спиннер. Сети нет — мобильная карта в метро. Или сеть есть, но сервер вернул 200 с HTML-страницей ошибки вместо JSON — и приложение крашит при JSONDecoder.decode(). Мы видим такие кейсы на каждом втором проекте. Поэтому интеграция API в мобильное приложение — это не просто вызов endpoint'а, а проектирование надёжного сетевого слоя: обработка ошибок, кэширование, offline-режим, certificate pinning. Закажите аудит текущего сетевого слоя — оценим проект за 1 день.

Почему стандартные библиотеки недостаточны? URLSession и OkHttp предоставляют базовый HTTP-клиент, но для production нужны retry с exponential backoff, валидация статус-кодов, типизированная десериализация и мониторинг состояния сети. Без этого приложение теряет данные и пользователей. Мы уже 5 лет занимаемся мобильной разработкой и реализовали более 30 проектов с интеграцией API на iOS, Android и Flutter — от стартапов до enterprise-решений.

Как выбрать протокол для интеграции API?

REST остаётся стандартом для большинства проектов. Но когда на экране профиля нужно 5 полей из 40, GraphQL исключает over-fetching и сокращает трафик на 30–60%. gRPC оправдан при тысячах запросов в минуту (trading, IoT) — бинарная сериализация в 3–5 раз быстрее JSON. WebSocket — единственный выбор для real-time без polling (сообщения, уведомления).

Пример из практики: для финтех-приложения мы заменили REST (40 полей) на GraphQL — размер ответа сократился с 12 КБ до 2,5 КБ, время рендера экрана упало на 70%. Экономия трафика составила около 15 000 ₽ в месяц при 100 000 активных пользователей.

Как обеспечить надёжность соединения и offline-first

Пользователи теряют сеть в метро, лифте, тоннеле. Мобильное приложение обязано работать без интернета — хотя бы в read-only режиме. Мы внедряем паттерн offline-first:

1. При открытии экрана сначала показываем данные из локального кеша (Core Data / Room).
2. Параллельно выполняем сетевой запрос, обновляем UI после ответа.
3. Если сеть недоступна — показываем кешированные данные и метку «нет соединения».
4. При восстановлении сети автоматически синхронизируем изменения.

Для кэширования HTTP-ответов используем URLCache (iOS) и OkHttp Cache (Android) с поддержкой Cache-Control. Для структурированных данных — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback отслеживают состояние сети и триггерят обновление.

REST и выбор клиентской библиотеки

Alamofire (iOS) — де-факто стандарт для Swift-проектов. Поверх URLSession добавляет request chaining, response validation, automatic retry, certificate pinning через ServerTrustManager. AF.request() с .validate() возвращает ошибку для любого статус-кода вне 200–299. Без .validate() Alamofire считает 404 и 500 успешными ответами. С Swift Concurrency — async-версия через serializingDecodable.

Retrofit (Android) — аннотационный HTTP-клиент поверх OkHttp. Интерфейс с аннотациями компилируется в реализацию. @GET, @POST, @Path, @Query, @Body — декларативное описание API. OkHttp под капотом: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — логирование в debug-сборке. Authenticator — автоматический refresh токена при 401.

Ktor (KMM/Flutter) — мультиплатформенный HTTP-клиент. На iOS работает через Darwin engine (URLSession), на Android — через OkHttp. Единый код для обеих платформ при KMM-архитектуре.

GraphQL: когда REST не справляется

REST возвращает фиксированную структуру. Экран профиля требует name, avatar, email — сервер отдаёт 40 полей. Over-fetching. GraphQL решает это: клиент запрашивает ровно нужные поля. Это критично для мобайла, где трафик и время парсинга — реальные ограничения. Apollo iOS и Apollo Kotlin генерируют типизированные классы по схеме: schema.graphql + query-файлы → строгие типы на этапе компиляции. Subscriptions через WebSocket — real-time без polling. Ограничение: GraphQL сложнее кешировать на уровне HTTP. Apollo использует нормализованный in-memory кеш InMemoryNormalizedCache — запросы с пересекающимися данными обновляют кеш без дублирования. Apollo GraphQL Documentation

WebSocket: real-time без лишнего трафика

Polling (setInterval каждые 5 секунд) — трата батареи и трафика. WebSocket — постоянное двунаправленное соединение. iOS: URLSessionWebSocketTask (нативный, iOS 13+). Android: OkHttp WebSocket. Обязательная обработка reconnect: при onFailure — экспоненциальный backoff (1с → 2с → 4с → 8с → максимум 60с). Socket.IO — надстройка с автоматическим reconnect, но для новых проектов предпочтительнее нативный WebSocket (меньше зависимостей).

gRPC: для высоконагруженных сервисов

gRPC с protobuf — бинарная сериализация: меньше размер, быстрее парсинг. grpc-swift для iOS, grpc-kotlin для Android. Protobuf-схема компилируется в типизированные классы. Streaming (server-side, client-side, bidirectional) — нативная возможность. Порог применения: высокая частота запросов (trading, IoT) или критичная latency. Для обычного CRUD REST проще в дебаге и мониторинге.

Certificate Pinning и безопасность

Корпоративный proxy может перехватить HTTPS через подмену сертификата. Certificate pinning предотвращает это: приложение принимает только конкретный сертификат или публичный ключ. Alamofire: ServerTrustManager с PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner с SHA-256 хешем. Операционная сложность: при ротации сертификата старые версии приложения перестают работать. Решение — pinning на публичный ключ CA или поддержка нескольких пинов с grace period. Подробнее о certificate pinning на Wikipedia

Что входит в работу

Мы передаём: исходный код сетевого слоя, документацию по используемым библиотекам, инструкцию по ротации сертификатов, поддержку в течение 2 недель после сдачи.

Сроки и стоимость

Реализация сетевого слоя с REST, retry, кэшированием и offline-режимом — 1–2 недели. Добавление GraphQL или WebSocket — ещё 1–2 недели. gRPC — 2–3 недели, включая кодогенерацию. Стоимость рассчитывается индивидуально после анализа API и требований к offline-поведению. Оценим проект за 1 день — свяжитесь для консультации.