Створення Live Activity Feed (стрічки активності) на сайті

Уявіть інтернет-магазин без ознак життя. Відвідувач не бачить, що інші купують або переглядають товари — йде з відчуттям порожнечі. Один з наших клієнтів зіткнувся з падінням конверсії на 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

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 вимагає рукостискання та підтримки з'єднання, що є надлишковим для одностороннього потоку. Порівняння:

Забезпечення реалістичності стрічки

Алгоритм дедуплікації запобігає повтору однакових подій підряд. Ми анонімізуємо імена (перший символ + *), вносимо випадкову затримку 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;
}

Процес роботи

1. Аналітика: Визначаємо типи подій (покупки, відгуки, перегляди) та частоту оновлення.
2. Проектування: Проектуємо схему Redis, endpoint SSE, компоненти React.
3. Реалізація: Пишемо сервіс публікації, стрімінг, клієнтську частину.
4. Тестування: Навантажувальне тестування (до 10k підписників), перевірка дедуплікації.
5. Деплой: Налаштування Nginx для SSE, моніторинг Redis, документація.

Терміни орієнтовно

Базова інтеграція — 3–5 днів. Якщо потрібна складна логіка (інтеграція з CRM, кастомні фільтри) — до 10 днів. Точна вартість визначається після аналізу.

Що входить в роботу

• React-компонент ActivityFeed з анімацією затухання
• Node.js SSE endpoint з Redis pub/sub
• Антиспам та дедуплікація
• Налаштування Nginx для довгих з'єднань
• Документація з інтеграції нових подій
• Навчання команди (1 година онлайн)
• Можлива економія до 30% часу при використанні готових компонентів

Типові помилки при реалізації

• Не налаштований heartbeat. Без ping-повідомлень кожні 20 с балансувальники розривають з'єднання.
• Відсутність init-події. Новий відвідувач бачить порожній список, доки не з'явиться перша подія.
• Витік підписників. Якщо не відписуватися при закритті сторінки, Redis накопичує мертві канали.

Ми гарантуємо стабільну роботу стрічки під навантаженням і повну документацію. Зв'яжіться з нами — обговоримо ваш проєкт. Отримайте консультацію щодо впровадження стрічки активності. Оцінимо задачу і запропонуємо оптимальне рішення.