¿Qué son los Server-Sent Events (SSE) y cómo funcionan?

En una aplicación web tradicional, la actualización de información en tiempo real puede ser un problema, ya que requiere una comunicación constante entre el cliente y el servidor. En estos casos, se suelen utilizar técnicas como polling o long-polling, en las que el cliente realiza peticiones al servidor en intervalos regulares para obtener actualizaciones de información.

Sin embargo, estas técnicas pueden resultar ineficientes en situaciones en las que se necesita una actualización constante de información, ya que pueden generar un tráfico excesivo en la red y un aumento en el consumo de recursos del servidor.

¿Cómo solucionar estos problemas?

Para solucionar estos problemas, se han desarrollado alternativas más eficientes como WebSockets y Server-Sent Events (SSE), que permiten una comunicación bidireccional entre el cliente y el servidor y una actualización constante de información en tiempo real sin tener que realizar peticiones innecesarias al servidor.

Los Server-Sent Events (SSE) son una tecnología web que permite a los servidores enviar datos a los clientes de forma asincrónica, en tiempo real y sin necesidad de realizar peticiones adicionales al servidor. Esto se logra a través de una conexión HTTP de larga duración entre el cliente y el servidor, en la que el servidor envía eventos al cliente cuando se producen actualizaciones en los datos.
El protocolo HTTP es el que se utiliza para establecer la conexión SSE, utilizando una petición GET con una cabecera específica que indica que se desea una respuesta en formato de eventos. El servidor envía los eventos al cliente en un stream continuo, separados por líneas en blanco y precedidos por un identificador único y opcionalmente, otros campos de metadatos.
El cliente recibe los eventos en tiempo real y puede procesarlos para actualizar la información en la página web sin necesidad de refrescarla. Además, los SSE permiten la gestión de errores y la posibilidad de reintentar la conexión en caso de fallos.
Un ejemplo sencillo de cómo se ve un stream de eventos en el navegador sería el siguiente:

var source = new EventSource('/stream');
source.onmessage = function(event) {
  console.log(event.data);
};

En este ejemplo, se crea una instancia de EventSource para conectarse al servidor y recibir los eventos. El servidor envía los eventos a través de la ruta «/stream» y el cliente los recibe mediante la función «onmessage», que muestra los datos del evento en la consola del navegador.

Ventajas y desventajas de los Server-Sent Events

Los Server-Sent Events (SSE), WebSockets y polling son tecnologías que permiten la actualización de información en tiempo real en aplicaciones web, pero presentan diferencias en cuanto a sus ventajas y desventajas.

Las principales ventajas de los SSE son:

Compatibilidad con el protocolo HTTP: Los SSE utilizan el protocolo HTTP, lo que significa que no es necesario abrir un nuevo canal de comunicación, como en el caso de WebSockets, y pueden utilizarse con servidores web estándar.
Fácil implementación: La implementación de SSE es relativamente sencilla y no requiere conocimientos avanzados de programación.
Consumo de recursos limitado: Los SSE son menos demandantes en cuanto a recursos del servidor y del cliente que otras tecnologías, como WebSockets o polling, lo que puede resultar beneficioso en aplicaciones con grandes volúmenes de tráfico.
Capacidad de reintentar la conexión: En caso de fallos en la conexión, los SSE permiten la reanudación automática de la conexión, lo que mejora la fiabilidad de la tecnología.
Sin embargo, los SSE también presentan algunas desventajas, entre ellas:

Limitaciones en la comunicación bidireccional: Los SSE solo permiten la comunicación unidireccional, es decir, del servidor al cliente, lo que puede ser un problema en aplicaciones que requieren una comunicación bidireccional, como en juegos en línea.
Limitaciones en la cantidad y tamaño de los datos: Los SSE pueden ser limitados en cuanto a la cantidad y tamaño de los datos que se pueden enviar en cada evento, lo que puede limitar su utilidad en aplicaciones con grandes volúmenes de información.
En cuanto a cuándo es recomendable utilizar SSE, esta tecnología puede ser una buena opción en aplicaciones que requieren actualizaciones en tiempo real de información, pero no necesitan una comunicación bidireccional constante y no tienen grandes volúmenes de información para enviar. Por ejemplo, en aplicaciones de noticias, actualizaciones de redes sociales o seguimiento de eventos en tiempo real.

Implementación de Server-Sent Events en una aplicación web

Aquí describiré un ejemplo de implementación de Server-Sent Events (SSE) utilizando PHP y JavaScript:

En el lado del servidor (PHP):

En primer lugar, se debe habilitar la respuesta HTTP de SSE en el servidor mediante la configuración de cabeceras. Para ello, se debe enviar una respuesta con las siguientes cabeceras:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\StreamedResponse;

class StreamController extends Controller
{
    public function stream()
    {
        $response = new StreamedResponse();
        $response->headers->set('Content-Type', 'text/event-stream');
        $response->headers->set('Cache-Control', 'no-cache');
        $response->headers->set('Connection', 'keep-alive');

        $response->setCallback(function () {
            while (true) {
                // Agrega aquí la lógica para obtener los datos que deseas enviar
                $data = [
                    'mensaje' => 'Este es un mensaje de ejemplo',
                    'fecha' => date('Y-m-d H:i:s')
                ];

                // Crea el evento Server-Sent Event y envía los datos
                echo 
"event: nombre_del_evento\n";
                echo "data: " . json_encode($data) . "\n\n";
                ob_flush();
                flush();

                // Espera 10 segundos antes de enviar el siguiente evento
                sleep(10);
            }
        });

        return $response;
    }
}

A continuación, se deben enviar los eventos desde el servidor. Esto se hace mediante la escritura de los eventos en el cuerpo de la respuesta HTTP.
echo "event: nombre_del_evento\n";
echo "data: " . $datos_del_evento . "\n\n";
Aquí, el «nombre_del_evento» es un nombre arbitrario que se le da al evento, y los «datos_del_evento» son los datos que se envían con el evento.

Es necesario enviar un carácter de nueva línea en blanco («\n\n») después de cada evento para que el navegador pueda procesarlo adecuadamente.

En el lado del cliente (JavaScript):

Se debe crear un objeto EventSource en JavaScript para conectarse al servidor y recibir los eventos.

const source = new EventSource('url_del_servidor');

A continuación, se deben definir los manejadores de eventos para procesar los eventos recibidos del servidor.

source.addEventListener('nombre_del_evento', function(evento) {
  console.log(evento.data); // procesa los datos del evento recibido
});

Es posible definir manejadores de eventos para diferentes eventos en el servidor.

source.addEventListener('otro_nombre_de_evento', function(evento) {
  console.log(evento.data); // procesa los datos del evento recibido
});

En resumen, el proceso de envío de eventos desde el servidor a través de SSE se realiza mediante la configuración de cabeceras para habilitar la respuesta HTTP SSE, la escritura de eventos en el cuerpo de la respuesta y el envío de un carácter de nueva línea en blanco después de cada evento. Por otro lado, en el lado del cliente, se debe crear un objeto EventSource para conectarse al servidor y definir manejadores de eventos para procesar los eventos recibidos del servidor.

Las principales ventajas de los SSE son:

Compatibilidad con el protocolo HTTP: Los SSE utilizan el protocolo HTTP, lo que significa que no es necesario abrir un nuevo canal de comunicación, como en el caso de WebSockets, y pueden utilizarse con servidores web estándar.
Fácil implementación: La implementación de SSE es relativamente sencilla y no requiere conocimientos avanzados de programación.
Consumo de recursos limitado: Los SSE son menos demandantes en cuanto a recursos del servidor y del cliente que otras tecnologías, como WebSockets o polling, lo que puede resultar beneficioso en aplicaciones con grandes volúmenes de tráfico.
Capacidad de reintentar la conexión: En caso de fallos en la conexión, los SSE permiten la reanudación automática de la conexión, lo que mejora la fiabilidad de la tecnología.
Sin embargo, los SSE también presentan algunas desventajas, entre ellas:

