0Pricing
Frontend Academy · レッスン

一方向ストリーミングのためのServer-Sent Events

EventSourceでサーバーから送信されるイベントのストリームを受信し、イベント種別とデータを解析して、ネットワーク中断時に自動再接続します。

「一方向ストリーミングのためのServer-Sent Events」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Server-Sent Eventsとは

SSEは、単一の長時間接続を通じてサーバーからブラウザへイベントをプッシュする、標準のHTTPベースのプロトコルです。一方向で、通信はサーバーからクライアントへのみ行われます。クライアントから送り返す必要がない場合は、WebSocketよりシンプルです。

EventSource API

ブラウザのEventSourceはURLに接続し、イベントをリッスンします。標準で組み込まれているため、ライブラリは必要ありません。

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

サーバーレスポンスの形式

サーバーはContent-Type: text/event-streamを指定したプレーンテキストのストリームを送信します。各メッセージはdata:で始まり、空行で終わります。

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

名前付きイベント

サーバーはevent:を使ってイベントに名前を付けられます。ブラウザはその名前でイベントを発生させます。

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

自動再接続

EventSourceは切断されると自動的に再接続します（通常は約3秒後）。サーバーはretry: 5000で待機時間を指定できます。

// Server:
retry: 5000\n
data: hello\n\n

イベントIDと再開

サーバーは各イベントとともにid:を送信します。再接続後、ブラウザは最後に受信したIDをLast-Event-IDヘッダーで送信します。サーバーはその位置から配信を再開できます。

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

JSONの解析

event.dataは常に文字列です。自分でJSONを解析してください。

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

接続の終了

停止するにはes.close()を呼び出します。ブラウザはタブを閉じたときにも接続を終了します。

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

ユースケース

ライブダッシュボード（メトリクス、監視）。通知（新着メール、アラート）。株価ティッカー。AIチャットの補完（各トークンが1つのイベント）。ライブスポーツスコア。長時間実行ジョブのステータス更新。

実例：AIストリーミング

OpenAI/Anthropicの補完結果はSSEとしてストリーミングされます。各トークンがdataイベントとして届くため、タイピングエフェクトのように段階的に表示できます。

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSEとWebSocketとポーリングの比較

SSE：HTTPベースで、サーバーからクライアントへの一方向通信、自動再接続に対応し、シンプルです。WebSocket：全二重通信で、メッセージあたりのオーバーヘッドは小さい一方、より複雑です。ポーリング：最もシンプルですが、遅延と負荷が最も大きくなります。一方向のストリーミングにはSSE、チャットのような双方向通信にはWSを選択してください。

ブラウザの制限とプロキシ

ブラウザはオリジンごとの同時SSE接続数を制限しています（約6接続）。一部の企業プロキシや古いロードバランサーはレスポンスをバッファリングするため、SSEが動作しなくなることがあります。対象環境でテストしてください。HTTPSを使用すると、ほとんどのプロキシによるバッファリングを回避できます。

SSEのCORS

EventSourceはCORSに従います。サーバーはAccess-Control-Allow-Originを送信する必要があります。認証情報を使用する場合は、EventSourceコンストラクターに{ withCredentials: true }を渡し、サーバーでAccess-Control-Allow-Credentials: trueを設定してください。

確認問題

Server-Sent EventsとWebSocketsの主な違いは何ですか？

まとめ：Server-Sent Events

EventSourceは、text/event-stream形式のイベントを含むHTTPストリームを開きます。サーバーは、オプションのevent:名とid:を付けたdata:メッセージを送信します。Last-Event-IDを使って自動再接続と配信の再開が行われます。一方向通信（サーバーからクライアント）です。ライブダッシュボード、AIストリーミング、通知に適しています。双方向通信が必要ない場合はWebSocketよりシンプルです。同時接続数の制限とプロキシによるバッファリングに注意してください。

よくある質問

「一方向ストリーミングのためのServer-Sent Events」レッスンは無料ですか？

はい。「一方向ストリーミングのためのServer-Sent Events」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「一方向ストリーミングのためのServer-Sent Events」で何を学びますか？

EventSourceでサーバーから送信されるイベントのストリームを受信し、イベント種別とデータを解析して、ネットワーク中断時に自動再接続します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「一方向ストリーミングのためのServer-Sent Events」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. WebSocket API：open・message・close・error
  2. Socket.ioクライアントの統合
  3. 一方向ストリーミングのためのServer-Sent Events
  4. リアルタイムUIのパターン
← Frontend Academyに戻る