Ich sehe oft Teams, die (über Socket.io oder Pusher), wenn sie einfach eine Benutzeroberfläche mit Statusänderungen auf der Serverseite aktualisieren müssen.Während WebSockets leistungsstark sind, sind sie oft überzogen.Wenn Ihre Anforderung einseitig ist (Server → Client) – wie Aktienticker, Fortschrittsleisten oder Benachrichtigungsfeeds – ist das Protokoll, das Sie beherrschen sollten. WebSockets Server-Sent Events (SSE) SSE läuft über Standard HTTP/1.1 oder HTTP/2. Es erfordert keine komplexen Handschläge, funktioniert mit Standard-Authentifizierungsmechanismen, und native Unterstützung ist in jeden modernen Browser über die . EventSource API In diesem Leitfaden werden wir SSE in Symfony 7.4 mit zwei Ansätzen implementieren: 
 
 
 Der native Ansatz: Verwenden von StreamedResponse (Gut für das Verständnis des Protokolls und einfache, geringe Wettbewerbsaufgaben). Der Produktionsansatz: Verwendung des Mercure-Protokolls (der skalierbare, nicht blockierende Standard für Symfony). Der native Ansatz (StreamedResponse) Die Symphonie Erlaubt Ihnen zu und spülen Sie Daten schrittweise an den Client. Dies ist die "rohe" Implementierung des SSE-Standards. StreamedResponse keep an HTTP connection open Wir verwenden einen Generator oder eine Schleife, um Streamingdaten zu simulieren. 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;
    }
}
 Dazu benötigen Sie keine Bibliothek.Die native EventSource des Browsers ist robust. <!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>
 Konfiguration der Server (kritisch) Hier scheitern die meisten Entwickler.Webserver (nginx, etc.) lieben es, die Pufferausgabe zu optimieren, um die Kompression zu optimieren. Für SSE tötet das Puffer den Strom (der Client erhält nichts, bis der Puffer gefüllt ist). Du musst deaktivieren Oder benutzen Sie die Wir haben den Controller hinzugefügt. 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;
 Überprüfen Sie Ihre sicherstellen ist gesetzt zu Oder einen niedrigen Wert. php.ini output_buffering Off Die Verifizierung: 
 
 
 
 
 
 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: Deaktiviert das Puffern in Curl. Erwartete Ausgabe: Sie sollten ein JSON-Objekt alle 2 Sekunden sehen. Die „Senior“ Realitätsprüfung (Warum Native gefährlich ist) Obwohl der obige Code funktioniert, empfehle ich ihn selten für Produktionsanwendungen mit hohem Traffic. Wenn ein Client eine Verbindung zu /api/stream/stock/AAPL herstellt, tritt dieser PHP-FPM-Arbeiterprozess in eine ... . . PHP is synchronous while(true) loop It is locked Wenn Sie 50 PHP-FPM-Arbeiter haben und 50 Benutzer diese Seite öffnen, läuft Ihre gesamte Website ab. Es hält auch eine Datenbankverbindung offen, wenn Sie nicht vorsichtig sind. Sie müssen das offene Verbindungsmanagement auf einen speziell dafür konzipierten dedizierten Service ausladen. . Mercure Der Ansatz der Produktion (Mercury) Mercure ist ein offenes Protokoll für Echtzeit-Updates. 
 
 
 
 
 Der Client verbindet sich mit dem Hub (nicht Ihrer PHP-App), um auf Ereignisse zuzuhören. Symfony sendet eine einzige POST-Anfrage an den Hub, wenn sich die Daten ändern. Hub sendet die Daten an Tausende von Zuhörern. Das Ergebnis: Zero Blocking PHP-Prozesse. In der Produktionsumgebung können Sie Ihren Stream nicht öffentlich lassen. Sie müssen steuern, wer was hören kann. Merkur verwendet für das. JSON Web Tokens (JWT) 
 
 
 Publisher JWT: Ermöglicht es Ihrer Symfony-App, Daten zu schieben (automatisch durch das Bündel über MERCURE_JWT_SECRET bearbeitet). Abonnent JWT: Erlaubt dem Browser eines Benutzers, private Updates zu hören. Hier ist, wie man die Umsetzung der Flow in der Symphonie 7.4. Subscriber JWT Installation der JWT Bibliothek Wir brauchen eine Bibliothek, um Token manuell für unsere Benutzer zu generieren. ist der Standard im PHP-Ökosystem. lcobucci/jwt composer require lcobucci/jwt
 Der Token Generator Service Erstellen eines Dienstes, der ein signiertes JWT für einen bestimmten Benutzer erzeugt. die Themen auflisten, auf die der Benutzer Zugriff haben darf. 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();
    }
}
 Injektion des Tokens (die Cookie-Methode) Der native Browser unterstützt nicht das Senden von HTTP-Header (wie der ) EventSource API Authorization: Bearer Um dies zu lösen, ohne schwere JavaScript-Polyfills hinzuzufügen, verwenden wir eine Der Mercure Hub sucht automatisch nach einem Cookie namens . 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;
    }
}
 Aktualisieren des Herausgebers Aktualisieren Sie jetzt Ihren Publisher-Dienst, um das Update als Privat zu markieren. // ...
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);
}
 Kundenseite (keine Änderungen erforderlich) Weil wir ein , die JavaScript bleibt genau gleich. Der Browser sendet automatisch die Cookie, wenn es sich mit dem Hub verbindet. Cookie mercureAuthorization // The browser sends the cookie automatically!
