Реализация индикатора набора текста в чате мобильного приложения
«Три точки» в мессенджере — один из тех мелких элементов UX, который пользователи замечают только когда его нет. Реализация кажется тривиальной, пока не упираешься в дебаунс, консистентность между устройствами и правильную работу в условиях нестабильного соединения.
Как устроена механика на практике
Базовая схема: клиент отправляет событие typing_start при каждом нажатии клавиши, собеседник видит индикатор, через N секунд без новых событий индикатор гаснет. На бумаге просто. На практике — три типичные проблемы.
Флуд событий. Без дебаунса каждый onTextChanged (Android) или textDidChange (iOS) генерирует сетевой вызов. Пользователь, пишущий сообщение за 5 секунд, создаёт 20–30 лишних запросов. Правильное решение — отправлять typing_start только если прошло более 2–3 секунд с момента предыдущей отправки, и typing_stop с задержкой ~4 секунды после последнего символа.
На Android это реализуется через Handler.postDelayed или debounce оператор в RxJava/Kotlin Flow:
private var typingJob: Job? = null
fun onTextChanged(text: String) {
if (text.isEmpty()) {
sendTypingStop()
return
}
typingJob?.cancel()
typingJob = viewModelScope.launch {
delay(TYPING_THROTTLE_MS) // 3000ms
sendTypingStart()
}
}
На iOS аналогичная логика через Timer.scheduledTimer или Combine:
private var typingCancellable: AnyCancellable?
func textDidChange(_ text: String) {
typingCancellable?.cancel()
typingCancellable = Just(text)
.delay(for: .seconds(3), scheduler: RunLoop.main)
.sink { [weak self] _ in self?.sendTypingStart() }
}
Транспортный слой. Индикатор набора — это эфемерное состояние, которое не требует гарантий доставки. Поэтому REST/HTTP здесь избыточен. Оптимальный выбор — WebSocket или Firebase Realtime Database. Через WebSocket отправляем лёгкий JSON-пакет {"type":"typing","chat_id":"...","user_id":"..."}. Через Firebase — запись в эфемерный узел /typing/{chatId}/{userId} с TTL через onDisconnect().removeValue(). Второй вариант автоматически чистит состояние при разрыве соединения — что критично.
Отображение на приёмнике. После получения события нужно показать индикатор и запустить таймер очистки (~5 секунд). Если за это время придёт новое событие — таймер сбрасывается. Анимация трёх точек: на iOS — кастомный CABasicAnimation или Lottie, на Android — AnimationDrawable или Lottie-анимация через LottieAnimationView. Flutter решает это через AnimatedOpacity + Timer.
Что делаем
Анализируем существующий транспортный слой чата (WebSocket, Firebase, XMPP — у всех свои нюансы), добавляем дебаунс на клиенте, реализуем отображение с правильной анимацией и автоочисткой состояния. Если чата ещё нет — проектируем с нуля под нужный стек.
Срок: 1–3 дня в зависимости от сложности текущей архитектуры чата.