Giter Club home page Giter Club logo

shubhamch95 / realtime-chat Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 154 KB

Real-time chat application built using Node.js, Express, and Socket.io to enable instant messaging between users. The application provides a simple and intuitive interface for users to connect, exchange messages, and stay in touch in real-time.

HTML 25.39% JavaScript 41.42% CSS 33.19%
client-server-communication css deployment express html js nodejs socket-io

realtime-chat's Introduction

Real-Time Chat Application

QUICKCONNECT

Overview

This project is a real-time chat application built using Node.js, Express, and Socket.io. It enables instant messaging between users, providing a simple and intuitive interface for connecting, exchanging messages, and staying in touch in real-time.

image

Features

  • Real-Time Communication: Utilizes Socket.io to establish WebSocket connections for instant messaging.
  • User-Friendly Interface: Provides a clean, modern chat interface with intuitive user interactions.
  • Dynamic Updates: Messages are dynamically updated in real-time without manual refreshing.
  • Styling: The application features a visually appealing design with a responsive layout.

Technologies Used

  • Node.js: Runtime environment for server-side JavaScript.
  • Express: Web application framework for handling HTTP requests and serving static files.
  • Socket.io: Library for real-time bidirectional communication between the server and clients.
  • HTML, CSS, JavaScript: Front-end development for user interface creation.

Getting Started

  1. Clone the Repository: git clone https://github.com/shubhamch95/realTime-chat
    cd real-time-chat

  2. Install dependencies:

    npm install

  3. Start the server:

    npm start

  4. Open in Browser:

    Open your web browser and navigate to http://localhost:9000.

    Usage

  • Enter your name when prompted to start chatting.
  • Type messages in the input area and press Enter to send.
  • Real-time incoming messages will be displayed in the chat area.
  • The chat area dynamically scrolls to show the latest messages.

Folder Structure

  • public: Contains static files (HTML, CSS, client-side JavaScript).
  • server.js: Express server configuration and Socket.io setup.
  • client.js: Client-side JavaScript for managing user interactions.
  • style.css: Cascading Style Sheets for styling the chat interface.
  • package.json: NPM configuration with project dependencies.

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

realtime-chat's People

Contributors

shubhamch95 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.