Представьте интернет-магазин без признаков жизни. Посетитель не видит, что другие покупают или просматривают товары — уходит с ощущением пустоты. Один из наших клиентов столкнулся с падением конверсии на 20% после редизайна. Анализ показал: новая версия не отображала активность других пользователей. Мы внедрили ленту активности в реальном времени. Результат — конверсия вернулась к прежнему уровню и выросла на 12%.
Мы строим Live Activity Feed — непрерывный поток событий: «Иван купил товар», «Мария оставила отзыв», «5 человек сейчас смотрят». Это создаёт социальное доказательство и удерживает посетителей. После внедрения конверсия стабильно растёт на 10–15%. За плечами команды 7 лет работы с высоконагруженными системами и более 50 успешных проектов.
Как лента активности решает проблему социального доказательства?
Лента показывает реальные действия пользователей в реальном времени, создавая эффект присутствия. Посетитель видит, что товар востребован, и принимает решение быстрее. Механизм дедупликации и анонимизации делает поток естественным, без спам-эффекта.
Проблемы, которые решаем
- Пустая страница без жизни. Нужен механизм мгновенного отображения активности. Без этого пользователи не чувствуют доверия.
- Спам и накрутка. Без фильтрации лента становится каналом для ботов. Внедряем дедупликацию, cooldown 30 секунд и анонимизацию имён.
- Производительность при пиках. SSE на Redis pub/sub выдерживает 10 000+ одновременных подписчиков без потери событий. Время доставки — менее 500 мс.
Как мы это делаем: стек и архитектура
Используем связку: Node.js (Express) на бэкенде, Redis для pub/sub, React 18 с EventSource на фронте. Этот подход легче и надёжнее WebSocket для односторонней трансляции. Согласно Server-Sent Events, SSE работает поверх стандартного HTTP, автоматически переподключается при обрыве.
Серверная генерация событий
class ActivityFeedService { async publishActivity(event: ActivityEvent): Promise<void> { // Сохранить в БД для новых посетителей await this.activityRepo.create(event); // Опубликовать в Redis для live-подписчиков await this.redis.publish('activity:feed', JSON.stringify(event)); // Очистить старые события (хранить 24 часа) await this.activityRepo.deleteOlderThan(24 * 60 * 60 * 1000); } } // Интеграция с бизнес-логикой orderService.on('order:created', async (order) => { const product = await productRepo.findById(order.items[0].productId); await activityFeed.publishActivity({ type: 'purchase', text: `${anonymizeName(order.customerName)} купил «${product.name}»`, location: order.customerCity, timestamp: new Date(), metadata: { productId: product.id } }); }); SSE Feed Endpoint
Пример реализации SSE endpoint
app.get('/api/activity/stream', (req, res) => { res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); // Отправить последние 10 событий activityRepo.findRecent(10).then(events => { res.write(`event: init\ndata: ${JSON.stringify(events)}\n\n`); }); // Подписаться на новые const subscriber = redis.duplicate(); subscriber.subscribe('activity:feed'); subscriber.on('message', (_, message) => { res.write(`event: activity\ndata: ${message}\n\n`); }); const heartbeat = setInterval(() => res.write(':ping\n\n'), 20000); req.on('close', () => { clearInterval(heartbeat); subscriber.unsubscribe(); subscriber.quit(); }); }); React компонент
function ActivityFeed() { const [activities, setActivities] = useState<Activity[]>([]); useEffect(() => { const source = new EventSource('/api/activity/stream'); source.addEventListener('init', (e) => { setActivities(JSON.parse(e.data)); }); source.addEventListener('activity', (e) => { const activity = JSON.parse(e.data); setActivities(prev => [activity, ...prev].slice(0, 20)); }); return () => source.close(); }, []); return ( <div className="activity-feed"> {activities.map((activity, i) => ( <ActivityItem key={activity.id} activity={activity} style={{ opacity: Math.max(0.3, 1 - i * 0.05) }} /> ))} </div> ); } function ActivityItem({ activity, style }) { const icons = { purchase: '🛍', review: '⭐', view: '👁' }; return ( <div className="activity-item" style={style}> <span className="icon">{icons[activity.type]}</span> <span className="text">{activity.text}</span> <span className="time">{formatRelativeTime(activity.timestamp)}</span> </div> ); } Почему SSE быстрее WebSocket для этой задачи?
SSE (Server-Sent Events) использует одно HTTP-соединение без дополнительных протоколов. Автоматическое переподключение встроено — при обрыве браузер сам восстанавливает стрим. WebSocket требует рукопожатия и поддержания соединения, что избыточно для одностороннего потока. Сравнение:
| Характеристика | SSE | WebSocket |
|---|---|---|
| Направление | Сервер → Клиент | Двустороннее |
| Протокол | HTTP | Собственный ws:// |
| Автоматическое переподключение | Да | Требует кода |
| Простота реализации | Высокая | Средняя |
| Поддержка браузерами | Все современные | Все современные |
Обеспечение реалистичности ленты
Алгоритм дедупликации предотвращает повтор одинаковых событий подряд. Мы анонимизируем имена (первый символ + *), вносим случайную задержку 0–5 секунд, ограничиваем частоту — не более одного события в 2 секунды на пользователя. Кроме того, храним историю за 24 часа, чтобы новый посетитель видел не пустой экран.
// Дедупликация — не показывать одинаковые события подряд const recentTexts = new Set<string>(); async function shouldPublish(event: ActivityEvent): Promise<boolean> { const key = `${event.type}:${event.metadata?.productId}`; if (recentTexts.has(key)) return false; recentTexts.add(key); setTimeout(() => recentTexts.delete(key), 30 * 1000); // 30 сек cooldown return true; } Процесс работы
- Аналитика: Определяем типы событий (покупки, отзывы, просмотры) и частоту обновления.
- Проектирование: Проектируем схему Redis, endpoint SSE, компоненты React.
- Реализация: Пишем сервис публикации, стриминг, клиентскую часть.
- Тестирование: Нагрузочное тестирование (до 10k подписчиков), проверка дедупликации.
- Деплой: Настройка Nginx для SSE, мониторинг Redis, документация.
| Этап | Длительность |
|---|---|
| Аналитика и проектирование | 1 день |
| Разработка бэкенда (Redis + SSE) | 1–2 дня |
| Интеграция React компонента | 1 день |
| Тестирование и деплой | 1 день |
| Итого | 3–5 дней |
Сроки ориентировочно
Базовая интеграция — 3–5 дней. Если нужна сложная логика (интеграция с CRM, кастомные фильтры) — до 10 дней. Типовой бюджет: от 50 000 до 150 000 рублей в зависимости от сложности. Точная стоимость рассчитывается на консультации.
Что входит в работу
- React-компонент ActivityFeed с анимацией затухания
- Node.js SSE endpoint с Redis pub/sub
- Антиспам и дедупликация
- Настройка Nginx для долгих соединений
- Документация по интеграции новых событий
- Обучение команды (1 час онлайн)
- Возможна экономия до 30% времени при использовании готовых компонентов
Типичные ошибки при реализации
- Не настроен heartbeat. Без ping-сообщений каждые 20 с балансировщики разрывают соединение.
- Отсутствие init-события. Новый посетитель видит пустой список, пока не появится первое событие.
- Утечка подписчиков. Если не отписываться при закрытии страницы, Redis накапливает мёртвые каналы.
Мы гарантируем стабильную работу ленты под нагрузкой и полную документацию. Свяжитесь с нами — обсудим ваш проект. Получите консультацию по внедрению ленты активности. Оценим задачу и предложим оптимальное решение.