しばしばチームの到達が見られる。 (Socket.io または Pusher を介して) サーバー側の状態の変更で UI を更新する必要がある場合. WebSockets は強力ですが、しばしば過剰に使用されます. If your requirement is unidirectional (Server → Client) — such as stock tickers, progress bars, or notification feeds — あなたがマスターすべきプロトコルです。 WebSockets Server-Sent Events (SSE) SSE は標準の HTTP/1.1 または HTTP/2 で動作します。複雑なハンドシップは必要ありません、標準の認証メカニズムと共に動作し、ネイティブなサポートはすべての現代のブラウザに組み込まれています。 . EventSource API このガイドでは、Symfony 7.4 で SSE を 2 つのアプローチで実装します。 
 
 
 The Native Approach: Using StreamedResponse(プロトコルやシンプルで競争力の低いタスクを理解するのに最適) The Production Approach: Using the Mercure Protocol (The scalable, non-blocking standard for Symfony) を用いる。 ネイティブアプローチ(StreamedResponse) シンフォニー あなたを許す クライアントにデータを段階的に流し、これはSSE標準の「原材料」の実装です。 StreamedResponse keep an HTTP connection open 新しいコントローラを作成します. 生成器またはループを使用してストリーミングデータをシミュレートします。 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;
    }
}
 あなたはこのためのライブラリを必要としません. ブラウザのネイティブ EventSource は強力です。 <!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>
 サーバー構成(Critical) これがほとんどの開発者が失敗する場所です。Webサーバー(nginxなど)はバッファ出力を好み、圧縮を最適化します。SSEの場合、バッファリングはストリームを殺します(クライアントはバッファが満たされるまで何も受け取りません)。 You must disable あなたは あるいは使用する コントローラーに追加しました。 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;
 あなたのチェック 確保 設定は あるいは低い値段。 php.ini output_buffering Off 検証: 
 
 
 
 
 
 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: curl でバッファリングを無効にします。 予想された出力: 2 秒ごとに 1 つの JSON オブジェクトが表示されるべきです。 The “Senior” Reality Check (Why Native Is Dangerous) 上記のコードが機能する一方で、トラフィックの高い生産アプリケーションにはほとんどお勧めしません。 クライアントが /api/stream/stock/AAPL に接続すると、その PHP-FPM ワーカープロセスは で。 . PHP is synchronous while(true) loop It is locked 50 人の PHP-FPM 従業員と 50 人のユーザーがこのページを開くと、あなたのサイト全体が崩壊します。 注意しない場合は、データベース接続も開きます。 オープン接続管理をそのための専用のサービスにダウンロードする必要があります. In the Symfony ecosystem, that solution is . Mercure 生産方法(水銀) Mercure はリアルタイムの更新のためのオープンなプロトコルで、ハブとして機能します。 
 
 
 
 
 クライアントはハブ(PHPアプリではない)に接続してイベントを聴く。 Symfony は、データが変更されたときに単一の POST リクエストをハブに送信します。 ハブは何千人もの聴衆にデータを送信します。 結果:PHPプロセスをゼロブロックする。 生産環境では、ストリームを公開することはできません。誰が何を聴くことができるかを制御する必要があります。 水銀利用 この為に JSON Web Tokens (JWT) 
 
 
 Publisher JWT: Symfony アプリでデータを押すことができます( MERCURE_JWT_SECRET 経由でバンドルによって自動的に処理されます)。 サブスクリプター JWT: ユーザーのブラウザがプライベートアップデートを聴くことを許可します。 以下は、どのように実施するかです。 シンフォニー 7.4 Subscriber JWT JWT図書館をインストール 私たちは、ユーザーのためにトークンを手動で生成するためのライブラリが必要です。 PHPの生態系の標準です。 lcobucci/jwt composer require lcobucci/jwt
 「Token Generator Service」 特定のユーザーのために署名された JWT を生成するサービスを作成します。 ユーザーがアクセスできるトピックのリストを要求します。 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();
    }
}
 トークンの注入(Cookieの方法) ネイティブブラウザ HTTPヘッダーの送信をサポートしていません(例えば、 ( ) EventSource API Authorization: Bearer この問題を解決するには、重いJavaScript polyfillsを追加することなく、私たちは Mercure Hub は自動的に名前が付けられた Cookie を検索します。 . 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;
    }
}
 編集者を更新 現在、発行者サービスを更新して、アップデートをプライベートとしてマークします。 // ...
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);
}
 クライアント側(変更は不要) なぜなら、我々はA JavaScript はまったく同じです. ブラウザは自動的に ハブに接続する際のクッキー。 Cookie mercureAuthorization // The browser sends the cookie automatically!
const eventSource = new EventSource(hubUrl);
 検証 
 
 
 
 
 クッキーをクリアする: localhost のブラウザのクッキーをクリアします。 Load Dashboard: Visit /dashboard. ネットワーク タブをチェック. あなたは mercureAuthorization と Set-Cookie ヘッダーを見るべきです。 接続を確認する: ハブへの EventSource リクエストは緑色(200 OK)でなければなりません。 プライバシーテスト: クッキーなしでハブを直接カバーしてみて、プライベートなトピックのための401 Unauthorizedを受信します。 結論 Symfony 7.4 でリアルタイムのデータを実装することは、接続を開くことだけでなく、トラフィックパターンに合ったアーキテクチャを選択することです。 たとえThe 管理タスク(輸出進捗バーなど)や低トラフィックの内部ツールのための迅速で依存性のないルートを提供し、PHPの従業員の疲労に関して重大なリスクを伴います。 Native StreamedResponse ライブ ダッシュボード、通知センター、またはコラボレーション ツールであろうと、ユーザー向けの機能に関しては、 is the for the アプリケーションの論理を接続管理から完全に切り離し、Symfonyのバックエンドが無条件でパフォーマンスを保ち、Caddyは何千もの無職の接続を維持するための重い取り組みを処理します。 Mercure non-negotiable standard modern Symfony ecosystem これらのパターンをマスターすることにより、単純な「リクエスト応答」ライフサイクルを超え、活気と反応を感じるアプリケーションを構築することができます。 「Let's Stay in Touch」 リアルタイムアーキテクチャは、負荷バランス、逆プロキシ構成(Nginx/HAProxy)、およびセキュリティの限界に関して、しばしば隠された複雑さをもたらします。 アプリケーションをリアルタイムで準備できる方法について話しましょう。

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

Symfony 7.4 でサーバー送信イベント (SSE) をマスターするために必要なすべての情報

About Author

コメント

ラベル

この記事は

Related Stories

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

ユニークなエコシステムを支えるビットコインUTXOのモデル

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

ユニークなエコシステムを支えるビットコインUTXOのモデル

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps