// Generated by orrery. Edit the diagram spec and re-render instead of editing this file. import { type SVGProps, useId } from "react"; export default function ChatSystemDesign(props: SVGProps) { const uid = useId().replace(/[^A-Za-z0-9_-]/g, ""); return ( Chat system design Chat system design. 13 components. Connections: Clients to Load balancer (WebSocket); Load balancer to WebSocket gateway; WebSocket gateway to Chat service; WebSocket gateway to Presence service; Presence service to Presence store; Chat service to Presence store (who is online); Push service to Presence store (offline?); Chat service to Message store (load history); Chat service to messages; messages to Message store (persist); messages to Push service (notify); Push service to APNs; Push service to FCM; Clients to Media storage (upload); Media storage to CDN; Clients to CDN (download). CHAT SYSTEM DESIGN WebSocket gateways keep clients connected; messages go through Kafka to Cassandra and to push providers for offline users WEBSOCKET WEBSOCKET WHO IS ONLINE OFFLINE? OFFLINE? LOAD HISTORY PERSIST NOTIFY NOTIFY UPLOAD DOWNLOAD CLIENTS Mobile and web LOAD BALANCER L4, Upgrade-aware WEBSOCKET GATEWAY Open connections X4 CHAT SERVICE Ordering, fan-out, presigned URLs PRESENCE SERVICE Heartbeats MESSAGES Kafka topic PRESENCE STORE Redis with TTL keys MESSAGE STORE Cassandra PUSH SERVICE Offline users APNS Apple Push Notification service FCM Firebase Cloud Messaging MEDIA STORAGE Presigned uploads CDN Media downloads CHAT TRAFFIC MEDIA TRANSFER ); }