# 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

```bash
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

```bash
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:

```json
{
  "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