A menudo veo equipos que llegan a (a través de Socket.io o Pusher) cuando simplemente necesitan actualizar una interfaz de usuario con cambios de estado en el lado del servidor. Mientras que los WebSockets son potentes, a menudo son sobrecogidos. Si su requisito es unidireccional (Server → Client) —como marcadores de stock, barras de progreso o feeds de notificaciones — Este es el protocolo que debes dominar. WebSockets Server-Sent Events (SSE) SSE se ejecuta sobre el estándar HTTP/1.1 o HTTP/2. No requiere maniobras complejas, trabaja con mecanismos de autenticación estándar, y el soporte nativo está integrado en cada navegador moderno a través del . EventSource API En esta guía, implementaremos SSE en Symfony 7.4 utilizando dos enfoques: 
 
 
 El enfoque nativo: Usando StreamedResponse (Gran para comprender el protocolo y tareas simples y de baja competencia). El enfoque de producción: Usando el protocolo Mercure (el estándar escalable y no bloqueador para Symfony). El enfoque nativo (StreamedResponse) La sinfonía Te permite y despeje los datos al cliente incrementalmente.Esta es la implementación “raíz” del estándar SSE. StreamedResponse keep an HTTP connection open Crear un nuevo controlador. Utilizaremos un generador o un loop para simular los datos de streaming. namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\StreamedResponse;
use Symfony\Component\Routing\Attribute\Route;

#[Route('/api/stream', name: 'api_stream_stock')]
class StockStreamController extends AbstractController
{
    #[Route('/stock/{symbol}', name: 'stock_ticker', methods: ['GET'])]
    public function stream(string $symbol): StreamedResponse
    {
        // 1. Create the StreamedResponse
        $response = new StreamedResponse(function () use ($symbol) {
            // 2. Prevent PHP time limits for long-running processes
            set_time_limit(0); 
            
            // 3. Simple loop to simulate data stream
            // In a real app, you might check Redis or a Database here
            $i = 0;
            while (true) {
                // Connection check: Stop if client disconnected
                if (connection_aborted()) {
                    break;
                }

                $data = [
                    'symbol' => strtoupper($symbol),
                    'price' => rand(100, 200),
                    'timestamp' => date('c'),
                    'sequence' => $i++
                ];

                // 4. Format according to SSE Spec
                // Format: "data: {payload}\n\n"
                echo "event: stock_update\n"; // Optional event name
                echo 'data: ' . json_encode($data) . "\n\n";

                // 5. Critical: Flush the buffer to send data immediately
                ob_flush();
                flush();

                // simulate delay
                sleep(2);
            }
        });

        // 6. Set Headers specifically for SSE
        $response->headers->set('Content-Type', 'text/event-stream');
        $response->headers->set('Cache-Control', 'no-cache');
        $response->headers->set('X-Accel-Buffering', 'no'); // Crucial for Nginx

        return $response;
    }
}
 No necesitas una biblioteca para esto.El nativo de EventSource del navegador es robusto. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Symfony SSE Stream</title>
</head>
<body>
    <h1>Live Ticker: <span id="symbol">LOADING...</span></h1>
    <div id="price" style="font-size: 2rem;">--</div>
    <ul id="log"></ul>

    <script>
        const symbol = 'AAPL';
        // Connect to the Symfony endpoint
        const eventSource = new EventSource(`/api/stream/stock/${symbol}`);

        // Listen for the specific 'stock_update' event name defined in PHP
        eventSource.addEventListener('stock_update', (e) => {
            const data = JSON.parse(e.data);
            
            document.getElementById('symbol').innerText = data.symbol;
            document.getElementById('price').innerText = '$' + data.price;
            
            // Log for visibility
            const li = document.createElement('li');
            li.innerText = `${data.timestamp}: $${data.price}`;
            document.getElementById('log').prepend(li);
        });

        eventSource.onerror = (err) => {
            console.error("EventSource failed:", err);
            // EventSource auto-reconnects by default, but you can handle closure here
        };
    </script>
