Welcome to the Live Chat Socket.io Project! This repository contains documentation for an interactive chat system that operates in real-time. The project is divided into two parts: the server-side and the client-side. The server-side is powered by JavaScript, specifically the socket.io framework, and utilizes various modules from the Node.js and Express.js frameworks. On the other hand, the client-side relies on socket.io for establishing a real-time connection between clients and the server. It also leverages the React.js framework for the user interface, with HTML and CSS for styling. The CSS design is based on a commonly used template in live chat applications, employed here for demonstrative purposes. This project serves as a live chat system, accommodating an unlimited number of users, each with a unique name and the ability to select private rooms for communication.
Table of Contents
- Introduction
- Technologies Used
- How to Use the Program
Introduction The Live Chat Socket.io Project provides a real-time chat experience for users, allowing them to communicate with each other seamlessly. It consists of two main components: the server-side and the client-side. The server-side is responsible for handling incoming connections, messages, and room management, while the client-side provides the user interface for interacting with the chat.
Technologies Used
Languages and Frameworks JavaScript: Used for server-side and client-side scripting. React.js: Employed for building the user interface. Node.js: Powers the server-side of the application. Express.js: A web application framework for Node.js, used in conjunction with socket.io. HTML: Provides the structure of web pages. CSS: Styles the user interface based on a commonly used live chat template.
Libraries Socket.io: A JavaScript library for enabling real-time, bidirectional communication between clients and the server. Development Environment Code Editor: Visual Studio Code was used for development. How to Use the Program To use the Live Chat Socket.io Project, follow these steps:
Clone the repository to your local machine:
Copy code git clone <repository_url> Open the project in Visual Studio Code or your preferred code editor.
Navigate to the "server" folder and run the following command in the console to start the server:
Copy code npm start Open another console and navigate to the "client" folder.
Use the following command to open a web page for one user:
Copy code npm start Repeat step 5 to open additional web pages for other users who wish to engage in the chat.
To enter the chat, select a unique name and choose a room number or name.
For two or more users to communicate, they must be in the same room. If they are in different rooms, communication will not be possible.
App Screenshots
Take a closer look at our app's key features and user interface through the following screenshots. These images provide a visual overview of the app's functionality and design, showcasing the user experience you can expect.
Screenshot 1: User Registration
In this screenshot, you can see the user registration screen, where users can sign up for an account.
Screenshot 2: Chat Interface
Here's a glimpse of the chat interface in action. Users can join chat rooms and start conversations in real-time.
Enjoy real-time communication with the Live Chat Socket.io Project! Feel free to open multiple chat sessions and experiment with different rooms and user names to experience the full functionality of the application.
Happy chatting! 🗨️🚀