Real-Time Chat System
Designed and implemented a real-time messaging system using Phoenix WebSockets with mux/demux architecture and offline-first reliability.
Overview
At Yassir, I designed and built the real-time messaging system that connects riders and drivers during active rides. Communication needed to be instant, reliable on poor network conditions, and rich enough to support text, voice messages, and delivery status — all within a single cohesive inbox experience.
The architecture centers on Phoenix Elixir channels over WebSocket, with a mux/demux layer that multiplexes multiple chat rooms over one connection, an offline-first local cache, and a retry mechanism to guarantee message delivery when connectivity is restored.
WebSocket Connection Management
Phoenix channels with mux/demux architecture over a single WebSocket
Instead of opening a separate WebSocket per conversation, I built a user-centered inbox with a mux/demux architecture on top of Phoenix Elixir framework channels — keeping one persistent connection while supporting many simultaneous chat rooms.
- ● Mux — multiplexes outgoing messages from multiple chat rooms over a single WebSocket connection
- ● Demux — routes incoming messages to the correct chat room based on channel topic and message envelope
- ● Unified inbox UI showing all active ride conversations with real-time updates
Main chat inbox
Chat with voice message backdrop
Microphone permission modal
Idle chat state
Typing with keyboard open
Typing a long message
Retry Mechanism for Reliable Delivery
Offline-first architecture with guaranteed message delivery
Ride-hailing users frequently lose connectivity in tunnels, rural areas, and during network handoffs. I built the messaging layer to be offline-first — messages are persisted locally and queued for delivery, then automatically sent when the WebSocket connection is restored.
- ● Room database for local message persistence and conversation history
- ● DataStore for connection state, user preferences, and sync metadata
- ● Outbound message queue with automatic retry on reconnection
- ● Optimistic UI updates — messages appear instantly, sync in background
Start voice recording
Active voice recording
Recording timer
One minute recording limit
Send one minute recording
Voice message sent in chat
Voice message bubble
Resume recording
Pause recording
Discard recording dialog
Play and review recording
Receive voice message empty state
Received voice message
Start voice playback
Voice playback progress
Real-Time Features
Rich messaging with status tracking and push notifications
Beyond basic text chat, the system supports the full range of features riders and drivers expect during a live ride — from voice messages to granular delivery status.
- ● Text messaging with typing indicators and read receipts (sent / delivered / read)
- ● Voice messages — record, review with waveform preview, then send
- ● Push notifications for new messages when the app is backgrounded
- ● Per-message status tracking with visual indicators in the conversation UI
Message sending status
Message delivered status
Message sending failed
Push notification for new message
Impact
Real-time
Sub-second message delivery during active rides
Offline-first
Zero message loss on intermittent connectivity
Reliable in-ride communication reduced missed pickups, improved rider–driver coordination, and replaced phone calls with a seamless in-app experience built for African network conditions.