A beautiful real-time chat application built with Node.js, Express, and Socket.IO.
Note: This is my personal playaround project for learning how to run applications through a VM on Windows 11. It's a simple but functional real-time chat app that I use to experiment with different development environments and deployment scenarios.
This chat application serves as my testing ground for:
- Running Node.js applications in virtualized environments
- Understanding real-time communication with Socket.IO
- Practicing full-stack development with Express and vanilla JavaScript
- Learning deployment and networking concepts in VM environments
The app is intentionally kept simple but functional, making it perfect for experimentation and learning purposes.
- ✨ Real-time messaging with Socket.IO
- 🎨 Modern and responsive UI design
- 👤 User join/leave notifications
- ⌨️ Typing indicators
- 📱 Mobile-friendly design
- 🕐 Message timestamps
- 🔒 Username-based identification
- Make sure you have Node.js installed on your system
- Clone or download this project
- Open a terminal in the project directory
- Install dependencies:
npm install- Start the server:
npm startOr for development with auto-restart:
npm run dev-
Open your browser and navigate to:
http://localhost:3000 -
Enter a username and start chatting!
Since this is designed to run in a VM environment on Windows 11:
- Port Forwarding: Make sure port 3000 is forwarded to your VM if accessing from host machine
- Network Configuration: The app binds to
0.0.0.0to accept connections from any IP - Firewall: Ensure your VM's firewall allows connections on port 3000
- Development: Use
npm run devfor development with auto-restart when testing changes
- Join the Chat: Enter your username and click "Join Chat"
- Send Messages: Type your message and press Enter or click Send
- Real-time Updates: See messages from other users instantly
- Typing Indicators: See when other users are typing
- User Notifications: Get notified when users join or leave
chat-app/
├── package.json # Project dependencies and scripts
├── server.js # Main server file with Socket.IO setup
├── public/
│ └── index.html # Frontend chat interface
├── README.md # This file
└── Various setup guides # For different environments
- Backend: Node.js, Express.js
- Real-time Communication: Socket.IO
- Frontend: HTML5, CSS3, JavaScript (Vanilla)
- Styling: Modern CSS with gradients and animations
- Instant message delivery using Socket.IO
- Message persistence during session
- Timestamp display for each message
- Username-based identification
- Join/leave notifications
- User activity tracking
- Responsive design for mobile and desktop
- Modern gradient design
- Smooth animations and transitions
- Typing indicators
- Message bubbles with different styles for own/other messages
- HTML escaping to prevent XSS attacks
- Input validation and sanitization
- Username length limits
To run in development mode with auto-restart:
npm run devThis uses nodemon to automatically restart the server when files change.
You can easily customize the application by:
- Modifying the CSS in
public/index.htmlto change the appearance - Adding new Socket.IO events in
server.jsfor additional features - Extending the message format to include more data (emojis, file attachments, etc.)
- Port already in use: Change the port in
server.js(line 58) - Socket.IO not connecting: Make sure the server is running and check browser console for errors
- Messages not appearing: Check if Socket.IO client is properly loaded
- VM connectivity issues: Check VM network settings and port forwarding configuration
MIT License - feel free to use this project for your own applications!
This project is part of my learning journey with virtualization and real-time web applications. Feel free to fork, modify, and experiment with it!