SSE イベントストリームビューア

キャプチャした text/event-stream の応答を貼り付け、イベントを選んで各フィールドを確認できます。ライブ接続は開かずにテキストだけを解析します。

ブラウザ内でローカルに実行
このビューアは貼り付けたテキストのみを解析します。エンドポイントに接続したり、ストリームデータをどこかに送信したりすることはありません。
SSE ストリームテキスト空行で区切られた text/event-stream フレームを貼り付け

接続を開かずにプロトコルフレームを検証

キャプチャした text/event-stream レスポンスを貼り付けて、フィールドの折りたたみやイベントのディスパッチをデバッグできます。認証、再接続の動作、HTTP キャッシュ、接続の健全性は、引き続きクライアントとサーバーのテストで確認する必要があります。

キャプチャした SSE ストリームを確認する方法

キャプチャした text/event-stream の応答を貼り付けて「イベントを解析」を押すと、イベントごとに名前、ブラウザが報告する ID、retry 値、折りたたまれた data が表示されます。有効な JSON は詳細パネルで展開され、ストリーム全体は NDJSON としてコピーできます。

解析はブラウザが EventSource ストリームに適用する規則に従います。ここに表示されるフレームはクライアントでも配信されるフレームで、ここで破棄されるブロックはブラウザでも破棄されます。処理はすべてページ内で完結し、接続は開かず、貼り付けたテキストは送信されません。

  1. SSE ストリームのテキスト欄にキャプチャを貼り付けます。
  2. 「イベントを解析」を押します。表には配信されるイベントが並びます。ブロックを空行で閉じていないストリームは、途中で切れた接続と同じく、イベントを 1 件も生成しません。
  3. 行をクリックすると、デコードされた JSON を含むそのイベントの完全なデータが表示されます。
  4. 「NDJSON をコピー」で全イベントを取り出すか、「クリア」でワークベンチを初期状態に戻します。

フィールド規則・ID・配信のタイミング

解析器が読むもの

フィールド名はそのまま比較します(data、event、id、retry)。コロンの直後の空白は 1 つだけ取り除かれるため、「data:x」と「data: x」は同じ値になり、「data: x」は先頭の空白を 1 つ残します。コロンのない行は値が空のフィールド名として扱われ、「data」だけの行は空行を 1 行 data に追加します。未知のフィールドは無視されます。

data 行は改行付きで追加され、折りたたまれたデータはその改行を保ち、配信時に最後の 1 つを落とします。コメントはコロンで始まり、イベントを配信しません。コメント数は指標に表示されます。

ID・retry・配信のタイミング

イベントは空行がブロックを閉じたときだけ配信されます。貼り付けたテキストの最後にある未完了のブロックは破棄されます。ブラウザが途中で終わるストリームに対して行う動作と同じで、表示させたい場合は不足している空行を補ってください。id フィールドはその場で最終イベント ID を更新するため、id のない後続のイベントも同じ値を持ち、空の「id:」は値を消します。NUL 文字を含む ID は無視されます。既定値に戻るのはイベント名だけです(message)。

retry は値が数字だけの場合に採用されます。指標には最後に採用された値、つまりクライアントが残りのストリームで使う再接続時間が表示されます。サーバーの応答時間や再接続の成否は測定しません。

このページがしないこと

このビューアはテキストを読むだけです。EventSource 接続の開始、ヘッダーの送信、認証、リダイレクトの追跡、負荷時のサーバー動作の検証は行わず、キャプチャが完全かどうかも判定できません。JSON 判定は折りたたまれたデータの厳密な解析なので、「data: [DONE]」はテキストのまま、「data: null」はデコード済み JSON として数えます。

イベント表に表示されるのは各データの先頭 180 文字です。詳細パネルと NDJSON コピーには完全なデータが入ります。長いキャプチャはページ内で解析するため、巨大な貼り付けはサーバーの割り当てではなく端末のメモリに依存します。

最近使ったツール: