Open Chat - Real-Time Room-Based Chat Application

A real-time chat application with room-based architecture, built with Node.js, Express, and Socket.IO. It supports public and private rooms, typing indicators, and a dark-themed UI that works on mobile, tablet, and desktop.

Features

Room-Based Chat System

Create custom chat rooms with unique names
Browse all available rooms before joining
Switch rooms without reloading the page
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 & Private Rooms

Public Rooms: Open for anyone to join
Private Rooms: Password-protected for exclusive access
Server-side password validation ensures security

Room Management

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 rooms to prevent overload

User Experience

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

UI

Dark and light themes: follows your system setting by default, toggle to switch, choice saved in your browser
Fully responsive design (mobile, tablet, desktop)
Smooth animations for room transitions and messages
Clear visual hierarchy

Tech Stack

Layer	Technology
Frontend	HTML5, CSS3, Vanilla JavaScript
Backend	Node.js, Express.js
Real-time	Socket.IO (WebSocket)
Deployment	Render (Cloud Platform)

Project Structure

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
│   ├── 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

System Architecture

┌─────────────┐          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

How to Run Locally

Prerequisites

Node.js (v14 or higher)
npm (Node Package Manager)

Installation Steps

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

By default the server only accepts Socket.IO connections from http://localhost:4000. If you host the UI on another origin, set the ALLOWED_ORIGINS environment variable to a comma-separated list of allowed origins, e.g. ALLOWED_ORIGINS=https://myapp.onrender.com.

Live Demo

Try Open Chat Live

Note: Hosted on Render's free tier. Initial load may take 30-60 seconds if the service is idle.

Screenshots

Desktop View

Layout with room list and chat area

Mobile View

Optimized for touch interactions and smaller screens

Create Room Interface

Room creation with all options visible

Active Chat Room

Real-time messaging with typing indicators and user list

WebSocket Connection

Browser DevTools showing an active WebSocket (HTTP 101 upgrade) connection via Socket.IO

Cloud Deployment

Live deployment on Render platform

Learning Outcomes

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

Security Considerations

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)
Socket.IO CORS restricted to origins listed in ALLOWED_ORIGINS

Note: This project focuses on real-time systems learning, not production-grade security.

Future Enhancements

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 note: This project intentionally avoids persistent databases and user authentication. Rooms exist only while users are active, and all data disappears on disconnect.

Contributing

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

Academic Note

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

Author

Padakanti Harshith
B.Tech Computer Science and Engineering
GitHub: @Harshith1702

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

Socket.IO documentation and community
Render for free hosting services
Open-source contributors and testers

Support

Found a bug? Have suggestions?

Report Issues
Feature Requests
Star this repo if you found it helpful!

Built by Harshith

Name		Name	Last commit message	Last commit date
docs		docs
presentations		presentations
screenshots		screenshots
uiLayer		uiLayer
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
package-lock.json		package-lock.json
package.json		package.json
rtrpServer.js		rtrpServer.js

Latest commit

History

Folders and files

Repository files navigation

Open Chat - Real-Time Room-Based Chat Application

Table of Contents