frontendbackendservicedatabasecachecdn

Real-Time Chat System

Scalable chat with WebSocket connections, message persistence, presence tracking, push notifications, and media sharing.

10 components10 connections6 types

Open Interactive Diagram Browse All

Components

frontend

Chat Clients

Web and mobile apps with real-time message display and typing indicators.

backend

WebSocket Gateway

Manages persistent connections, authenticates users, routes messages.

service

Chat Service

Message handling, conversation management, and group chat logic.

service

Presence Service

Online/offline status, last seen, typing indicators via pub/sub.

service

Media Service

Image/video upload, compression, thumbnail generation.

service

Push Service

FCM/APNs push notifications for offline users.

service

Message Search

Full-text search across message history with Elasticsearch.

database

Message Store

Cassandra/ScyllaDB for high-write message storage with TTL.

cache

Redis Pub/Sub

Fan-out messages to WebSocket servers, presence state, rate limiting.

cdn

Media CDN

Edge delivery for shared images, videos, and files.

Data Flow

Chat ClientsWebSocket GatewayWebSockethigh

WebSocket GatewayChat ServiceSend messagehigh

Chat ServiceMessage StorePersist messagehigh

Chat ServiceRedis Pub/SubPublish to channelhigh

Redis Pub/SubWebSocket GatewayFan-out to connectionshigh

WebSocket GatewayPresence ServiceUpdate presencemedium

Chat ServicePush ServiceNotify offlinemedium

Chat ClientsMedia ServiceUpload mediamedium

Media ServiceMedia CDNDistributemedium

Chat ServiceMessage SearchIndex messagesmedium

Try it interactively

Explore this architecture with animated data flows, node auditing, and AI-powered analysis.

Open in Codelit

Learn More

AI search

AI-Powered Search Architecture: Semantic Search, Hybrid Search, and RAG

8 min read AI safety

AI Safety Guardrails Architecture: Input Validation, Output Filtering, and Human-in-the-Loop

8 min read API design

API Backward Compatibility: Ship Changes Without Breaking Consumers

6 min read

Related Architectures

Instagram-like Photo Sharing Platform

Full-stack social media platform with image processing, feeds, and real-time notifications.

12 components · 11 connections

Real-Time Collaborative Editor

Notion-like document editor with real-time collaboration, conflict resolution, and rich media.

9 components · 9 connections

Discord Voice & Communication Platform

Handles millions of concurrent voice calls with WebRTC, media servers, and guild-based routing.

10 components · 9 connections

URL Shortener Service

Scalable URL shortening with analytics, custom aliases, and expiration.

7 components · 7 connections