Реалізація Live Activity Feed (стрічка активності) на сайті

Реалізація Live Activity Feed на сайті

Live Activity Feed — потік подій у реальному часі: «Іван купив товар», «Марія залишила відзив», «5 людей сейчас переглядають». Створює відчуття живої активності та соціального доказу.

Серверна генерація подій

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>
  );
}

Anti-spam та реалістичність

// Дедупліація — не показуємо однакові події підряд
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;
}

Часові рамки

Activity Feed з SSE, Redis та React компонентом: 3–5 днів.