</body>
</html>
 Configuración del servidor (crítico) Aquí es donde la mayoría de los desarrolladores fallan. los servidores web (nginx, etc.) aman la salida de buffer para optimizar la compresión. Para SSE, el buffer mata el flujo (el cliente no recibe nada hasta que el buffer se llena). Usted debe ser incapacitado O utilizar el Hemos añadido el controlador. fastcgi_buffering X-Accel-Buffering: no header # inside your location ~ \.php$ block
fastcgi_split_path_info ^(.+\.php)(/.+)$;
# ... standard config ...
# Ensure buffering is off for SSE if headers fail
fastcgi_buffering off;
 Compruebe su - Asegurar Se ha establecido o un valor bajo. php.ini output_buffering Off La verificación: 
 
 
 
 
 
 Start your local server:  symfony server:start 
 
 Open your terminal. 
 
 Use   to verify the stream without a browser: curl curl -N -v http://127.0.0.1:8000/api/stream/stock/AAPL
 
 
 
 -N: Deshabilita el buffering en curl. Resultado esperado: debe ver un objeto JSON aparecido cada 2 segundos. El “Senior” Reality Check (Por qué los nativos son peligrosos) Si bien el código anterior funciona, raramente lo recomiendo para aplicaciones de producción de alto tráfico. Cuando un cliente se conecta a /api/stream/stock/AAPL, ese proceso de trabajador de PHP-FPM entra en un . el . PHP is synchronous while(true) loop It is locked Si tienes 50 trabajadores de PHP-FPM y 50 usuarios abren esta página, todo tu sitio se cae. También mantiene una conexión de base de datos abierta si no está atento. Usted tiene que descargar la gestión de conexión abierta a un servicio dedicado diseñado específicamente para ella. . Mercure El enfoque de la producción (mercurio) Mercure es un protocolo abierto para actualizaciones en tiempo real. 
 
 
 
 
 El cliente se conecta al Hub (no a su aplicación PHP) para escuchar eventos. Symfony envía una única solicitud POST al Hub cuando los datos cambian. Hub transmite los datos a miles de oyentes. Resultado: Bloqueo cero de procesos PHP. En el entorno de producción, no puedes dejar tu flujo público.Tienes que controlar quién puede escuchar qué. Uso de Mercurio para esto. JSON Web Tokens (JWT) 
 
 
 Publisher JWT: Permite que su aplicación Symfony impulse datos (manejados automáticamente por el paquete a través de MERCURE_JWT_SECRET). JWT: Permite que el navegador de un usuario escuche actualizaciones privadas. Aquí está cómo implementar el En la versión 7.4 de Symfony. Subscriber JWT Instalación de la biblioteca JWT Necesitamos una biblioteca para generar tokens manualmente para nuestros usuarios. es el estándar en el ecosistema PHP. lcobucci/jwt composer require lcobucci/jwt
 El servicio de generador de token Crear un servicio que genere un JWT firmado para un usuario específico. reclamar la lista de los temas a los que el usuario está autorizado a acceder. mercure //src/Service/MercureTokenGenerator.php

namespace App\Service;

use Lcobucci\JWT\Configuration;
use Lcobucci\JWT\Signer\Hmac\Sha256;
use Lcobucci\JWT\Signer\Key\InMemory;
use Symfony\Component\DependencyInjection\Attribute\Autowire;

class MercureTokenGenerator
{
    private Configuration $config;

    public function __construct(
        // Inject the same secret used in your .env for the Mercure Hub
        #[Autowire('%env(MERCURE_JWT_SECRET)%')]
        private string $secret
    ) {
        $this->config = Configuration::forSymmetricSigner(
            new Sha256(),
            InMemory::plainText($this->secret)
        );
    }

    public function generate(string $userTopic): string
    {
        return $this->config->builder()
            ->withClaim('mercure', [
                'subscribe' => [
                    $userTopic, // Allow access to this specific topic
                    // 'https://mysite.com/books/{id}' // You can add patterns here
                ]
            ])
            ->getToken($this->config->signer(), $this->config->signingKey())
            ->toString();
    }
}
 Injection of the Token (Método de la cookie) El navegador nativo no soporta el envío de encabezados HTTP (como ) de EventSource API Authorization: Bearer Para resolver esto sin añadir polifilamentos de JavaScript pesados, utilizamos un El Mercure Hub busca automáticamente una cookie llamada . Cookie mercureAuthorization //src/Controller/StockPageController.php