Limitaciones en la comunicación bidireccional: Los SSE solo permiten la comunicación unidireccional, es decir, del servidor al cliente, lo que puede ser un problema en aplicaciones que requieren una comunicación bidireccional, como en juegos en línea.
Limitaciones en la cantidad y tamaño de los datos: Los SSE pueden ser limitados en cuanto a la cantidad y tamaño de los datos que se pueden enviar en cada evento, lo que puede limitar su utilidad en aplicaciones con grandes volúmenes de información.
En cuanto a cuándo es recomendable utilizar SSE, esta tecnología puede ser una buena opción en aplicaciones que requieren actualizaciones en tiempo real de información, pero no necesitan una comunicación bidireccional constante y no tienen grandes volúmenes de información para enviar. Por ejemplo, en aplicaciones de noticias, actualizaciones de redes sociales o seguimiento de eventos en tiempo real.

Casos de uso de Server-Sent Events

Server-Sent Events (SSE) es una tecnología que permite enviar eventos desde el servidor al cliente de forma asíncrona y en tiempo real. A continuación, se presentan algunos casos de uso comunes de SSE:

Notificaciones en tiempo real: Las notificaciones en tiempo real son un caso de uso común para SSE. Por ejemplo, una aplicación de mensajería puede utilizar SSE para enviar notificaciones a los usuarios en tiempo real cuando reciben un nuevo mensaje.
Actualización de feeds de redes sociales: Las redes sociales pueden utilizar SSE para actualizar los feeds de los usuarios en tiempo real. Por ejemplo, cuando un usuario sigue a otra persona, SSE puede utilizarse para actualizar automáticamente el feed de ese usuario con las publicaciones más recientes de la persona que sigue.
Monitoreo de eventos en tiempo real: Las empresas pueden utilizar SSE para monitorear eventos en tiempo real, como el rendimiento del servidor o el comportamiento de los usuarios en una aplicación. SSE permite que las empresas reciban alertas en tiempo real cuando ocurre un evento importante.
Actualización de información en tiempo real: Las aplicaciones pueden utilizar SSE para actualizar la información en tiempo real en el navegador sin necesidad de recargar la página. Por ejemplo, una aplicación de seguimiento de precios puede utilizar SSE para actualizar los precios de los productos en tiempo real.
SSE es una solución más adecuada en estos casos que otras alternativas como el polling o WebSockets por las siguientes razones:

SSE utiliza una conexión HTTP de larga duración, lo que reduce la sobrecarga de red en comparación con el polling, donde el cliente debe realizar solicitudes frecuentes al servidor.
SSE es una solución más simple que WebSockets y no requiere la implementación de un protocolo personalizado.
SSE es compatible con la mayoría de los navegadores modernos, lo que lo hace una opción más accesible que WebSockets.
En general, SSE es una solución adecuada para casos de uso que requieren actualizaciones en tiempo real, pero que no requieren una comunicación bidireccional compleja entre el servidor y el cliente.

Es importante destacar que SSE es una opción más simple y accesible que WebSockets, por lo que es ideal para aplicaciones que no requieren una comunicación bidireccional compleja. Además, SSE ofrece una solución más eficiente que el polling, ya que reduce la sobrecarga de red al mantener una conexión HTTP de larga duración. En general, SSE es una herramienta valiosa para mantener a los usuarios informados en tiempo real sobre los eventos importantes en una aplicación.

Referencias
«Server-Sent Events» en MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
«HTML5 Server-Sent Events» en W3Schools: https://www.w3schools.com/html/html5_serversentevents.asp
«How to Use Server-Sent Events (SSE) in Your Node.js App» en SitePoint: https://www.sitepoint.com/server-sent-events-nodejs/
«Server-Sent Events (SSE) with PHP» en Tania Rascia’s blog: https://www.taniarascia.com/server-sent-events-php/
«Server-Sent Events (SSE) with Express» en Tania Rascia’s blog: https://www.taniarascia.com/server-sent-events-with-node-js/
«Real-time Notifications with Server-Sent Events» en Scotch.io: https://scotch.io/tutorials/real-time-notifications-with-server-sent-events#toc-part-1-what-are-server-sent-events-sse-