Реализация 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 дней.