Live Activity Feed on Website

Live Activity Feed Implementation on Website

Live Activity Feed is a stream of real-time events: "Ivan bought item", "Maria left review", "5 people viewing now". Creates sense of live activity and social proof.

Server Event Generation

class ActivityFeedService {
  async publishActivity(event: ActivityEvent): Promise<void> {
    // Save to DB for new visitors
    await this.activityRepo.create(event);

    // Publish to Redis for live subscribers
    await this.redis.publish('activity:feed', JSON.stringify(event));

    // Clean old events (keep 24 hours)
    await this.activityRepo.deleteOlderThan(24 * 60 * 60 * 1000);
  }
}

// Integration with business logic
orderService.on('order:created', async (order) => {
  const product = await productRepo.findById(order.items[0].productId);

  await activityFeed.publishActivity({
    type: 'purchase',
    text: `${anonymizeName(order.customerName)} bought "${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');

  // Send last 10 events
  activityRepo.findRecent(10).then(events => {
    res.write(`event: init\ndata: ${JSON.stringify(events)}\n\n`);
  });

  // Subscribe to new
  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 Component

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 and Realism

// Deduplication — don't show same events in a row
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 sec cooldown
  return true;
}

Timeline

Activity Feed with SSE, Redis and React component: 3–5 days.