Image for post Utilizando Server-Sent Events para Actualizaciones en Tiempo Real en Aplicaciones Web

Utilizando Server-Sent Events para Actualizaciones en Tiempo Real en Aplicaciones Web

Escrito por Sergio Márquez

En el desarrollo moderno de aplicaciones web, la capacidad de proporcionar actualizaciones en tiempo real es fundamental. Una de las tecnologías que facilita esta funcionalidad es Server-Sent Events (SSE). En este artículo, exploraremos qué son los SSE, cómo funcionan y cómo implementarlos en una aplicación web.

¿Qué son Server-Sent Events?

Server-Sent Events es una API que permite a un servidor enviar actualizaciones automáticas a su cliente a través de una sola conexión HTTP. A diferencia de WebSockets, que permite la comunicación bidireccional, SSE proporciona un flujo unidireccional de datos desde el servidor hacia el cliente.

Ventajas de usar Server-Sent Events

  • Simple e intuitivo: SSE es más fácil de usar pura y simplemente por su naturaleza de flujo de datos unidireccional.
  • Soporte nativo: La mayoría de los navegadores modernos ofrecen soporte nativo para SSE.
  • Reconexión automática: Si la conexión se interrumpe, el cliente puede volver a conectarse automáticamente.

Implementación de Server-Sent Events

A continuación, te mostramos cómo implementar Server-Sent Events en una aplicación simple usando Node.js y JavaScript del lado del cliente.

1. Configuración del servidor

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

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(PORT, () => {
    console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

2. Configuración del cliente

<!DOCTYPE html>
<html>
<head><title>Ejemplo de SSE</title></head>
<body>
    <h1>Server-Sent Events Demo</h1>
    <div id="events"></div>
    <script>
        const eventSource = new EventSource('/events');
        eventSource.onmessage = function(event) {
            const eventsDiv = document.getElementById('events');
            eventsDiv.innerHTML += 'Actualización: ' + event.data + '<br>';
        };
    </script>
</body>
</html>

Conclusión

Server-Sent Events son una herramienta poderosa para las aplicaciones web que requieren actualizaciones en tiempo real. A diferencia de otras tecnologías, como WebSockets, proporcionan una implementación más simple para la mayoría de las necesidades unidireccionales.

Volver al blog