Simple Chat App

A comprehensive chat application project demonstrating two different real-time communication approaches: Long-Polling and WebSockets. Both implementations provide a simple yet functional chat interface built with HTML, JavaScript, and Express.js.

Project Structure

Chat-App/
├── package.json              # Root project configuration
├── README                    # This file
├── Long-Polling/             # Long-polling implementation
│   ├── backend/
│   │   └── server.js         # Express server with long-polling endpoints
│   └── frontend/
│       ├── index.html        # Chat interface
│       └── script.js         # Client-side script
└── WebSockets/               # WebSocket implementation
    ├── package.json          # Backend dependencies
    ├── backend/
    │   ├── package.json      # Detailed backend configuration
    │   └── sever.js          # Express server with WebSocket support
    └── frontend/
        ├── index.html        # Chat interface
        └── script.js         # Client-side WebSocket script

Features

Long-Polling Implementation

• Traditional HTTP-based real-time communication
• Server holds requests open to deliver new messages
• Simpler setup with no additional WebSocket dependencies
• Best for: Older browsers or restricted network environments

WebSockets Implementation

• Full-duplex real-time communication
• Interactive features including message reactions (like/dislike)
• More efficient bandwidth usage
• Best for: Modern browsers and real-time interactive applications

Prerequisites

• Node.js (v14 or higher)
• npm (Node Package Manager)

Installation

Long-Polling Setup

cd Long-Polling/backend
npm install  # Install: express, cors
node server.js

The server will start at http://localhost:3000. Open the frontend at Long-Polling/frontend/index.html in your browser.

WebSockets Setup

cd WebSockets/backend
npm install  # Install: express, cors, ws
node sever.js

The server will start at http://localhost:3000. Open the frontend at WebSockets/frontend/index.html in your browser.

Note: Both implementations use port 3000. Ensure only one server is running at a time.

Dependencies

Common Dependencies (Both Implementations)

• express (^5.1.0) - Web server framework
• cors (^2.8.5) - Cross-Origin Resource Sharing middleware

WebSockets Only

• ws (^8.18.3) - WebSocket implementation for Node.js

API Endpoints

Long-Polling Implementation

Method	Endpoint	Description
GET	/messages	Retrieves all messages (long-polling, 30s timeout)
POST	/messages	Sends a new message

WebSockets Implementation

Method	Endpoint	Description
GET	/messages	Retrieves all stored messages
POST	/messages	Sends a new message (broadcasts via WebSocket)
POST	/like	Adds a like to a message
POST	/dislike	Adds a dislike to a message

Message Format

Messages are stored with the following structure:

{
  "text": "Message content",
  "timestamp": "2024-01-15T10:30:00.000Z",
  "likes": 0,
  "dislikes": 0
}

Note: The Long-Polling implementation uses a simplified format (text and timestamp only).

How It Works

Long-Polling Flow

1. Client sends GET request to /messages
2. Server holds the connection open (up to 30 seconds)
3. When a new message arrives, server responds immediately to all waiting clients
4. Client receives the message and displays it
5. Client automatically reconnects for the next message

WebSockets Flow

1. Client establishes a persistent WebSocket connection
2. When a message is sent, it's posted via HTTP POST
3. Server broadcasts the message to all connected WebSocket clients
4. Clients receive the message in real-time and display it
5. Connection remains open for the duration of the session

Frontend Usage

1. Open the chat interface in your browser
2. Type a message in the input field
3. Click "Send" or press Enter
4. Messages appear in the chat window in real-time

WebSockets Frontend Only

• Like (👍): Click the like button to add a reaction
• Dislike (👎): Click the dislike button to add a negative reaction
• Reactions are updated in real-time across all connected clients

Technical Details

Long-Polling

• Timeout: 30 seconds per request
• Storage: In-memory array
• Scalability: Limited (not recommended for production)
• Resource Usage: Higher (creates many open connections)

WebSockets

• Connection: Persistent bi-directional
• Storage: In-memory array
• Scalability: Better than long-polling
• Resource Usage: More efficient for continuous communication

Limitations & Notes

• In-Memory Storage: All messages are lost when the server restarts
• Single Server: Designed to run on a single server (no horizontal scaling)
• No Authentication: No user identification or access control
• Typo Alert: WebSocket backend file is named sever.js (should be server.js)

Future Enhancements

• Add persistent database (MongoDB, PostgreSQL)
• Implement user authentication and identification
• Add message editing and deletion
• Implement room-based chat
• Add file sharing capabilities
• Deploy to production with scaling considerations
• Fix typo in WebSocket backend filename
• Add unit and integration tests
• Implement error handling and validation