SSE と WebSocket：適切なストリームの選び方

SSE と WebSocket の比較

SSE と WebSocket：どちらのリアルタイム方式を使うか | We.Inc

Server-Sent Events と WebSocket を比較します。EventSource と WebSocket の並列比較、再接続、バイナリデータ、接続数の上限、判定ツール、そして両方の最小限の Node サーバーを紹介します。

Server-Sent Events は通常のHTTPレスポンスでサーバーからブラウザーへテキストをストリーミングし、EventSource API は自動で再接続します。WebSocket は接続をアップグレードして双方向のチャネルにし、テキストもバイナリも両方向に運べます。フィード、通知、進捗にはSSEを、ブラウザーから頻繁にメッセージを送り返す必要があるときはWebSocketを使いましょう。

並べて比較

自分の機能にどちらが必要かわからない場合は、下の判定ツールで当てはまる項目にチェックを入れてください。上の表と同じ規則を適用し、どのAPIが合うか、そしてその理由を示します。

よくある質問

SSEでブラウザーからサーバーにデータを送れますか？

ストリーム自体では送れません。イベントストリームはサーバーからクライアントへ一方向にしか流れないので、ブラウザーは通常の fetch リクエストでメッセージを送ります。チャットのような双方向の通信には、WebSocket のほうがすっきり合います。

EventSource の再接続を止めるには？

クライアントで close() を呼びます。サーバー側からは、HTML標準によると 204 No Content のレスポンスを返すと、クライアントに再接続をやめるよう伝えられます。

EventSource で Authorization ヘッダーを送れますか？

いいえ。コンストラクターが受け取るのはURLと、withCredentials だけを設定できるオプションオブジェクトです。独自のヘッダーが必要なら、Cookie、URLに含めた短期間のトークン、または fetch ベースの読み取り処理を使いましょう。

WebSocket がある今、SSEは時代遅れですか？

いいえ。text/event-stream 形式は、プロトコルを切り替えずに通常のHTTPサーバー、プロキシ、認証をそのまま通るので、一方向のフィードには今でも良い選択です。

サーバーのリソース消費が少ないのはどちらですか？

どちらもクライアントごとに長時間続く接続を1つ保つので、差は小さいです。それより重要なのは、ホスティング先が長時間のレスポンスやプロトコルのアップグレードをそもそも許可しているかどうかなので、まずリクエスト時間の上限を確認しましょう。

Server-Sent Events の仕組み

WebSocket の仕組み

簡単な目安

Server-Sent Events：最小限のコード

素の Node で書くSSEサーバー

ライブラリは不要です。レスポンスは開いたままで、1回の書き込みが1つのイベントになり、コメント行がアイドル状態のプロキシによる切断を防ぎます。

ブラウザーでの EventSource

addEventListener はストリームのイベント名を使います。再接続はあなたのコードなしで行われます。

WebSocket：最小限のコード

ws パッケージを使ったWebSocketサーバー

npm install ws でインストールします。受け取ったメッセージをすべて大文字にして、送信したクライアントに返します。

簡単な再接続付きの、ブラウザーでのWebSocket

EventSource と違い、自動で再接続されないので、close の後に少し待って新しいソケットを開きます。

ブラウザーから多くのメッセージを送り返す（1秒に数回以上）

データがバイナリである（音声のチャンクやゲーム状態のバッファーなど）

接続が切れた後、クライアントが取りこぼしたイベントに追いつく必要がある

通信が、通常のHTTPしか扱えないプロキシやホスティングを通る

Server-Sent Events が合っています。チェックした項目に双方向のチャネルが必要なものはなく、EventSource なら再接続と再開が無料で手に入ります。

WebSocket が合っています。ブラウザーからの頻繁なメッセージやバイナリデータが必要で、これはイベントストリームでは運べません。

あなたの機能に合うのはどちら？

あなたの機能に当てはまるものにチェック

推奨

Server-Sent Events

WebSocket

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る