Server-Sent Events (SSE) Demo

A Node.js application demonstrating Server-Sent Events with message streaming capabilities. This project showcases two different streaming patterns: character-by-character streaming and progress-based streaming.

Features

• Message Submission: Send messages via REST API and receive unique message IDs
• Character Streaming: Stream messages character by character with real-time progress
• Progress Streaming: Simulate processing with percentage-based progress updates
• Web Interface: Two HTML demos to interact with the streaming endpoints
• CORS Support: Cross-origin requests enabled for frontend integration

Project Structure

├── backend/
│   ├── src/
│   │   └── index.js          # Main server application
│   ├── public/
│   │   ├── index.html        # Character streaming demo
│   │   └── progress.html     # Progress streaming demo
│   └── package.json          # Dependencies and scripts
└── frontend/                 # Frontend directory (placeholder)

API Endpoints

POST /send

Submit a message for processing and receive a unique message ID.

Request Body:

{
  "message": "Your message here"
}

Response:

{
  "status": "ok",
  "messageId": "uuid-string"
}

GET /stream/:messageId

Stream the message character by character with position tracking.

Response Format (SSE):

{
  "messageId": "uuid-string",
  "chunk": "character",
  "position": 0,
  "total": 100
}

GET /stream/progress/:messageId

Stream with simulated processing progress (1-100%).

Response Format (SSE):

{
  "messageId": "uuid-string",
  "completed": false,
  "chunk": "Processing chunk 50%",
  "total": 100
}

Installation

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

Usage

1. Start the development server:

npm start

2. Open your browser and navigate to:

   • Character streaming demo: http://localhost:4400/index.html
   • Progress streaming demo: http://localhost:4400/progress.html

3. Enter a message and click "Send Message" to see the streaming in action.

Dependencies

• express: Web framework for Node.js
• cors: Enable Cross-Origin Resource Sharing
• nodemon: Development dependency for auto-restarting the server

How It Works

1. Message Submission: Client sends a message to /send endpoint
2. ID Generation: Server generates a unique UUID for the message
3. Stream Initiation: Client connects to the appropriate streaming endpoint
4. Real-time Streaming: Server sends data chunks via Server-Sent Events
5. Connection Management: Automatic cleanup on client disconnect

Development

The server runs on port 4400 and includes:

• Automatic server restart with nodemon
• Memory-based message storage
• Active stream tracking
• Graceful connection cleanup

Browser Compatibility

Server-Sent Events are supported in all modern browsers. The EventSource API is used for establishing SSE connections.