Overview of Server-Sent Events (SSE) in HTML

Server-Sent Events (SSE) is a powerful technology that enables servers to send automatic updates to clients over a single HTTP connection. This capability is particularly beneficial for applications that require real-time updates, such as news feeds and stock price alerts.

Key Concepts

• What is SSE?
  • A method for the server to push updates to the client.
  • Utilizes a persistent connection to send data.
• How it Works:
  • The client establishes a connection to the server using the EventSource interface.
  • The server sends messages in a specific format that the client can interpret.

Advantages of SSE

• Automatic Reconnection:
  • If the connection is lost, the browser automatically attempts to reconnect.
• Text-Based Format:
  • Messages are sent in plain text, making them easy to read and debug.
• Built-in Support:
  • Supported natively by most modern browsers without requiring additional libraries.

Basic Example

Server-Side (Node.js)

Here’s a simple example of a server sending events:

const express = require('express');
const app = express();

app.get('/events', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    setInterval(() => {
        const data = new Date().toLocaleTimeString();
        res.write(`data: ${data}\n\n`);
    }, 1000);
});

app.listen(3000, () => console.log('Server started on port 3000'));

Client-Side (HTML)

You can consume the SSE in your HTML using JavaScript like this:

    
    Server-Sent Events Example


    Current Time
    

    
        const eventSource = new EventSource('http://localhost:3000/events');
        eventSource.onmessage = function(event) {
            document.getElementById('time').innerText = event.data;
        };
    

Conclusion

Server-Sent Events provide a straightforward and efficient means to push real-time updates from the server to the client. Understanding and implementing SSE can significantly enhance the interactivity of web applications.