On voit souvent des équipes (via Socket.io ou Pusher) lorsqu'ils ont simplement besoin de mettre à jour une interface utilisateur avec des changements d'état du côté du serveur. Alors que WebSockets sont puissants, ils sont souvent overkill. est le protocole que vous devriez maîtriser. WebSockets Server-Sent Events (SSE) SSE s'exécute sur le standard HTTP/1.1 ou HTTP/2. Il ne nécessite pas de gestes complexes, fonctionne avec des mécanismes d'authentification standard, et le support natif est intégré dans chaque navigateur moderne via le . EventSource API Dans ce guide, nous implémenterons SSE dans Symfony 7.4 en utilisant deux approches: 
 
 
 L'approche native: Utilisation de StreamedResponse (Grande pour la compréhension du protocole et des tâches simples et à faible concurrence). L'approche de production: Utilisation du protocole Mercure (le standard évolutif, non-blocage pour Symfony). L’approche native (StreamedResponse) La symphonie Vous permet de et de rincer les données au client progressivement.C’est la mise en œuvre « crue » de la norme SSE. StreamedResponse keep an HTTP connection open Créer un nouveau contrôleur. Nous utiliserons un générateur ou une boucle pour simuler les données 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;
    }
}
 Vous n'avez pas besoin d'une bibliothèque pour cela. EventSource natif du navigateur est robuste. <!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>
 Configuration du serveur (critique) C'est là que la plupart des développeurs échouent. les serveurs Web (nginx, etc.) aiment utiliser la sortie tampon pour optimiser la compression. Pour SSE, le tampon tue le flux (le client ne reçoit rien jusqu'à ce que le tampon se remplisse). Vous devez être incapable ou utiliser le Nous avons ajouté dans le contrôleur. 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;
 Vérifiez votre assurer Il est fixé à ou de faible valeur. php.ini output_buffering Off vérification : 
 
 
 
 
 
 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 : désactive le tampon dans le curl. Sortie attendue : vous devriez voir un objet JSON apparaître toutes les 2 secondes. La vérification de la réalité « senior » (pourquoi les autochtones sont dangereux) Bien que le code ci-dessus fonctionne, je le recommande rarement pour les applications de production à fort trafic. Lorsqu'un client se connecte à /api/stream/stock/AAPL, ce processus de travail PHP-FPM entre dans un Le . . PHP is synchronous while(true) loop It is locked Si vous avez 50 employés de PHP-FPM et 50 utilisateurs ouvrent cette page, votre site entier tombe en panne. Il maintient également une connexion de base de données ouverte si vous n’êtes pas prudent. Vous devez télécharger la gestion de connexion ouverte vers un service dédié spécialement conçu pour elle. . Mercure L’approche de la production (mercure) Mercure est un protocole ouvert pour les mises à jour en temps réel. 
 
 
 
 
 Le client se connecte au Hub (pas à votre application PHP) pour écouter des événements. Symfony envoie une seule demande POST au Hub lorsque les données changent. Hub transmet les données à des milliers d'auditeurs. Résultat : zéro blocage des processus PHP. Dans l'environnement de production, vous ne pouvez pas laisser votre flux public. Vous devez contrôler qui peut écouter quoi. Utilisation de Mercure pour ceci. JSON Web Tokens (JWT) 
 
 
 Publisher JWT: Permet à votre application Symfony de pousser des données (traitées automatiquement par le bundle via MERCURE_JWT_SECRET). JWT : Permet au navigateur d’un utilisateur d’écouter des mises à jour privées. Voici comment mettre en œuvre le En direct sur Symphony 7.4. Subscriber JWT Installation de la bibliothèque JWT Nous avons besoin d’une bibliothèque pour générer des jetons manuellement pour nos utilisateurs. est la norme dans l'écosystème PHP. lcobucci/jwt composer require lcobucci/jwt
 Le service de générateur de jetons Créer un service qui génère un JWT signé pour un utilisateur spécifique. affirmer la liste des sujets auxquels l'utilisateur est autorisé à accéder. 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();
    }
}
 Injecting the Token (Méthode du cookie) Le navigateur natif ne prend pas en charge l'envoi d'en-têtes HTTP (comme ) de EventSource API Authorization: Bearer Pour résoudre ce problème sans ajouter de polyfills JavaScript lourds, nous utilisons un Le Mercure Hub recherche automatiquement un cookie nommé . 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;
    }
}
 Mettre à jour l’éditeur Maintenant, mettez à jour le service de votre éditeur pour marquer la mise à jour comme privée. // ...
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);
}
 Page client (pas de modification nécessaire) Parce que nous avons utilisé une , le JavaScript reste exactement le même. Le navigateur enverra automatiquement cookie lorsqu’il se connecte au hub. Cookie mercureAuthorization // The browser sends the cookie automatically!
const eventSource = new EventSource(hubUrl);
 vérification 
 
 
 
 
 Cookies clairs : effacer les cookies de votre navigateur pour localhost. Load Dashboard: Visit /dashboard. Inspectez l'onglet Réseau. Vous devriez voir un en-tête Set-Cookie avec mercureAuthorization. Vérifiez la connexion : la requête EventSource vers le Hub devrait désormais être verte (200 OK). Testez la confidentialité: Essayez de courber le hub directement sans le cookie; vous recevrez un 401 Non autorisé pour les sujets privés. Conclusion Comme nous l’avons exploré, la mise en œuvre de données en temps réel dans Symfony 7.4 ne consiste pas seulement à ouvrir une connexion ; il s’agit de choisir l’architecture qui correspond à vos modèles de trafic. Alors que le offrant un itinéraire rapide et sans dépendance pour les tâches administratives (comme les barres de progrès d'exportation) ou les outils internes à faible trafic, il comporte des risques importants en ce qui concerne l'épuisement des travailleurs PHP. Native StreamedResponse Pour toute fonctionnalité visant l’utilisateur – qu’il s’agisse d’un tableau de bord en direct, d’un centre de notification ou d’un outil de collaboration – est le Pour le Il déconnecte complètement votre logique d'application de la gestion de la connexion, permettant à votre backend Symfony de rester sans état et performant tandis que Caddy gère le lourd soulèvement du maintien de milliers de connexions inactives. Mercure non-negotiable standard modern Symfony ecosystem La maîtrise de ces modèles vous permet de passer au-delà des cycles de vie simples « demande-réponse » et de construire des applications qui se sentent vivantes et réactives. Restez au toucher L’architecture en temps réel apporte souvent des complexités cachées concernant l’équilibrage de la charge, la configuration de proxy inverse (Nginx/HAProxy) et les limites de sécurité. Parlons de la façon dont nous pouvons préparer votre application en temps réel.

Read My Stories

Cet audio est produit dans la langue originale de l'histoire !

Tout ce que vous devez savoir pour maîtriser les événements envoyés par serveur (SSE) dans Symfony 7.4

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Télégramme : le pont de Crypto Island vers le continent

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Télégramme : le pont de Crypto Island vers le continent

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps