Skip to content

Latest commit

 

History

History
118 lines (98 loc) · 3.49 KB

File metadata and controls

118 lines (98 loc) · 3.49 KB

ko-fi

Chatbox – Localhost Real-Time Chat Application

A minimal real-time online chatbox built with Node.js and Socket.IO, intended for local use.
Users can connect in multiple browser tabs to exchange messages in real time via WebSockets.

Congrats! My website had successfully deployed on Koyeb(Which is a deploy platform have supported on WebSocket), and waiting to do more enhance on the function. You can access simply by clicking the link below. :)

Click here to get on Online Version: grateful-francene-maynoothuniversity-7d5783cc.koyeb.app/ Image

Table of Contents

Features

  • Real-time bidirectional communication between server and clients
  • Simple chat interface served via local HTTP server
  • Easily testable by opening multiple tabs/windows locally
  • Lightweight and minimal dependency footprint

Use Steps

image

1.Enter the website and you can find a place for entering your username.

Image

2.Enter your name and you can get connected into the chat room.

Technologies

  • Node.js – JavaScript runtime
  • Express – web server
  • Socket.IO – real-time WebSocket library
  • React + Vite – frontend app
  • Tailwind CSS + shadcn/ui – UI components and styling

Getting Started

Handshake Logic diagram

Image

Prerequisites

You’ll need:

  • Node.js (v14 or later, v20 as a stable version will be recommended)
  • npm (Node Package Manager)

Installation & Running

  1. Clone the repository:
    git clone https://github.com/Hajime-No-Ippo/-----Project-Realtime-ChatBox-----
    cd ./realtime-chatbox/
    

2.Install all dependencies

npm install
  1. Install client dependencies
    npm --prefix client install
  2. Running the code in your terminal (two terminals)
    npm run dev:server
    npm run dev:client
  3. Open the app
    http://localhost:5173/

Production build

npm run build
npm start

Project-Structure

 ├── server.js          ← Express + Socket.IO server
 ├── client/            ← Vite + React frontend
 │   ├── src/
 │   ├── index.html
 │   └── vite.config.js
 └── package.json       ← server scripts