How to Design Facebook Messenger: Scalable Real-Time Chat Architecture

To design Facebook Messenger, build a system with real-time messaging using WebSocket or similar protocols, a message queue for delivery guarantees, and a database for storing messages and user data. Include presence tracking and push notifications for active user updates and offline alerts.

Syntax

Designing Facebook Messenger involves these key components:

• Client: Mobile or web app using WebSocket for real-time communication.
• API Gateway: Handles client requests and routes them to backend services.
• Message Service: Manages sending, receiving, and queuing messages.
• Database: Stores user profiles, message history, and chat metadata.
• Presence Service: Tracks online/offline status of users.
• Notification Service: Sends push notifications for new messages.

javascript

class MessengerSystem {
  constructor() {
    this.clients = new Map(); // userId -> WebSocket connection
    this.messageQueue = []; // store messages temporarily
    this.database = new Database(); // persistent storage
    this.presence = new PresenceService();
    this.notifications = new NotificationService();
  }

  connectUser(userId, socket) {
    this.clients.set(userId, socket);
    this.presence.setOnline(userId);
  }

  sendMessage(fromUser, toUser, message) {
    const msg = { from: fromUser, to: toUser, text: message, timestamp: Date.now() };
    this.messageQueue.push(msg);
    this.database.saveMessage(msg);
    if (this.clients.has(toUser)) {
      this.clients.get(toUser).send(JSON.stringify(msg));
    } else {
      this.notifications.push(toUser, msg);
    }
  }

  disconnectUser(userId) {
    this.clients.delete(userId);
    this.presence.setOffline(userId);
  }
}

Example

This example shows a simple Node.js WebSocket server handling real-time chat messages between users, storing messages, and notifying offline users.

javascript

import WebSocket, { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });
const clients = new Map(); // userId -> ws connection
const messages = [];

wss.on('connection', (ws, req) => {
  const userId = new URL(req.url, 'http://localhost').searchParams.get('userId');
  clients.set(userId, ws);
  console.log(`${userId} connected`);

  ws.on('message', (data) => {
    const msg = JSON.parse(data);
    messages.push(msg);
    const receiverWs = clients.get(msg.to);
    if (receiverWs) {
      receiverWs.send(JSON.stringify(msg));
    } else {
      console.log(`User ${msg.to} offline, store notification`);
    }
  });

  ws.on('close', () => {
    clients.delete(userId);
    console.log(`${userId} disconnected`);
  });
});

Output

User connections logged; messages sent in real-time if receiver online; offline users logged for notification.

Common Pitfalls

Common mistakes when designing a chat system like Facebook Messenger include:

• Not handling offline message delivery properly, causing message loss.
• Using HTTP polling instead of WebSocket, leading to high latency and resource waste.
• Storing messages only in memory without persistence, risking data loss on crashes.
• Ignoring user presence updates, which reduces user experience.
• Not scaling message queues and databases, causing bottlenecks under high load.

javascript

/* Wrong: Using HTTP polling for messages */
setInterval(() => {
  fetch('/getMessages?userId=123')
    .then(res => res.json())
    .then(data => console.log(data));
}, 5000);

/* Right: Using WebSocket for real-time messages */
const ws = new WebSocket('wss://chat.example.com?userId=123');
ws.onmessage = (event) => {
  console.log('New message:', event.data);
};

Quick Reference

Summary tips for designing Facebook Messenger:

• Use WebSocket for real-time bidirectional communication.
• Implement message queues to ensure reliable delivery.
• Persist messages in a database for history and recovery.
• Track user presence to show online status.
• Send push notifications for offline users.
• Design for horizontal scaling to handle millions of users.

Key Takeaways

Use WebSocket for real-time, low-latency messaging between clients and servers.

Persist messages in a database to prevent data loss and enable chat history.

Implement presence and notification services to improve user experience.

Use message queues to handle delivery guarantees and scale under load.

Design components to scale horizontally for millions of concurrent users.