Real-Time Chat Application 💬# Real-Time Chat Application

A modern, minimal, and secure real-time chat application built with ASP.NET Core 8.0, SignalR, and Bootstrap 5. Create temporary chat rooms with customizable expiration times - no registration required!A real-time chat application built with ASP.NET Core and SignalR that allows users to create chat rooms and communicate in real-time.

## Prerequisites

Before running this project, ensure you have the following installed on your machine:

✨ Key Features### Required Software

• .NET 8.0 SDK or later

🎨 Modern Minimal Design - Download from: https://dotnet.microsoft.com/download/dotnet/8.0

• Beautiful glassmorphism UI with frosted glass effects - Verify installation: dotnet --version

• Smooth animations and transitions- Git (for cloning the repository)

• Fully responsive (mobile, tablet, desktop) - Download from: https://git-scm.com/downloads

• Clean gradient themes - Verify installation: git --version

💬 Real-Time Communication### Optional but Recommended

• Instant messaging using WebSockets- Visual Studio 2022 (Community, Professional, or Enterprise)

• Live participant list - Download from: https://visualstudio.microsoft.com/downloads/

• System notifications for join/leave events - OR Visual Studio Code with C# extension

• Message history on joining - Download from: https://code.visualstudio.com/

• Automatic reconnection

System Requirements

🔒 Privacy & Security- Operating System: Windows 10/11, macOS, or Linux

• Temporary rooms with auto-expiration- RAM: Minimum 4GB (8GB recommended)

• No registration or accounts needed- Storage: At least 2GB free space

• In-memory storage only

• XSS protection and input sanitization## Getting Project Code from GitHub

• Comprehensive validation

1. Clone the Repository

⚙️ Advanced Features```bash

• Custom room expiration (15 min - 24 hours)git clone https://github.com/nikhil-nandanwar/chat-application.git

• Up to 20 participants per room```

• Automatic cleanup of expired rooms

• Connection recovery with exponential backoff### 2. Navigate to Project Directory

• Browser notifications for new messages```bash

• Optimistic UI for better UXcd chat-application

## 🚀 Quick Start

### 3. Verify Project Structure

### PrerequisitesYou should see the following key files and folders:

- [.NET 8.0 SDK](https://dotnet.microsoft.com/download/dotnet/8.0)- `Program.cs` - Application entry point

- Modern web browser- `RealTimeChatApp.csproj` - Project file

- `Controllers/` - MVC controllers

### Installation- `Hubs/` - SignalR hubs

- `Views/` - Razor views

```bash- `wwwroot/` - Static files (CSS, JS)

# Clone the repository

git clone https://github.com/nikhil-nandanwar/chat-application.git## Initial Setup of Project

cd chat-application

### 1. Restore NuGet Packages

# Restore dependencies```bash

dotnet restoredotnet restore

Build the project

dotnet build### 2. Build the Project

# Run the applicationdotnet build

dotnet run```

3. Verify Dependencies

Navigate to https://localhost:7183 or http://localhost:5090The project uses the following key package (automatically restored):

• Microsoft.AspNetCore.SignalR - Real-time communication

📁 Project Structure

4. Check Configuration Files

```- Review appsettings.json for any environment-specific settings

RealTimeChatApp/- The application uses in-memory storage by default (no database setup required)

├── Controllers/ # MVC Controllers

│ └── HomeController.cs## Running the Project

├── Hubs/ # SignalR Hubs

│ └── ChatHub.cs### Method 1: Using .NET CLI (Recommended)

├── Models/ # Data Models```bash

│ ├── ChatRoom.cs# Run in development mode

│ ├── Message.csdotnet run

│ ├── User.cs

│ └── RequestModels.cs# Or run with specific environment

├── Services/ # Business Logic & DIdotnet run --environment Development

│ ├── ChatRoomService.cs```

│ ├── MemoryStorageService.cs

│ └── RoomExpirationService.cs### Method 2: Using Visual Studio

├── Views/ # Razor Views1. Open RealTimeChatApp.sln in Visual Studio

│ ├── Home/2. Press F5 or click "Start Debugging"

│ └── Shared/3. Or press Ctrl+F5 for "Start Without Debugging"

├── wwwroot/ # Static Assets

│ ├── css/site.css # Modern minimal CSS### Method 3: Using Visual Studio Code

│ └── js/1. Open the project folder in VS Code

│ ├── home.js # Enhanced home page logic2. Press Ctrl+Shift+P and type "Tasks: Run Task"

│ └── chat.js # Enhanced chat logic3. Select "build" or use terminal: dotnet run

└── Program.cs # App configuration

## Accessing the Application

Once the application is running:

### 🖥️ Local Access (Single Device)
Open your browser and navigate to:
- `https://localhost:7183` (HTTPS)
- `http://localhost:5090` (HTTP)

