A feature-rich, real-time chat application with room-based architecture, built using Node.js, Express, and Socket.IO. Experience seamless communication with public/private rooms, typing indicators, and a stunning dark-themed UI optimized for all devices.
- Features
- Tech Stack
- Project Structure
- System Architecture
- How to Run Locally
- Live Demo
- Screenshots
- Learning Outcomes
- Security Considerations
- Future Enhancements
- Contributing
- License
- Support
- Create custom chat rooms with unique names
- Browse all available rooms before joining
- Seamless room switching without page reloads
- Rooms are temporary and exist only while users are active (no database required)
- Rooms are automatically deleted when the last user leaves or when the room creator exits
- Public Rooms: Open for anyone to join
- Private Rooms: Password-protected for exclusive access
- Server-side password validation ensures security
- Room creator becomes the owner with special privileges
- Owner name displayed in room listings
- Set maximum user limits per room (2-100 users)
- Visual occupancy indicators (e.g.,
3 / 10) - System-wide limit of 101 users per room to prevent overload
- Unique usernames required within each room
- Real-time typing indicators ("User is typing...")
- Live user count updates
- Room status indicators (Public/Private)
- Available slots visualization
- Instant join/leave notifications
- Dark theme with glassmorphism effects
- Fully responsive design (mobile, tablet, desktop)
- Smooth animations for room transitions and messages
- Intuitive navigation with clear visual hierarchy
| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, Vanilla JavaScript |
| Backend | Node.js, Express.js |
| Real-time | Socket.IO (WebSocket) |
| Deployment | Render (Cloud Platform) |
Open_Chat_Application/
│
├── uiLayer/ # Frontend files
│ ├── homeView.html # Main chat interface
│ ├── design.css # Styling and animations
│ └── realtime.js # Client-side Socket.IO logic
│
├── rtrpServer.js # Express + Socket.IO server
├── package.json # Dependencies
├── package-lock.json
│
├── docs/ # documents
│ ├── project-report.docx
│ └── abstract.pdf
│
├── presentations/ # PPTs
│ ├── review-1.pptx
│ └── review-2.pptx
│
├── screenshots/ # UI screenshots
│ ├── chat-room.png
│ ├── create-room.png
│ ├── desktop-view.png
│ ├── mobile-view.png
│ ├── render-deploy.png
│ └── websocket-101.png
│
└── README.md
┌─────────────┐ HTTP/WebSocket ┌─────────────┐
│ Browser │ ◄──────────────────────────────► │ Node.js │
│ (Client) │ │ Server │
└─────────────┘ └─────────────┘
│ │
│ 1. HTTP GET (homeView.html) │
│────────────────────────────────────────────────►│
│ │
│ 2. Establish WebSocket Connection │
│◄ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ►│
│ │
│ 3. Create/Join Room │
│────────────────────────────────────────────────►│
│ │
│ 4. Real-time Messages & Updates │
│◄────────────────────────────────────────────────│
Key Components:
- Client: Sends messages, joins rooms, displays UI
- Server: Manages rooms, broadcasts messages, validates actions
- Socket.IO: Maintains persistent WebSocket connections
- Room Manager: Tracks active rooms, users, and metadata
- Node.js (v14 or higher)
- npm (Node Package Manager)
- Clone the repository:
git clone https://github.com/Harshith1702/Open_Chat_Application.git- Navigate to project directory:
cd Open_Chat_Application- Install dependencies:
npm install- Start the server:
npm start- Open in browser:
http://localhost:4000
Note: Hosted on Render's free tier. Initial load may take 30-60 seconds if the service is idle.
Spacious layout with room list sidebar and chat area
Optimized for touch interactions and smaller screens
Intuitive room creation with all options visible
Real-time messaging with typing indicators and user list
Browser DevTools showing an active WebSocket (HTTP 101 upgrade) connection via Socket.IO
Live deployment on Render platform
This project demonstrates proficiency in:
- WebSocket Communication - Bidirectional real-time data transfer
- Event-Driven Architecture - Socket.IO event handling
- State Management - Client-side and server-side synchronization
- Responsive Design - Mobile-first CSS approach
- Room-Based Architecture - Multi-room chat system design
- Security Fundamentals - Password validation, input sanitization
- Cloud Deployment - Auto-deployed on Render via GitHub integration
- Git Workflow - Version control and collaboration
- Server-side room password validation
- Basic input validation to prevent malformed data
- Controlled room limits to avoid server overload
- No persistent storage (reduces attack surface)
Note: This project focuses on real-time systems learning, not production-grade security.
- Private Direct Messaging: One-to-one conversations using
socket.to(targetSocketId).emit()— leverages existing Socket.IO infrastructure - Message Reactions & Emojis: Per-message emoji reactions stored in room state and broadcast on interaction
- File and Image Sharing: Base64 encoding for small files over Socket.IO, or multipart HTTP upload for larger assets
- Room Moderation Tools: Owner can kick users, set message rate limits, and transfer ownership
- Enhanced Room Discovery: Search filters, sorting by activity, and room categories
- Horizontal Scalability: Socket.IO Redis Adapter to synchronize events across multiple server instances behind a load balancer
Design Philosophy: This project intentionally avoids persistent databases and user authentication. The goal is ephemeral, privacy-first communication — rooms exist only while users are active, and all data disappears on disconnect. This aligns with use cases requiring temporary, secure conversations without digital footprints.
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit changes (
git commit -m 'Add AmazingFeature') - Push to branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is shared publicly for educational and demonstration purposes.
Academic Integrity Guidelines:
- Cloning for learning and reference is encouraged
- Fork and modify for personal projects
- Direct submission as academic work may violate institutional policies
- Always cite sources and give proper attribution
Padakanti Harshith
B.Tech Computer Science and Engineering
🔗 GitHub: @Harshith1702
This project is licensed under the MIT License. See the LICENSE file for details.
- Socket.IO documentation and community
- Render for free hosting services
- Open-source contributors and testers
Found a bug? Have suggestions?
- 🐛 Report Issues
- 💡 Feature Requests
- ⭐ Star this repo if you found it helpful!
Built by Harshith
