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
├── 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.
- Message persistence with MongoDB
- User authentication (OAuth/JWT)
- File/image sharing capabilities
- Message reactions and emojis
- Private direct messaging
- Room moderation tools
- Message edit/delete functionality
- Push notifications
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 with 🖤 by Harshith