Note: Your ports may differ if you change `Properties/launchSettings.json`.

### 📱 Network Access (Multiple Devices on Same WiFi)

**Quick Start - Use the convenience script:**
```powershell
# Windows PowerShell
.\start-network.ps1

Or manually start with network access:

# Run on all network interfaces
dotnet run --urls "http://0.0.0.0:5090"
# Or use the lan profile
dotnet run --launch-profile lan

Find your local IP address:

ipconfig
# Look for "IPv4 Address" under your WiFi adapter
# Example: 192.168.1.100

Access from other devices on same WiFi:

• Open browser and go to: http://YOUR_IP:5090
• Example: http://192.168.1.100:5090

⚠️ Windows Firewall Setup (if needed):

# Run PowerShell as Administrator
New-NetFirewallRule -DisplayName "RealTimeChatApp" -Direction Inbound -Protocol TCP -LocalPort 5090 -Action Allow

📖 For detailed network setup instructions, see NETWORK_SETUP.md

Extra Information for Running and Initializing

## 🏗️ Architecture & TechnologiesOnce the application is running:



### Backend Stack1. **Local Access**: Open your browser and navigate to (per current `launchSettings.json`):

- **ASP.NET Core 8.0 MVC** - Web framework   - `https://localhost:7183` (HTTPS)

- **SignalR 7.0** - Real-time communication   - `http://localhost:5090` (HTTP)

- **Dependency Injection** - Service management   

- **Background Services** - Room cleanup automation   Note: Your ports may differ if you change `Properties/launchSettings.json`. Check the terminal output for the exact URLs when the app starts.



### Frontend Stack2. **Network Access**: To allow other devices on your network to access:

- **HTML5 & Semantic markup** - Accessibility   - Note the network URLs displayed in the terminal

- **CSS3 with Variables** - Modern styling   - Or configure `launchSettings.json` for specific IP binding

- **Vanilla JavaScript (ES6+)** - No framework dependencies

- **Bootstrap 5.3** - Responsive components## Extra Information for Running and Initializing

- **Font Awesome 6.4** - Icons

### Development Environment Setup

### Key Patterns

- **Repository Pattern** - Data access abstraction#### Hot Reload (Recommended for Development)

- **Service Layer** - Business logic separation```bash

- **Hub Pattern** - SignalR communication# Enable hot reload for faster development

- **Dependency Injection** - Loose couplingdotnet watch run

🎨 Design System

Environment Variables

ColorsSet the following environment variables if needed:

• Primary: #6366f1 (Indigo)```bash

• Secondary: #8b5cf6 (Purple)# Windows (PowerShell)

• Success: #10b981 (Green)$env:ASPNETCORE_ENVIRONMENT="Development"

• Warning: #f59e0b (Amber)

• Danger: #ef4444 (Red)# Windows (Command Prompt)

set ASPNETCORE_ENVIRONMENT=Development

Typography

• Font: Inter, SF Pro Display, Segoe UI# macOS/Linux

• Weights: 300-800export ASPNETCORE_ENVIRONMENT=Development

• Base Size: 16px```

Components### Network Configuration

• Glassmorphism cards and containers

• Gradient buttons with hover effects#### Running on Specific Port

• Smooth scrollbars```bash

• Animated message bubblesdotnet run --urls "https://localhost:7001;http://localhost:5001"

• Toast notifications```

🔧 Configuration#### Allow External Connections

To allow connections from other devices on your network:

SignalR Settings (Program.cs)

```csharp1. Modify launchSettings.json:

builder.Services.AddSignalR(options =>```json

{{

options.EnableDetailedErrors = isDevelopment;  "profiles": {

options.MaximumReceiveMessageSize = 102400; // 100 KB    "RealTimeChatApp": {

options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);      "commandName": "Project",

options.KeepAliveInterval = TimeSpan.FromSeconds(15);      "dotnetRunMessages": true,

}); "launchBrowser": true,

      "environmentVariables": {

### Room Configuration (ChatRoom.cs)        "ASPNETCORE_ENVIRONMENT": "Development"

```csharp      }

public int MaxParticipants { get; set; } = 20;    }

public TimeSpan DefaultExpiration = TimeSpan.FromHours(1);  }

public int MaxMessageHistory = 500; // Per room}

📝 API Reference2. Configure Windows Firewall (if applicable):

• Allow inbound connections on ports 5000 and 5001

SignalR Hub Methods

Troubleshooting

Client → Server

