BACK_TO_PORTFOLIO
// SYS.ID: 004
REAL-TIME

REAL-TIME
CHAT APP_

A full-stack bidirectional messaging platform powered by Socket.io WebSockets, supporting private 1-on-1 chats and multi-user group rooms with persistent message storage in MongoDB.

VIEW_ON_GITHUB
WS
Protocol
<50ms
Latency
∞
Persistent Msgs
N:N
Group Support
// OVERVIEW

This application implements full-duplex, event-driven communication using the Socket.io library on top of WebSockets. The architecture supports both private (1-to-1) and group room messaging, with each room being isolated in its own Socket.io namespace.

All messages are persisted in MongoDB, so chat history is available across sessions. The React frontend renders chat threads in real time using optimistic UI updates — messages appear instantly in the sender's UI before server acknowledgment.

// TECH_STACK
Real-Time Layer
  • → Socket.io v4 (server + client)
  • → Room-based event namespacing
  • → Online presence tracking
  • → Typing indicator events
  • → Auto-reconnection handling
App Layer
  • → React.js (SPA frontend)
  • → Node.js + Express (API server)
  • → MongoDB (message persistence)
  • → JWT authentication
  • → Zustand state management
// SOCKET_EVENT_FLOW
EMIT send_message → { roomId, content, senderId }
ON receive_message → broadcast to room members
EMIT typing → { roomId, userId } (debounced 300ms)
ACK message_saved → persist to MongoDB + confirm to sender
ON user_disconnected → update presence, notify room
// CHALLENGES & SOLUTIONS
01.
Message Ordering — With async delivery, messages can arrive out-of-order under load. Added server-assigned sequence numbers and client-side sorting by timestamp.
02.
Scalability — A single Node.js process handles Socket.io rooms well, but horizontal scaling requires shared state. Used Redis adapter for Socket.io to share room state across instances.
03.
Optimistic UI Consistency — Showing a message immediately before server confirmation risks showing messages that fail. Added rollback logic: failed messages show a retry indicator and are rolled back from the UI state.
MERN Stack Socket.io React.js Node.js MongoDB WebSockets JWT Redis Adapter