Skip to content

pedramsafaei/Chillin-Chatroom

Repository files navigation

Chillin Chat Application Chillin

🎉 NEW: Now with distributed architecture support for horizontal scaling!

A comprehensive multi-tenant real-time chat room application built with React, Node.js, Socket.IO, PostgreSQL, Redis, and MinIO. This application provides a complete, production-ready chat solution with room management, user authentication, message persistence, horizontal scaling, and advanced real-time features.

🏗️ Architecture

Current Branch: feature/distributed-architecture-refactor

The application has been refactored to support distributed, horizontally scalable architecture:

  • Multiple API Server Instances - Run as many server instances as needed
  • PostgreSQL Database - Persistent storage for all data
  • Redis Pub/Sub - Cross-server message broadcasting
  • Redis Caching - Fast data access and session management
  • MinIO/S3 Storage - Scalable object storage for avatars and media
  • Load Balancer - Nginx with sticky sessions for WebSocket support
  • Optimistic UI Updates - Instant feedback on message send
  • Advanced Connection Management - Exponential backoff reconnection
  • Message Confirmation Flow - Real-time message state tracking

📖 Read the Complete Architecture Documentation

Tools being utilized

Features

Core Chat Functionality

  • ✅ Real-time messaging with Socket.IO
  • ✅ Multiple chat rooms support
  • ✅ User presence indicators (online users list)
  • ✅ Typing indicators showing when users are typing
  • ✅ Message persistence (PostgreSQL database)
  • ✅ Emoji support in messages
  • ✅ Responsive design (works on mobile and desktop)
  • ✅ User join/leave notifications

Multi-Tenancy Features

  • ✅ Room list/discovery page
  • ✅ Create custom rooms with names and descriptions
  • ✅ Private rooms with password protection
  • ✅ Room metadata (creation time, member count, creator)
  • ✅ Dynamic room member count updates

User Authentication

  • ✅ User registration system
  • ✅ User login system
  • ✅ User profiles with auto-generated avatars
  • ✅ Guest access (no authentication required)
  • ✅ Redis-based session management

Distributed Architecture Features (NEW)

  • Horizontal Scaling: Run multiple server instances
  • Optimistic UI Updates: Instant message feedback
  • Message States: Sending, sent, failed indicators
  • Connection State Machine: DISCONNECTED, CONNECTING, CONNECTED, RECONNECTING, FAILED
  • Exponential Backoff: Smart reconnection with max 10 attempts
  • Message Queue: Store messages while offline, send on reconnect
  • Message Confirmation: Temp ID to real ID mapping
  • Connection Status UI: Visual indicators and retry button
  • Cross-Server Messaging: Redis pub/sub for message broadcasting
  • Presence Tracking: Redis-based presence across all servers
  • Rate Limiting: 10 messages per 10 seconds per user
  • Message Validation Pipeline: Authentication, membership, sanitization, rate limiting

User Experience Enhancements

  • ✅ Message timestamps
  • ✅ Sender identification (your messages vs. others)
  • ✅ Loading states for async operations
  • ✅ Error handling and user feedback
  • ✅ Input validation throughout the application
  • ✅ Automatic scrolling to latest messages
  • ✅ Retry failed messages
  • ✅ Connection status banner

Error Handling & Validation

  • ✅ Empty message validation
  • ✅ Message length limits (500 characters)
  • ✅ Username validation (3-20 characters)
  • ✅ Room name validation (max 30 characters)
  • ✅ Password validation (minimum 6 characters)
  • ✅ Duplicate username prevention per room
  • ✅ Disconnected user handling
  • ✅ Invalid room name protection
  • ✅ XSS prevention
  • ✅ Rate limiting

CORS & Production Ready

  • ✅ Proper CORS configuration
  • ✅ Environment variable support
  • ✅ Comprehensive error logging
  • ✅ RESTful API endpoints
  • ✅ Health check endpoints
  • ✅ Docker containerization
  • ✅ Load balancer configuration
  • ✅ Database migrations

Project Structure

