Уявіть інтернет-магазин без ознак життя. Відвідувач не бачить, що інші купують або переглядають товари — йде з відчуттям порожнечі. Один з наших клієнтів зіткнувся з падінням конверсії на 20% після редизайну. Аналіз показав: нова версія не відображала активність інших користувачів. Ми впровадили стрічку активності в реальному часі. Результат — конверсія повернулася до попереднього рівня і зросла на 12%.
Ми будуємо Live Activity Feed — безперервний потік подій: «Іван купив товар», «Марія залишила відгук», «5 осіб зараз дивляться». Це створює соціальний доказ і утримує відвідувачів. Після впровадження конверсія стабільно зростає на 10–15%. За плечима команди багаторічний досвід роботи з високонавантаженими системами та понад 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 днів. Точна вартість визначається після аналізу.
Що входить в роботу
- React-компонент ActivityFeed з анімацією затухання
- Node.js SSE endpoint з Redis pub/sub
- Антиспам та дедуплікація
- Налаштування Nginx для довгих з'єднань
- Документація з інтеграції нових подій
- Навчання команди (1 година онлайн)
- Можлива економія до 30% часу при використанні готових компонентів
Типові помилки при реалізації
- Не налаштований heartbeat. Без ping-повідомлень кожні 20 с балансувальники розривають з'єднання.
- Відсутність init-події. Новий відвідувач бачить порожній список, доки не з'явиться перша подія.
- Витік підписників. Якщо не відписуватися при закритті сторінки, Redis накопичує мертві канали.
Ми гарантуємо стабільну роботу стрічки під навантаженням і повну документацію. Зв'яжіться з нами — обговоримо ваш проєкт. Отримайте консультацію щодо впровадження стрічки активності. Оцінимо задачу і запропонуємо оптимальне рішення.