SSE（Server-Sent Events）受信 — const es = new EventSource(url); es.onmessage = e => {}
SSE (Server-Sent Events) は「サーバーからブラウザへ一方向にリアルタイムでデータを流す仕組み」です。WebSocket と違って「サーバー → クライアント」専用ですが、HTTPベースでシンプルに使えるのが特徴です。チャットの通知、株価更新、ログのストリーミングなどに向いています。
基本のコード例
// サーバー側が text/event-stream を返すURL
const es = new EventSource("/events");
// 接続成功時
es.onopen = () => {
console.log("SSE接続開始");
};
// メッセージ受信時（サーバーから送られた data）
es.onmessage = (e) => {
console.log("受信:", e.data);
};
// エラー時
es.onerror = (err) => {
console.error("エラー:", err);
};
new EventSource(url): SSE接続を開始。サーバーはContent-Type: text/event-streamを返す必要あり。onmessage: サーバーから送られたdata:行を受け取る。onopen/onerror: 接続開始やエラーを検知できる。
サーバーからの送信フォーマット（イメージ）
サーバーはこんなテキストをストリームで返します：
data: こんにちは
data: これはSSEのメッセージです
data: {"price":123.45,"symbol":"AAPL"}
data:行が1つのメッセージ。- 空行で区切ると「1イベント」としてまとめて送られる。
よく使うテンプレート集
JSONデータを受け取る
es.onmessage = (e) => {
try {
const obj = JSON.parse(e.data);
console.log("株価:", obj.symbol, obj.price);
} catch {
console.log("テキスト:", e.data);
}
};
カスタムイベントを受け取る
サーバー側が event: news を送ると、addEventListener で受け取れる。
es.addEventListener("news", (e) => {
console.log("ニュース:", e.data);
});
接続を閉じる
es.close(); // 明示的に切断
例題: 通知リストをリアルタイム更新
<ul id="log"></ul>
<script>
const es = new EventSource("/notify");
const log = document.getElementById("log");
es.onmessage = (e) => {
const li = document.createElement("li");
li.textContent = "通知: " + e.data;
log.appendChild(li);
};
es.onerror = () => {
console.error("接続エラー。サーバーが停止しているかも。");
};
</script>
- 効果: サーバーから送られる通知を
<ul>に追加していく。
実務でのコツ
- HTTPベース: WebSocketより導入が簡単。サーバーは「レスポンスを閉じずに流し続ける」だけ。
- 自動再接続: SSEはブラウザが自動で再接続してくれる。切断しても復帰しやすい。
- 一方向通信: クライアントからサーバーへは通常のHTTPリクエストで送る。双方向が必要ならWebSocket。
- CORS対応: 他ドメインから受け取る場合はサーバー側でCORSヘッダを設定。
- イベント名:
event:を使うと複数種類のイベントを分けて送れる。
ありがちなハマりポイントと対策
- 何も受信できない:
- サーバーが
Content-Type: text/event-streamを返していない。 - レスポンスを閉じてしまっている。
- サーバーが
- JSONがパースできない:
- サーバー側で改行や余計な文字が混ざっている。
- クロスドメインで失敗:
- サーバー側に
Access-Control-Allow-Originを設定する。
- サーバー側に
練習問題（株価ストリーム）
<ul id="prices"></ul>
<script>
const es = new EventSource("/stocks");
const list = document.getElementById("prices");
es.onmessage = (e) => {
const data = JSON.parse(e.data); // {symbol:"AAPL", price:123.45}
const li = document.createElement("li");
li.textContent = `${data.symbol}: ${data.price}`;
list.appendChild(li);
};
</script>
- 効果: サーバーから流れてくる株価をリアルタイムにリスト表示。
直感的な指針
- EventSource = サーバーから流れてくる「通知の受信口」。
onmessageで受け取る、addEventListenerでイベント種類を分ける。- 一方向通信なので「受信専用」。送信は通常のHTTPで。
- WebSocketより簡単にリアルタイム更新を実現できる。