Chillin-Chatroom/
├── client/                     # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── Auth/          # Authentication UI
│   │   │   ├── Chat/          # Main chat interface
│   │   │   ├── ConnectionStatus/ # Connection status banner (NEW)
│   │   │   ├── InfoBar/       # Room header
│   │   │   ├── Input/         # Message input
│   │   │   ├── Join/          # Join interface
│   │   │   ├── Messages/      # Message list
│   │   │   ├── RoomList/      # Room discovery
│   │   │   └── TextContainer/ # Online users
│   │   ├── hooks/
│   │   │   ├── useSocketConnection.js    # Connection state machine (NEW)
│   │   │   └── useOptimisticMessages.js  # Optimistic updates (NEW)
│   │   └── App.js
│   ├── Dockerfile             # Client Docker image (NEW)
│   └── package.json
├── server/                     # Node.js backend
│   ├── database/              # Database layer (NEW)
│   │   ├── connection.js      # PostgreSQL connection pool
│   │   ├── migrations.js      # Database schema
│   │   └── models/            # Data models
│   │       ├── User.js
│   │       ├── Room.js
│   │       ├── Message.js
│   │       └── Reaction.js
│   ├── redis/                 # Redis layer (NEW)
│   │   ├── connection.js      # Redis clients
│   │   ├── presence.js        # Presence management
│   │   ├── session.js         # Session management
│   │   └── cache.js           # Caching utilities
│   ├── storage/               # Object storage (NEW)
│   │   └── s3Client.js        # S3/MinIO client
│   ├── middleware/            # Middleware (NEW)
│   │   └── messageValidation.js # Validation pipeline
│   ├── index.js               # Main server (UPDATED)
│   ├── users.js               # User management (legacy)
│   ├── auth.js                # Authentication
│   ├── rooms.js               # Room management
│   ├── Dockerfile             # Server Docker image (NEW)
│   ├── .env.example           # Environment template (NEW)
│   └── package.json
├── docker-compose.yml         # Multi-service orchestration (NEW)
├── nginx.conf                 # Load balancer config (NEW)
├── ARCHITECTURE.md            # Architecture documentation (NEW)
└── README.md

Installation & Setup

Option 1: Docker Compose (Recommended)

This method sets up the entire distributed infrastructure with one command.

# Clone repository
git clone <repository-url>
cd Chillin-Chatroom

# Checkout distributed architecture branch
git checkout feature/distributed-architecture-refactor

# Copy environment file
cp server/.env.example server/.env

# Start all services (PostgreSQL, Redis, MinIO, API servers, Nginx)
docker-compose up -d

# View logs
docker-compose logs -f

# Access application
open http://localhost:5000  # Load balancer
open http://localhost:9001  # MinIO console (minioadmin/minioadmin)

Services Started:

  • PostgreSQL: localhost:5432
  • Redis: localhost:6379
  • MinIO: localhost:9000 (API), localhost:9001 (Console)
  • API Server 1: localhost:5001
  • API Server 2: localhost:5002
  • Load Balancer: localhost:5000

Option 2: Local Development

For development without Docker:

Prerequisites

  • Node.js (v18 or higher)
  • PostgreSQL 15+
  • Redis 7+
  • MinIO (optional, for file storage)

Server Setup

cd server

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env with your database/redis credentials

# Start PostgreSQL and Redis (if not using Docker)
# Linux/Mac: brew services start postgresql redis
# Or use Docker: docker run -d -p 5432:5432 postgres:15
#                docker run -d -p 6379:6379 redis:7

# Start server
npm run dev

Client Setup

cd client

# Install dependencies
npm install

# Start development server
npm start

Usage Guide

Quick Start (Guest Access)

  1. Go to http://localhost:5000 (or 3000 for local dev)
  2. Enter your name and room name
  3. Click the arrow button to join
  4. Start chatting!

Browse & Join Rooms

  1. Click "Browse Rooms" on the home page
  2. Enter your name
  3. View available rooms with member counts
  4. Click "Join Room" on any room
  5. Enter password if the room is private

Create a New Room

  1. Go to Browse Rooms page
  2. Click "Create New Room"
  3. Enter room name, description (optional)
  4. Set password for private room (optional)
  5. Click "Create Room"

Authentication (Optional)

  1. Click "Login / Register" on home page
  2. Register a new account or login
  3. Sessions managed in Redis for fast access

API Endpoints

Authentication

  • POST /api/auth/register - Register new user
  • POST /api/auth/login - Login existing user

Room Management

  • GET /api/rooms - Get list of all rooms (cached)
  • POST /api/rooms/create - Create new room
  • POST /api/rooms/join - Join room (with password if private)
  • GET /api/rooms/:roomName/messages - Get message history

Health & Monitoring

  • GET /health - Server health check

Socket.IO Events

Client → Server

  • join - Join a chat room
  • sendMessage - Send a message with temp ID
  • typing - Notify room that user is typing
  • stopTyping - Notify room that user stopped typing
  • disconnect - User disconnected

Server → Client

  • message - New message received
  • messageConfirmed - Message ID confirmation (NEW)
  • messageHistory - Initial message history on join
  • roomData - Updated room user list
  • userTyping - Another user started typing
  • userStoppedTyping - Another user stopped typing

Configuration

Environment Variables

See server/.env.example for all options:

# Server
PORT=5000
CLIENT_ORIGIN=http://localhost:3000

# Database
DB_HOST=localhost
DB_PORT=5432
DB_NAME=chillin_chatroom
DB_USER=postgres
DB_PASSWORD=postgres

# Redis
REDIS_URL=redis://localhost:6379

# S3/MinIO
USE_MINIO=true
MINIO_ENDPOINT=http://localhost:9000
S3_ACCESS_KEY_ID=minioadmin
S3_SECRET_ACCESS_KEY=minioadmin
S3_BUCKET_NAME=chillin-chatroom

Data Persistence

The application uses PostgreSQL for all persistent data:

  • Messages: Full message history with timestamps
  • Rooms: Room metadata, settings, passwords (hashed)
  • Users: User profiles with hashed passwords
  • Sessions: Session data (also in Redis for performance)
  • Reactions: Message reactions (future feature)

Redis stores:

  • Presence: Online users per room (5-minute TTL)
  • Sessions: Active user sessions (24-hour TTL)
  • Cache: Room lists, recent messages (1-5 minute TTL)

Security Features

  • Password hashing using SHA-256 (bcrypt recommended for production)
  • Input validation and XSS prevention
  • Message length limits (500 characters)
  • Rate limiting (10 messages per 10 seconds)
  • Username uniqueness per room
  • Protected private rooms
  • CORS configuration
  • Parameterized database queries (SQL injection prevention)
  • Content sanitization pipeline

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Performance

  • Message Latency: < 50ms (same server), < 100ms (cross-server)
  • Concurrent Connections: 10,000+ per server instance
  • Messages per Second: 1,000+ per server instance
  • Horizontal Scaling: Linear with additional instances

Monitoring

Health Checks

# Check API server health
curl http://localhost:5000/health

# Check individual servers
curl http://localhost:5001/health
curl http://localhost:5002/health

Logs

# All services
docker-compose logs -f

# Specific service
docker-compose logs -f api-server-1
docker-compose logs -f postgres
docker-compose logs -f redis

Troubleshooting

Docker Issues

# Rebuild containers
docker-compose down
docker-compose up --build -d

# Reset all data
docker-compose down -v  # Warning: deletes all data!
docker-compose up -d

Connection Issues

  • Check all services are running: docker-compose ps
  • Verify load balancer config: docker-compose logs nginx
  • Test direct server access: http://localhost:5001/health

Database Issues

  • Check migrations ran: docker-compose logs api-server-1 | grep migration
  • Connect to database: docker-compose exec postgres psql -U postgres -d chillin_chatroom
  • View tables: \dt in psql

Redis Issues

  • Check connection: docker-compose exec redis redis-cli ping
  • View keys: docker-compose exec redis redis-cli keys '*'
  • Monitor commands: docker-compose exec redis redis-cli monitor

Migration from Legacy Version

The distributed architecture maintains backward compatibility with the legacy single-server version. Existing data can be migrated from JSON files to PostgreSQL.

Contributing

This project is part of a private discord server community. When contributing:

  1. Test with docker-compose for full stack validation
  2. Test horizontal scaling with multiple server instances
  3. Update both README.md and ARCHITECTURE.md
  4. Follow existing code patterns
  5. Add tests for new features

License

This project is open source and available for personal use.

Live Server

  • To be deployed (production deployment guide coming soon)

Acknowledgments

Built with ❤️ for the community. Special thanks to all contributors!

About

Real-time Chat Application

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages