Designing a Scalable Real-Time Messaging Architecture Like WhatsApp

+----------------------------------------------------------------------+
|                     Real-Time Messaging Architecture                 |
|                                                                      |
|  [ Client A ] === WebSocket ===> [ Gateway Cluster ]                 |
|                                         |                            |
|                                         v (Session Registry)         |
|  [ Client B ] <== WebSocket === [ Redis Session Broker ]             |
+----------------------------------------------------------------------+

// Message Dispatch Flow:
async function sendMessage(fromUserId: string, toUserId: string, messageText: string) {
  // 1. Persist message with status: SENT
  const message = await db.message.create({
    data: { fromUserId, toUserId, text: messageText, status: 'SENT' }
  });

  // 2. Check if recipient is online in Redis
  const session = await redis.hget('active_sessions', toUserId);
  if (session) {
    const { serverId, socketId } = JSON.parse(session);
    // Publish to specific gateway server channel
    await redis.publish(`gateway:${serverId}`, JSON.stringify({ socketId, message }));
  } else {
    // 3. Recipient offline: Enqueue into Offline Message Queue
    await offlineQueue.push(toUserId, message.id);
  }

  return message;
}

1. Single Tick (Sent):      Server acknowledges receipt and assigns message ID.
2. Double Tick (Delivered): Recipient device sends delivery ACK back to server.
3. Blue Ticks (Read):       Recipient opens chat window and sends read ACK.