namespace App\Controller;

use App\Service\MercureTokenGenerator;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Cookie;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class StockPageController extends AbstractController
{
    #[Route('/dashboard', name: 'app_dashboard')]
    public function index(MercureTokenGenerator $tokenGenerator): Response
    {
        // 1. Define the private topic this user is allowed to see
        $userTopic = 'https://mysite.com/user/123/alerts';

        // 2. Generate the JWT
        $token = $tokenGenerator->generate($userTopic);

        // 3. Create the response (render your Twig template)
        $response = $this->render('dashboard/index.html.twig', [
            'userTopic' => $userTopic
        ]);

        // 4. Attach the JWT as a Cookie
        // The Hub must be on the same domain (or subdomain) for this to work
        $response->headers->setCookie(Cookie::create(
            'mercureAuthorization',
            $token,
            0,              // Session cookie
            '/.well-known/mercure', // Path (critical: restricts cookie to Hub)
            null,           // Domain (null = current domain)
            false,          // Secure (true if HTTPS)
            true,           // HttpOnly
            false,          // Raw
            'strict'        // SameSite
        ));

        return $response;
    }
}
 Actualizar el editor Ahora actualice su servicio de editor para marcar la actualización como privada. // ...
public function publishPrivateAlert(string $userId, string $message): void
{
    $topic = "https://mysite.com/user/{$userId}/alerts";
    
    $update = new Update(
        $topic,
        json_encode(['alert' => $message]),
        true // <--- TRUE marks this as Private
    );

    $this->hub->publish($update);
}
 Cliente (no se necesitan cambios) Debido a que utilizamos a , el JavaScript permanece exactamente el mismo. El navegador enviará automáticamente el cookie cuando se conecta al Hub. Cookie mercureAuthorization // The browser sends the cookie automatically!
const eventSource = new EventSource(hubUrl);
 Verificación 
 
 
 
 
 Cookies claras: Limpiar las cookies de su navegador para localhost. Load Dashboard: Visit /dashboard. Inspeccione la pestaña de Red. Debe ver un encabezado de Set-Cookie con mercureAuthorization. Comprobar la conexión: la solicitud de EventSource al Hub ahora debe ser verde (200 OK). Pruebe la privacidad: Trate de curlar el Hub directamente sin la cookie; recibirá un 401 No autorizado para temas privados. Conclusión Como hemos explorado, implementar datos en tiempo real en Symfony 7.4 no es solo abrir una conexión; se trata de elegir la arquitectura que coincida con sus patrones de tráfico. Mientras que el Ofrece una ruta rápida y libre de dependencias para tareas administrativas (como barras de progreso de exportación) o herramientas internas de bajo tráfico, conlleva riesgos significativos con respecto al agotamiento de los trabajadores de PHP. Native StreamedResponse Para cualquier característica orientada al usuario, ya sea un dashboard en vivo, un centro de notificaciones o una herramienta de colaboración, Es el Para el Desconecta completamente la lógica de su aplicación de la gestión de conexión, permitiendo que su backend de Symfony permanezca sin estado y con rendimiento, mientras que Caddy maneja el duro levantamiento de mantener miles de conexiones inactivas. Mercure non-negotiable standard modern Symfony ecosystem El dominio de estos patrones le permite ir más allá de los simples ciclos de vida de "pedido-respuesta" y construir aplicaciones que se sientan vivas y responsivas. Quedemos en el toque La arquitectura en tiempo real a menudo trae complicaciones ocultas en relación con el equilibrio de carga, la configuración de proxy inversa (Nginx/HAProxy) y los límites de seguridad. Vamos a discutir cómo podemos preparar su aplicación en tiempo real.

Read My Stories

Este audio es producido en el idioma original de la historia!

Todo lo que necesita saber para dominar los eventos de envío de servidor (SSE) en Symfony 7.4

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Telegram: el puente de Crypto Island hacia el continente

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Telegram: el puente de Crypto Island hacia el continente

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps