【IT用語解説】Server-Sent Events（SSE）とは？WebSocketとの違いを初心者向けに解説

Server-Sent Events（SSE）とは、サーバーからブラウザへ、更新情報を一方向に流し続けるためのWeb標準の仕組みです。

チャットのように双方が頻繁に送信するならWebSocketが候補になります。一方で、ニュース、通知、処理状況、ログのように「サーバー側で起きた変化を画面へ届けたい」だけなら、SSEの方がシンプルに書けることがあります。

この記事では、SSEの意味、EventSourceの使い方、WebSocketやポーリングとの違い、再接続、運用上の注意点を初心者向けに整理します。

まず結論：SSEはサーバーからブラウザへの一方向通知

SSEの中心は、サーバーからクライアントへイベントを送ることです。クライアントとは、ここでは主にブラウザを指します。

ブラウザは最初にSSE用のURLへ接続します。その後、サーバーは接続を閉じずに、新しい通知があるたびにデータを少しずつ送ります。ブラウザ側では、そのデータをイベントとして受け取って画面へ反映します。

次の図では、SSEを「サーバーからブラウザへ流れる通知レーン」として見てください。WebSocketのような双方向の会話ではなく、サーバー発の更新を受け取る流れです。

SSEが必要になる場面

SSEが役立つのは、ユーザーが何度も更新ボタンを押さなくても、サーバー側の新しい情報を画面へ届けたい場面です。

• 処理の進捗を画面に表示したい
• 管理画面に新着通知を出したい
• サーバーログや監視結果を流したい
• ニュースフィードやタイムラインを更新したい
• 在庫、注文、ジョブ状態などの変化を反映したい

反対に、ユーザーがメッセージを頻繁に送り、相手からも返ってくるような双方向のやり取りでは、WebSocketの方が自然なことがあります。

REST API・ポーリング・WebSocketとの違い

SSEを理解するときに一番つまずきやすいのは、似た通信方式との違いです。ここでは、REST API、ポーリング、SSE、WebSocketを「何をしたいか」で分けます。

次の図では、実装名ではなく、読者が実現したい動きから選ぶように見てください。サーバーから一方的に知らせたいならSSE、双方が送るならWebSocketが候補です。

方式	通信の見方	向いている場面
REST API	必要なときに問い合わせる	検索、登録、詳細取得、通常の更新
ポーリング	一定間隔で聞きに行く	簡単な定期更新、精度がそこまで重要でない通知
SSE	サーバーから一方向に流す	通知、進捗、ログ、ニュースフィード
WebSocket	双方から送る	チャット、共同編集、ゲーム、双方向操作

参考　REST APIとは何か？ / HTTPとは？HTTPSとは？

EventSourceで受け取る最小コード

ブラウザ側では、EventSourceを使ってSSEの接続を開きます。MDNでも、SSEを扱うAPIはEventSourceインターフェースに含まれると説明されています。

const source = new EventSource("/events");

source.onopen = () => {
  console.log("SSEに接続しました");
};

source.onmessage = (event) => {
  console.log("受信:", event.data);
};

source.onerror = () => {
  console.log("接続エラーまたは再接続中です");
};

// 画面を閉じる、購読をやめるなどのタイミングで呼ぶ
// source.close();

このコードでは、new EventSource("/events")でサーバーのイベント配信URLへ接続します。onmessageは、サーバーから通常のメッセージが届いたときに実行されます。

ただし、このコードだけをブラウザに貼っても動きません。サーバー側がSSE用のレスポンスを返す必要があります。SSEは、ブラウザ側のEventSourceと、サーバー側のtext/event-stream形式のレスポンスがセットです。

次の図では、コードの左側とサーバーから流れてくる文字列の右側を対応させて見てください。EventSourceは受け口、text/event-streamは流れてくる形式です。

サーバーが返すtext/event-streamの形

SSEでは、サーバーがContent-Type: text/event-streamのレスポンスを返します。MDNの例でも、サーバー側はtext/event-streamで応答し、各通知をテキストのブロックとして送ると説明されています。