• CreateRoom(username, expirationMinutes) - Create new room#### Common Issues and Solutions

• JoinRoom(roomCode, username) - Join existing room

• SendMessage(content) - Send message1. Port Already in Use:

• LeaveRoom() - Leave current room ```bash

• GetRoomInfo() - Get room details # Kill process using the port (Windows)

  netstat -ano | findstr :5000

Server → Client taskkill /PID <process_id> /F

• CreateRoomResult(result) - Room creation response

• JoinRoomResult(result) - Join response # Use different port

• ReceiveMessage(message) - New message received dotnet run --urls "http://localhost:5002"

• RoomInfo(roomInfo) - Room information ```

• ParticipantUpdate(info) - Participant list update

• RoomExpired(roomCode) - Room expired notification2. HTTPS Certificate Issues:

HTTP Endpoints # Trust development certificate

• POST /Home/ValidateRoomCode - Validate room code dotnet dev-certs https --trust

🐛 Version 2.0 Improvements

3. Package Restore Issues:

Backend Fixes ✅ ```bash

• Fixed thread-safety issues (replaced ConcurrentBag) # Clear NuGet cache and restore

• Added comprehensive validation attributes dotnet nuget locals all --clear

• Enhanced error handling with try-catch dotnet restore --force

• Implemented connection tracking in ChatHub ```

• Added XSS protection (HTML encoding)

• Message history limiting (max 500 per room)4. Build Errors:

Frontend Enhancements ✅ # Clean and rebuild

• Complete UI redesign with glassmorphism dotnet clean

• Added ARIA labels for accessibility dotnet build --no-restore

• Semantic HTML5 structure ```

• Live input validation

• Optimistic UI updates### Production Deployment

• Debounced actions

• Loading states and spinnersFor production deployment, consider:

• Auto-reconnection with visual feedback

1. Publish the Application:

Performance Optimizations ✅```bash

• Response compression enableddotnet publish -c Release -o ./publish

• Exponential backoff for reconnection```

• Connection state tracking

• Efficient message rendering2. Environment Configuration:

• Lazy loading of participants - Update appsettings.Production.json

  • Set ASPNETCORE_ENVIRONMENT=Production

🧪 Testing Checklist

3. Security Considerations:

• Create new room - Use proper SSL certificates

• Join existing room - Configure CORS policies

• Send/receive messages - Implement authentication if required

• Multiple users in same room

• Reconnection after network loss### Features Overview

• Room expiration

• Mobile responsiveness- Real-time Messaging: Instant message delivery using SignalR

• Cross-browser compatibility- Multiple Chat Rooms: Create and join different chat rooms

• Accessibility with screen readers- User Management: Simple username-based user identification

• Room Expiration: Automatic cleanup of inactive rooms

🚀 Deployment- Responsive Design: Works on desktop and mobile devices

Production Checklist### API Endpoints

1. Update appsettings.Production.json

2. Disable detailed errors- GET / - Home page

3. Configure HTTPS with valid SSL certificate- GET /Home/Chat/{roomId} - Join specific chat room

4. Set up monitoring and logging- POST /api/chat/create-room - Create new chat room

5. Configure CORS if needed- SignalR Hub: /chatHub - Real-time communication endpoint

6. Consider Redis backplane for scale-out

Support

Deployment Options

• Azure App ServiceIf you encounter any issues:

• Docker containers

• IIS on Windows Server1. Check the console output for error messages

• Linux with Nginx reverse proxy2. Verify all prerequisites are installed

3. Ensure ports 5000/5001 are not blocked by firewall

📊 Performance Metrics4. Check the GitHub repository for updates and issues

• Message Latency: < 50msFor more information, visit the project repository: https://github.com/nikhil-nandanwar/chat-application.git

• Connection Time: < 1s

• Reconnection Time: < 3s

• Max Concurrent Users: 500+ (per room: 20)

• Memory Usage: ~50MB base + ~1MB per active room

🤝 Contributing

Contributions welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - See LICENSE file

👏 Acknowledgments

• SignalR Team - Real-time library
• Bootstrap Team - UI framework
• Font Awesome - Icon library
• Google Fonts - Inter typography

📞 Support

• GitHub Issues: Report bugs
• GitHub Discussions: Ask questions
• Email: [email protected]

🗺️ Roadmap

Planned Features:

• Dark mode support
• Message reactions (emoji)
• File sharing capability
• Voice messages
• Video chat integration
• Typing indicators
• Read receipts
• Message editing/deletion
• User avatars
• Room passwords
• Export chat history

---

Built with ❤️ using ASP.NET Core & SignalR

Last Updated: November 2025