Представьте интернет-магазин без признаков жизни. Посетитель не видит, что другие покупают или просматривают товары — уходит с ощущением пустоты. Один из наших клиентов столкнулся с падением конверсии на 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 накапливает мёртвые каналы.
Мы гарантируем стабильную работу ленты под нагрузкой и полную документацию. Свяжитесь с нами — обсудим ваш проект. Получите консультацию по внедрению ленты активности. Оценим задачу и предложим оптимальное решение.