Spaces:
Runtime error
Runtime error
Merge branch 'main' of https://github.com/dhurghamCreation/FireTech-Messager-Server
Browse files
README.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
| 1 |
-
#
|
| 2 |
|
| 3 |
A modern, feature-rich real-time chat application built with Socket.IO, Express, and vanilla JavaScript.
|
| 4 |
|
| 5 |
-
##
|
| 6 |
|
| 7 |
### Core Functionality
|
| 8 |
-
-
|
| 9 |
-
-
|
| 10 |
-
-
|
| 11 |
-
-
|
| 12 |
-
-
|
| 13 |
|
| 14 |
### User Experience
|
| 15 |
-
-
|
| 16 |
-
-
|
| 17 |
-
-
|
| 18 |
-
-
|
| 19 |
-
-
|
| 20 |
-
-
|
| 21 |
-
-
|
| 22 |
|
| 23 |
### UI Features
|
| 24 |
- Smooth fade-in animations for messages
|
|
@@ -29,7 +29,7 @@ A modern, feature-rich real-time chat application built with Socket.IO, Express,
|
|
| 29 |
- System notifications for user joins/leaves
|
| 30 |
- Professional header with action buttons
|
| 31 |
|
| 32 |
-
##
|
| 33 |
|
| 34 |
### Prerequisites
|
| 35 |
- Node.js (v14 or higher)
|
|
@@ -62,7 +62,7 @@ npm run dev
|
|
| 62 |
http://localhost:3000
|
| 63 |
```
|
| 64 |
|
| 65 |
-
###
|
| 66 |
|
| 67 |
Run this **one command** in PowerShell to set up HTTPS with automatic certificate generation and firewall configuration:
|
| 68 |
|
|
@@ -77,13 +77,13 @@ npm run https
|
|
| 77 |
```
|
| 78 |
|
| 79 |
This will:
|
| 80 |
-
-
|
| 81 |
-
-
|
| 82 |
-
-
|
| 83 |
-
-
|
| 84 |
-
-
|
| 85 |
|
| 86 |
-
##
|
| 87 |
|
| 88 |
The server now supports HTTPS automatically when you provide certificate paths.
|
| 89 |
|
|
@@ -138,7 +138,7 @@ https://localhost:3000
|
|
| 138 |
|
| 139 |
For self-signed certificates, your browser will show a warning unless the cert is trusted locally.
|
| 140 |
|
| 141 |
-
##
|
| 142 |
|
| 143 |
The server now listens on `0.0.0.0` by default, so devices on your network can connect.
|
| 144 |
|
|
@@ -196,11 +196,11 @@ For users on different internet connections (cellular, other Wi-Fi), **deploy to
|
|
| 196 |
|
| 197 |
| Option | Difficulty | Cost | HTTPS | Best For |
|
| 198 |
|--------|-----------|------|-------|----------|
|
| 199 |
-
| Railway |
|
| 200 |
-
| Render |
|
| 201 |
-
| Self-host (DuckDNS+Caddy) |
|
| 202 |
|
| 203 |
-
####
|
| 204 |
|
| 205 |
1. Create account at https://railway.app
|
| 206 |
2. Install Railway CLI:
|
|
@@ -230,7 +230,7 @@ For users on different internet connections (cellular, other Wi-Fi), **deploy to
|
|
| 230 |
- **Start Command:** `npm start`
|
| 231 |
5. Deploy and get free `.onrender.com` HTTPS URL
|
| 232 |
|
| 233 |
-
####
|
| 234 |
|
| 235 |
For advanced users who want to host from home with a real domain:
|
| 236 |
|
|
@@ -250,7 +250,7 @@ For advanced users who want to host from home with a real domain:
|
|
| 250 |
|
| 251 |
**Security Note:** Self-hosting exposes your home network. Use strong passwords, keep software updated, and consider a VPS instead.
|
| 252 |
|
| 253 |
-
##
|
| 254 |
|
| 255 |
1. **Join the Chat**
|
| 256 |
- Enter your desired username when prompted
|
|
@@ -280,7 +280,7 @@ For advanced users who want to host from home with a real domain:
|
|
| 280 |
- Click the trash icon in the header
|
| 281 |
- Confirm to clear all messages (local only)
|
| 282 |
|
| 283 |
-
##
|
| 284 |
|
| 285 |
```
|
| 286 |
message/
|
|
@@ -297,14 +297,14 @@ message/
|
|
| 297 |
└── certs/ # Local HTTPS certificates (auto-generated)
|
| 298 |
```
|
| 299 |
|
| 300 |
-
##
|
| 301 |
|
| 302 |
- **Backend**: Node.js, Express.js, Socket.IO
|
| 303 |
- **Frontend**: HTML5, CSS3, Vanilla JavaScript
|
| 304 |
- **Icons**: Font Awesome 6
|
| 305 |
- **Real-time Communication**: Socket.IO (WebSocket)
|
| 306 |
|
| 307 |
-
##
|
| 308 |
|
| 309 |
### Color Scheme
|
| 310 |
- Primary: Purple gradient (#667eea → #764ba2)
|
|
@@ -317,7 +317,7 @@ message/
|
|
| 317 |
- Smooth hover effects on buttons
|
| 318 |
- Slide-in modal animations
|
| 319 |
|
| 320 |
-
##
|
| 321 |
|
| 322 |
### Environment variables
|
| 323 |
|
|
@@ -342,7 +342,7 @@ Edit `server.js`:
|
|
| 342 |
const MAX_HISTORY = 50;
|
| 343 |
```
|
| 344 |
|
| 345 |
-
##
|
| 346 |
|
| 347 |
### Typing Indicators
|
| 348 |
When you start typing, other users see a real-time "typing..." indicator. It automatically disappears after 1 second of inactivity.
|
|
@@ -361,26 +361,26 @@ New users joining the chat can see the last 50 messages, allowing them to catch
|
|
| 361 |
- Real-time updates when users join/leave
|
| 362 |
- Broadcast notifications to all connected clients
|
| 363 |
|
| 364 |
-
##
|
| 365 |
|
| 366 |
Potential features to add:
|
| 367 |
-
-
|
| 368 |
-
-
|
| 369 |
-
-
|
| 370 |
-
-
|
| 371 |
-
-
|
| 372 |
-
-
|
| 373 |
-
-
|
| 374 |
-
-
|
| 375 |
-
-
|
| 376 |
-
|
| 377 |
-
##
|
| 378 |
|
| 379 |
This project is open source and available for personal and commercial use.
|
| 380 |
|
| 381 |
-
##
|
| 382 |
|
| 383 |
-
Created with
|
| 384 |
|
| 385 |
---
|
| 386 |
|
|
|
|
| 1 |
+
# Ultimate Chat App
|
| 2 |
|
| 3 |
A modern, feature-rich real-time chat application built with Socket.IO, Express, and vanilla JavaScript.
|
| 4 |
|
| 5 |
+
## Features
|
| 6 |
|
| 7 |
### Core Functionality
|
| 8 |
+
- **Real-time Messaging** - Instant message delivery using WebSocket technology
|
| 9 |
+
- **Online Users List** - See who's currently active in the chat
|
| 10 |
+
- **Typing Indicators** - Know when someone is typing a message
|
| 11 |
+
- **Message History** - New users can see the last 50 messages
|
| 12 |
+
- **Persistent Sessions** - Messages are saved during the session
|
| 13 |
|
| 14 |
### User Experience
|
| 15 |
+
- **Modern UI/UX** - Beautiful gradient design with smooth animations
|
| 16 |
+
- **Dark/Light Theme** - Toggle between themes, preference saved locally
|
| 17 |
+
- **Emoji Support** - Built-in emoji picker with popular emojis
|
| 18 |
+
- **Sound Notifications** - Audio alerts for new messages
|
| 19 |
+
- **Smart Timestamps** - Dynamic time display (just now, X mins ago, etc.)
|
| 20 |
+
- **Mobile Responsive** - Works perfectly on all device sizes
|
| 21 |
+
- **User Avatars** - Auto-generated avatars with first letter of username
|
| 22 |
|
| 23 |
### UI Features
|
| 24 |
- Smooth fade-in animations for messages
|
|
|
|
| 29 |
- System notifications for user joins/leaves
|
| 30 |
- Professional header with action buttons
|
| 31 |
|
| 32 |
+
## Getting Started
|
| 33 |
|
| 34 |
### Prerequisites
|
| 35 |
- Node.js (v14 or higher)
|
|
|
|
| 62 |
http://localhost:3000
|
| 63 |
```
|
| 64 |
|
| 65 |
+
### Quick HTTPS Setup for LAN Access (Windows)
|
| 66 |
|
| 67 |
Run this **one command** in PowerShell to set up HTTPS with automatic certificate generation and firewall configuration:
|
| 68 |
|
|
|
|
| 77 |
```
|
| 78 |
|
| 79 |
This will:
|
| 80 |
+
- Auto-detect your LAN IP
|
| 81 |
+
- Generate trusted HTTPS certificate
|
| 82 |
+
- Configure Windows Firewall
|
| 83 |
+
- Start the app on `https://localhost:3001`
|
| 84 |
+
- Enable LAN access from mobile devices
|
| 85 |
|
| 86 |
+
## Enable HTTPS
|
| 87 |
|
| 88 |
The server now supports HTTPS automatically when you provide certificate paths.
|
| 89 |
|
|
|
|
| 138 |
|
| 139 |
For self-signed certificates, your browser will show a warning unless the cert is trusted locally.
|
| 140 |
|
| 141 |
+
## Allow connections beyond localhost
|
| 142 |
|
| 143 |
The server now listens on `0.0.0.0` by default, so devices on your network can connect.
|
| 144 |
|
|
|
|
| 196 |
|
| 197 |
| Option | Difficulty | Cost | HTTPS | Best For |
|
| 198 |
|--------|-----------|------|-------|----------|
|
| 199 |
+
| Railway | Easy | Free tier | Auto | Quick deployment, beginners |
|
| 200 |
+
| Render | Easy | Free tier | Auto | Static projects, free hosting |
|
| 201 |
+
| Self-host (DuckDNS+Caddy) | Hard | Free | Auto | Learning, full control |
|
| 202 |
|
| 203 |
+
#### Option 1: Deploy to Railway (Easiest - Free HTTPS + Domain)
|
| 204 |
|
| 205 |
1. Create account at https://railway.app
|
| 206 |
2. Install Railway CLI:
|
|
|
|
| 230 |
- **Start Command:** `npm start`
|
| 231 |
5. Deploy and get free `.onrender.com` HTTPS URL
|
| 232 |
|
| 233 |
+
#### Option 3: Self-host with proper domain (Advanced)
|
| 234 |
|
| 235 |
For advanced users who want to host from home with a real domain:
|
| 236 |
|
|
|
|
| 250 |
|
| 251 |
**Security Note:** Self-hosting exposes your home network. Use strong passwords, keep software updated, and consider a VPS instead.
|
| 252 |
|
| 253 |
+
## How to Use
|
| 254 |
|
| 255 |
1. **Join the Chat**
|
| 256 |
- Enter your desired username when prompted
|
|
|
|
| 280 |
- Click the trash icon in the header
|
| 281 |
- Confirm to clear all messages (local only)
|
| 282 |
|
| 283 |
+
## Project Structure
|
| 284 |
|
| 285 |
```
|
| 286 |
message/
|
|
|
|
| 297 |
└── certs/ # Local HTTPS certificates (auto-generated)
|
| 298 |
```
|
| 299 |
|
| 300 |
+
## Technologies Used
|
| 301 |
|
| 302 |
- **Backend**: Node.js, Express.js, Socket.IO
|
| 303 |
- **Frontend**: HTML5, CSS3, Vanilla JavaScript
|
| 304 |
- **Icons**: Font Awesome 6
|
| 305 |
- **Real-time Communication**: Socket.IO (WebSocket)
|
| 306 |
|
| 307 |
+
## Design Highlights
|
| 308 |
|
| 309 |
### Color Scheme
|
| 310 |
- Primary: Purple gradient (#667eea → #764ba2)
|
|
|
|
| 317 |
- Smooth hover effects on buttons
|
| 318 |
- Slide-in modal animations
|
| 319 |
|
| 320 |
+
## Configuration
|
| 321 |
|
| 322 |
### Environment variables
|
| 323 |
|
|
|
|
| 342 |
const MAX_HISTORY = 50;
|
| 343 |
```
|
| 344 |
|
| 345 |
+
## Features in Detail
|
| 346 |
|
| 347 |
### Typing Indicators
|
| 348 |
When you start typing, other users see a real-time "typing..." indicator. It automatically disappears after 1 second of inactivity.
|
|
|
|
| 361 |
- Real-time updates when users join/leave
|
| 362 |
- Broadcast notifications to all connected clients
|
| 363 |
|
| 364 |
+
## Future Enhancements
|
| 365 |
|
| 366 |
Potential features to add:
|
| 367 |
+
- File/image sharing
|
| 368 |
+
- Private messaging
|
| 369 |
+
- Chat rooms
|
| 370 |
+
- Message search
|
| 371 |
+
- Database integration for persistent history
|
| 372 |
+
- User authentication
|
| 373 |
+
- Read receipts
|
| 374 |
+
- Message reactions
|
| 375 |
+
- Video/voice calls
|
| 376 |
+
|
| 377 |
+
## License
|
| 378 |
|
| 379 |
This project is open source and available for personal and commercial use.
|
| 380 |
|
| 381 |
+
## Developer
|
| 382 |
|
| 383 |
+
Created with using modern web technologies.
|
| 384 |
|
| 385 |
---
|
| 386 |
|