SSE Server

A Server-Sent Events (SSE) monitoring tool that creates a real-time HTTP request monitoring dashboard. This project demonstrates how to build an SSE server and integrate it with the @neabyte/sse-client library.

📦 Installation

# Clone the repository
git clone https://github.com/NeaByteLab/SSE-Server.git
cd SSE-Server
# Install dependencies
npm install
# Start the server
npm start

🎯 Quick Start

1. Start the SSE Server:

   npm start

   Server will run on http://localhost:3000

2. Open the Dashboard: Navigate to http://localhost:3000 in your browser

3. Send Test Requests:

   # Run the test script
   ./run.sh
   # Or send individual requests
   curl -X POST http://localhost:3000/api/test -H "Content-Type: application/json" -d '{"test": "data"}'

4. Watch Real-time Updates: Requests will appear instantly in the dashboard with full details

---

🏗️ Architecture

Server-Side (src/index.ts)

// EventEmitter for managing SSE connectionsconsteventEmitter: EventEmitter=newEventEmitter()constclientConnections: ServerResponse[]=[]// SSE endpoint handlerif(req.url==='/sse'){res.writeHead(200,{'Content-Type': 'text/event-stream','Cache-Control': 'no-cache',Connection: 'keep-alive'})clientConnections.push(res)res.write('data: Connected\n\n')}// HTTP request capture and broadcasteventEmitter.emit('http-request',{method: req.method,url: req.url,headers: req.headers,body: body})

Client-Side (index.html)

// Using @neabyte/sse-client CDNimportsseClientfrom'https://cdn.jsdelivr.net/npm/@neabyte/sse-client/+esm'// Configuration with auto-reconnectionconstconfig={retryInterval: 3000,// Retry every 3 secondsretryAttempts: 5,// Try up to 5 timesautoReconnect: true,// Enable auto-reconnectiontimeout: 30000// 30 second connection timeout}// Create SSE clientconstclient=sseClient('/sse',(message)=>{// Handle incoming messagesif(message.event==='http-request'){// Display request in UI}},config)

🔧 API Endpoints

Endpoint	Method	Description
/	GET	Serves the monitoring dashboard
/sse	GET	SSE endpoint for real-time updates
/*	ANY	Captures all other requests and broadcasts them

📊 SSE Client Integration

This project demonstrates integration with the @neabyte/sse-client library:

CDN Usage

<scripttype="module">importsseClientfrom'https://cdn.jsdelivr.net/npm/@neabyte/sse-client/+esm'constclient=sseClient('/sse',(message)=>{console.log('SSE Response:',message)})</script>

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.