const eventSource = new EventSource(hubUrl);
 Überprüfung 
 
 
 
 
 Clear Cookies: Löschen Sie Ihre Browser-Cookies für localhost. Load Dashboard: Visit /dashboard. Überprüfen Sie die Registerkarte Netzwerk. Sie sollten einen Set-Cookie-Header mit mercureAuthorization sehen. Überprüfen Sie die Verbindung: Die EventSource-Anfrage an den Hub sollte jetzt grün sein (200 OK). Test Privatsphäre: Versuchen Sie, den Hub direkt ohne den Cookie zu locken; Sie erhalten einen 401 Unauthorized für private Themen. Schlussfolgerung Wie wir untersucht haben, geht es bei der Implementierung von Echtzeitdaten in Symfony 7.4 nicht nur darum, eine Verbindung zu öffnen; es geht darum, die Architektur zu wählen, die Ihren Verkehrsmuster entspricht. Während die bietet eine schnelle, abhängigkeitsfreie Route für administrative Aufgaben (wie Exportfortschrittsleisten) oder interne Tools mit geringem Traffic, es trägt erhebliche Risiken in Bezug auf die Erschöpfung der PHP-Arbeiter. Native StreamedResponse Für alle benutzerorientierten Funktionen – ob es sich um ein Live-Dashboard, ein Benachrichtigungscenter oder ein kollaboratives Tool handelt – ist die Für die Es entkoppelt Ihre Anwendungslogik vollständig vom Verbindungsmanagement und ermöglicht es Ihrem Symfony-Backend, statuslos und leistungsfähig zu bleiben, während Caddy die schwere Aufhebung der Aufrechterhaltung von Tausenden von leeren Verbindungen bewältigt. Mercure non-negotiable standard modern Symfony ecosystem Wenn Sie diese Muster beherrschen, können Sie über einfache "Anfrage-Antwort"-Lebenszyklen hinausgehen und Anwendungen erstellen, die sich lebendig und reagierend anfühlen. Bleiben wir in Berührung Echtzeit-Architektur bringt oft versteckte Komplexität in Bezug auf Lastbilanzierung, umgekehrte Proxy-Konfiguration (Nginx/HAProxy) und Sicherheitsgrenzen. Lassen Sie uns besprechen, wie wir Ihre Anwendung in Echtzeit vorbereiten können.

Read My Stories

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Alles, was Sie wissen müssen, um Server-Sent Events (SSE) in Symfony 7.4 zu meistern

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps