Realtime Web App Using EventStream in ExpressJS

Building real-time web applications often seems synonymous with WebSockets. But did you know there’s a simpler, more efficient alternative for specific use cases? Enter EventStream, also known as Server-Sent Events (SSE). In this blog post, we’ll explore what EventStream is, how it differs from WebSockets, and when you should use each. By the end, you’ll know how to create a real-time app using EventStream.

Why Event Streams Are Used

EventStream is a lightweight solution designed for one-way communication from the server to the client. It’s particularly useful in scenarios where the client doesn’t need to send data back to the server. Here’s why it shines:

Simplicity: EventStream uses a standard HTTP connection, making it easier to implement compared to WebSockets.
Native Browser Support: Modern browsers have built-in support for SSE via the EventSource API.
Automatic Reconnection: If the connection drops, the client automatically reconnects, reducing the need for manual reconnection logic.
Efficiency: Ideal for sending real-time updates without the overhead of a two-way protocol like WebSockets.

When Event Streams Are Used

EventStream is the go-to solution for use cases requiring server-to-client communication, such as:

Live feeds (e.g., stock market updates, sports scores).
Real-time monitoring dashboards.
Notifications or announcements.
Sending logs or updates to a web application.

Difference Between EventStream and WebSockets

Aspect	EventStream (SSE)	WebSockets
Communication	One-way (server to client).	Bi-directional (full duplex).
Protocol	Built on HTTP/1.1 (text-based).	Custom protocol over TCP.
Browser Support	Native in modern browsers (`EventSource`).	Requires libraries for implementation.
Use Cases	Live feeds, notifications.	Chats, multiplayer games.
Complexity	Simple to implement.	Requires more setup and management.
Connection Handling	Reconnects automatically.	Requires manual handling.

When to Use What

EventStream (SSE): Choose this for applications where the client only needs to receive updates. Examples include live dashboards, server logs, or notification systems.
WebSockets: Opt for this when both client and server need to exchange data, such as in live chat, collaborative editing, or multiplayer gaming.

Demonstration: Build a Real-Time Web App with EventStream

Let’s dive into creating a simple real-time app using EventStream. Our app will display live server updates on the client side.

Backend: `server.js`

const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();
const port = 3000;

// Enable CORS
app.use(cors());

// Serve the HTML file
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.get('/events', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-origin requests
    res.write('data: Connected to server\n\n');

    const interval = setInterval(() => {
        const timestamp = new Date().toISOString();
        res.write(`data: Server time: ${timestamp}\n\n`);
    }, 1000);

    req.on('close', () => {
        clearInterval(interval);
        console.log('Client disconnected');
    });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

Frontend: `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EventStream Demo</title>
</head>
<body>
    <h1>Real-Time Updates</h1>
    <div id="updates"></div>

    <script>
        const updatesDiv = document.getElementById('updates');
        const eventSource = new EventSource('http://localhost:3000/events');

        eventSource.onmessage = (event) => {
            const newUpdate = document.createElement('p');
            newUpdate.textContent = event.data;
            updatesDiv.appendChild(newUpdate);
        };

        eventSource.onerror = () => {
            console.error('Error with EventSource');
        };
    </script>
</body>
</html>

Steps to Run the App

Set up your environment: Ensure you have Node.js installed.
Install dependencies:
```
 npm install express cors
```
Run the server:
```
 node server.js
```
Open the app: Navigate to http://localhost:3000 in your browser to see real-time updates.

Output

Conclusion

EventStream is a powerful yet straightforward tool for building real-time web apps when you only need one-way communication from the server to the client. Compared to WebSockets, it’s easier to implement and maintain for specific use cases. By leveraging EventStream, you can create efficient and lightweight applications without overengineering.

Next time you build a real-time app, ask yourself: Do I really need WebSockets, or will EventStream do the job? The answer might surprise you!

Real-Time Web Apps Simplified: EventStream vs. WebSockets (with Code Examples)