event: progress
data: {"percent": 80}
id: 42

この例では、eventがイベント名、dataが実際に渡したいデータ、idがイベントの識別子です。最後の空行で、1件のイベントが終わります。

イベント名を付けない場合は、ブラウザ側では通常のmessageイベントとして受け取れます。イベント名を付けた場合は、addEventListener("progress", ...)のように名前で分けて処理できます。

再接続とLast-Event-IDの考え方

ただし、自動再接続があるから何も考えなくてよい、という意味ではありません。途中で切れた場合に、同じ通知を二重に処理しないか、逆に通知が抜けないかを考える必要があります。

次の図では、idを手がかりに、どこまで読んだかを復旧するイメージを見てください。実務では、イベントIDや状態管理を使って、再接続後の抜けや重複を減らします。

SSEを使うときの注意点

SSEはWebSocketよりシンプルに見えますが、運用では長く開いたHTTP接続として扱う必要があります。特に、接続数、中継サーバー、切断復旧は先に見ておきたいポイントです。

次の図では、実装後に詰まりやすい場所を3つに分けています。SSEは一方向の通信としては分かりやすい一方で、開いた接続を維持するための設計が必要です。

• HTTP/1.1では同一ブラウザ・同一ドメインの接続数制限に注意する
• HTTP/2を使える環境では、同時ストリーム数の扱いも確認する
• プロキシやロードバランサーがレスポンスをバッファしないか確認する
• 切断時に再接続できるだけでなく、抜けや重複も考える
• 長時間接続を前提に、認証切れや権限変更時の扱いを決める

MDNでは、HTTP/2ではない場合、SSEのオープン接続数に制限があり、複数タブで痛みやすい点も注意されています。小さなデモでは問題にならなくても、実務ではユーザー数、タブ数、接続先ドメインを含めて考えましょう。

SSEを選ぶ判断基準

SSEを選ぶかどうかは、通信の派手さではなく、必要な方向で決めます。サーバーからブラウザへ知らせるだけならSSEは有力です。ブラウザからも細かく送るならWebSocket、単発の取得や登録ならREST APIが自然です。

確認すること	SSEが向きやすい条件
通信方向	サーバーからブラウザへ送れればよい
更新頻度	変化が起きたときにだけ届けたい
実装規模	WebSocketほど複雑にしたくない
復旧	切断後の再接続を前提にしたい
注意点	接続数、バッファリング、認証を運用で見られる

初心者の段階では、SSEを「WebSocketの簡易版」と覚えるより、「サーバーから一方向に流す標準機能」と覚える方が正確です。役割が違うため、どちらが上位という関係ではありません。

既存記事とあわせて読む順番

SSEを理解するには、HTTP、クライアントサーバー、API、REST APIの順で土台を確認すると読みやすくなります。

• クライアントサーバシステムとは？
• HTTPとは？HTTPSとは？
• APIとは？APIとWeb APIの違い
• REST APIとは何か？
• ゼロから学ぶネットワーク入門

公式情報と関連リンク

仕様やAPIを確認する場合は、WHATWG HTML StandardのServer-sent events、MDNのServer-sent events、EventSourceのページを参照します。

• WHATWG HTML Standard: Server-sent events
• MDN Server-sent events
• MDN Using server-sent events
• MDN EventSource

まとめ

Server-Sent Events（SSE）は、サーバーからブラウザへ更新情報を一方向に流すためのWeb標準の仕組みです。

• SSEはサーバーからブラウザへの一方向通知に向いている
• ブラウザ側ではEventSourceを使って受け取る
• サーバー側はtext/event-stream形式でイベントを流す
• WebSocketは双方向、SSEは一方向と分けて考える
• 実務では接続数、再接続、バッファリング、認証を確認する

SSEを理解すると、リアルタイム更新をすべてWebSocketで考えずに済みます。サーバーから知らせるだけでよい場面では、SSEという選択肢を持っておくと設計がシンプルになります。