Moitas veces vexo que os equipos chegan (a través de Socket.io ou Pusher) cando simplemente necesitan actualizar unha interfaz de usuario con cambios de estado do lado do servidor. Mentres que os WebSockets son poderosos, a miúdo son sobrecargados. Se o seu requisito é unidireccional (Server → Client) - como marcadores de stock, barras de progreso ou feeds de notificacións - é o protocolo que debes dominar. WebSockets Server-Sent Events (SSE) O SSE corre sobre o estándar HTTP/1.1 ou HTTP/2. Non require manexos complexos, traballa con mecanismos de autenticación estándar e o soporte nativo está construído en cada navegador moderno a través do . EventSource API Nesta guía, imos implementar SSE en Symfony 7.4 usando dous enfoques: 
 
 
 O enfoque nativo: Usando StreamedResponse (Grande para comprender o protocolo e tarefas sinxelas e de baixa competencia). O enfoque de produción: Usando o protocolo Mercure (o estándar escalable e non bloqueante para Symfony). O enfoque nativo (StreamedResponse) A sinfonía Permite que e flush datos ao cliente incrementalmente. Esta é a implementación "raíz" do estándar SSE. StreamedResponse keep an HTTP connection open Crear un novo controlador. usaremos un xerador ou loop para simular os 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;
    }
}
 Non necesitas unha biblioteca para iso.O EventSource nativo do navegador é 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 do servidor (crítico) Este é o lugar onde a maioría dos desenvolvedores fallan.Os servidores web (nginx, etc.) adoran buffer output para optimizar a compresión. Para SSE, o buffer mata o fluxo (o cliente non recibe nada ata que o buffer se enche). Debe ser incapacitado ou usar o engadimos ao 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;
 Comproba o teu Asegurar Está fixado para ou un valor baixo. php.ini output_buffering Off A 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: Desactiva o buffering en curl. Resultado esperado: Debería ver un obxecto JSON aparecendo cada 2 segundos. O control de realidade "Senior" (Por que os nativos son perigosos) Aínda que o código anterior funciona, raramente o recomendo para aplicacións de produción de alto tráfico. Cando un cliente se conecta a /api/stream/stock/AAPL, ese proceso PHP-FPM entra nunha . . . PHP is synchronous while(true) loop It is locked Se tes 50 traballadores de PHP-FPM e 50 usuarios abren esta páxina, todo o teu sitio cae. Tamén mantén unha conexión de base de datos aberta se non está atento. Ten que descargar a xestión de conexión aberta a un servizo dedicado deseñado especificamente para el. No ecosistema de Symfony, esa solución é . Mercure O enfoque da produción (mercurio) Mercure é un protocolo aberto para actualizacións en tempo real. 
 
 
 
 
 O cliente conéctase ao Hub (non á súa aplicación PHP) para escoitar eventos. Symfony envía unha única solicitude POST ao Hub cando os datos cambian. Hub transmite os datos a miles de escoitadores. Resultado: Bloqueo cero de procesos PHP. No ambiente de produción, non pode deixar a súa transmisión pública. Ten que controlar quen pode escoitar o que. Uso de mercurio para iso. JSON Web Tokens (JWT) 
 
 
 Publisher JWT: Permite que a súa aplicación Symfony poña datos (tratados automaticamente polo paquete a través de MERCURE_JWT_SECRET). JWT: Permite que o navegador dun usuario escoite actualizacións privadas. Aquí está como implementar o Xogo en liña en Symfony 7.4. Subscriber JWT Instalación da biblioteca JWT Necesitamos unha biblioteca para xerar tokens manualmente para os nosos usuarios. é o estándar no ecosistema PHP. lcobucci/jwt composer require lcobucci/jwt
 O servizo de xerador de tokens Crear un servizo que xere un JWT asinado para un usuario específico. Reivindica a listaxe dos temas aos que o 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();
    }
}
 Inxectar o token (Método de cookie) O navegador nativo non soporta o envío de cabeceiras HTTP (como ) da EventSource API Authorization: Bearer Para solucionar isto sen engadir polifilamentos de JavaScript pesados, usamos un O Mercure Hub busca automaticamente unha cookie chamada . 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;
    }
}
 Actualización do editor Agora actualiza o teu servizo de editor para marcar a 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);
}
 Páxina do cliente (Non se necesitan cambios) Porque usamos unha , o JavaScript permanece exactamente o mesmo. O navegador enviará automaticamente o cookie cando se conecta ao Hub. Cookie mercureAuthorization // The browser sends the cookie automatically!
const eventSource = new EventSource(hubUrl);
 Verificación 
 
 
 
 
 Limpa as cookies: Limpa as cookies do teu navegador para localhost. Load Dashboard: Visit /dashboard. Inspeccione a pestana Rede. Debería ver un encabezado Set-Cookie con mercureAuthorization. Comproba a conexión: A solicitude de EventSource para o Hub agora debería ser verde (200 OK). Test Privacidade: Probe curlar o Hub directamente sen a cookie; recibirá un 401 Non autorizado para temas privados. Conclusión Como exploramos, implementar datos en tempo real en Symfony 7.4 non é só abrir unha conexión; trátase de escoller a arquitectura que coincida cos seus patróns de tráfico. Mentres o Ofrece unha ruta rápida e libre de dependencia para tarefas administrativas (como barras de progreso de exportación) ou ferramentas internas de baixo tráfico, leva riscos significativos en relación á esgotamento dos traballadores de PHP. Native StreamedResponse Para calquera característica orientada ao usuario, xa sexa un dashboard en directo, un centro de notificacións ou unha ferramenta colaborativa. É o Para o Desconecta completamente a lóxica da aplicación da xestión de conexións, permitindo que o seu backend de Symfony permaneza sen estado e de rendemento, mentres que Caddy xestiona o difícil levantamento de manter miles de conexións inactivas. Mercure non-negotiable standard modern Symfony ecosystem Dominar estes patróns permítelle ir máis aló dos simples ciclos de vida de "pedido-resposta" e construír aplicacións que se sintan vivas e responsivas. Quedemos en contacto A arquitectura en tempo real adoita traer complexidades ocultas en relación ao equilibrio de carga, a configuración de proxy inversa (Nginx / HAProxy) e os límites de seguridade. Imos discutir como podemos preparar a súa aplicación en tempo real.

Read My Stories

Este audio está producido na lingua orixinal da historia!

Todo o que precisa saber para dominar os eventos de envío de servidor (SSE) en Symfony 7.4

About Author

COMENTARIOS

Etiquetas colgantes

ESTE ARTIGO FOI PRESENTADO EN

Related Stories

R Systems Blogbook—Chapter 1 is Now Open for Submissions🎉

Coñece R Systems: HackerNoon empresa da semana

HackerNoon Decoded 2024: Celebrating Our Product Management Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

R Systems Blogbook—Chapter 1 is Now Open for Submissions🎉

Coñece R Systems: HackerNoon empresa da semana

HackerNoon Decoded 2024: Celebrating Our Product Management Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps