---
title: Server-sent events
slug: Web/API/Server-sent_events
tags:
  - API
  - SSE
  - Server-sent events
  - 概要
translation_of: Web/API/Server-sent_events
---
<p>{{DefaultAPISidebar("Server Sent Events")}}</p>

<p>伝統的には、ウェブページが新たなデータを受け取るために、サーバーにリクエストを送信しなければなりません。すなわち、ページがサーバーからデータを要求します。サーバー送信イベントによって、サーバーがウェブページにメッセージをプッシュ送信することにより、サーバーからウェブページへ新たなデータをいつでも送信することができます。入ってくるメッセージは、ウェブページ内の<em><a href="/ja/docs/DOM/event">イベント</a>およびデータ</em>として扱うことができます。</p>

<h2 id="概念と使用方法">概念と使用方法</h2>

<p>Server-Sent events の使い方を学ぶには、 <a href="/ja/docs/Web/API/Server-sent_events/Using_server-sent_events">Server-Sent events の利用</a>を参照してください。</p>

<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>

<dl>
 <dt>{{domxref("EventSource")}}</dt>
 <dd>サーバーへの接続、イベントやデータの受信、エラー、コネクションの切断など、すべての機能の扱いを定義します。</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<ul>
 <li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">PHP を使用した簡単な SSE のデモ</a></li>
</ul>

<h2 id="Specification" name="Specification">仕様策定状況</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <thead>
  <tr>
   <th>機能</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>EventSource の対応</td>
   <td>6</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("6.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5</td>
  </tr>
  <tr>
   <td>共有かつ専用ワーカーで使用可<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("53.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <thead>
  <tr>
   <th>機能</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>EventSource の対応</td>
   <td>4.4</td>
   <td>45</td>
   <td>{{CompatNo}}</td>
   <td>12</td>
   <td>4.1</td>
  </tr>
  <tr>
   <td>共有かつ専用ワーカーで使用可<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("53.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 但し<a href="https://github.com/w3c/ServiceWorker/issues/947">サービスワーカーはまだ</a>です。</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<h3 id="Tools" name="Tools">ツール</h3>

<ul>
 <li>Remy Sharp による <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource のポリフィル</a></li>
 <li>Yaffle による <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource のポリフィル</a></li>
 <li>Rick Waldron による <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery プラグイン</a></li>
 <li>intercooler.js <a href="http://intercoolerjs.org/docs.html#sse">declarative SSE support</a></li>
</ul>

<h3 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連トピック</h3>

<ul>
 <li><a href="/ja/docs/AJAX" title="AJAX">AJAX</a></li>
 <li><a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a></li>
 <li><a href="/ja/docs/WebSockets" title="WebSockets">WebSockets</a></li>
</ul>

<h3 id="Other_resources" name="Other_resources">その他のリソース</h3>

<ul>
 <li>Server-sent events を使用した <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter のようなアプリケーション</a>。<a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">コードは Github にあります</a>。</li>
 <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
 <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
</ul>