mozilla

Revision 72319 of Server-sent events

  • Revision slug: Server-sent_events
  • Revision title: Server-sent events
  • Revision id: 72319
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment 25 words added, 16 words removed; page display name changed to 'Server-sent events'

Revision Content

Traditionally, a Web page has to send a request to the server to receive new data (the page pulls data from the server). With Server-sent events, it is possible for a server to send new data to a Web page at will (the server can push messages to the Web page). These incoming messages can be treated as Events + data inside the Web page.

Documentation

Writing server-sent events applications (coming soon)
A tutorial guide to writing both server and client side part of a server-sent events app.
EventSource reference (coming soon)
A reference to the client-side EventSource API.

View All...

Tools


Related Topics

AJAXJavaScript, WebSockets

See also

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
EventSource support {{ 9 }} {{ CompatGeckoDesktop("6.0") }} {{ CompatUnknown() }} {{ 11 }} {{ 5 }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
EventSource support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Revision Source

<p>Traditionally, a Web page has to send a request to the server to receive new data (the page pulls data from the server). With Server-sent events, it is possible for a server to send new data to a Web page at will (the server can push messages to the Web page). These incoming messages can be treated as <em><a href="/en/DOM/event" title="en/DOM/Event">Events</a> + data</em> inside the Web page.</p>
<table class="topicpage-table"> <tbody> <tr> <td> <h4 name="Documentation">Documentation</h4> <dl> <dt><a href="/en/Server_Sent_Events/Writing_Server_Sent_Events_Applications" title="en/Server Sent Events/Writing Server Sent Events Applications">Writing server-sent events applications</a> (coming soon)</dt> <dd>A tutorial guide to writing both server and client side part of a server-sent events app.</dd> <dt><a href="/en/Server_Sent_Events/EventSource" title="en/Server Sent Events/EventSource">EventSource reference </a>(coming soon)</dt> <dd>A reference to the client-side EventSource API.</dd> </dl> <p><span class="alllinks"><a href="/Special:Tags?tag=Server_Sent_Events&amp;language=en" title="Special:Tags?tag=Server Sent Events&amp;language=en">View All...</a></span></p> </td> <td> <h4 name="Tools">Tools</h4> <ul> <li>Remy Sharp’s <a class=" link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li> <li>Yaffle’s <a class=" link-https" href="https://github.com/Yaffle/polyfills">EventSource polyfill</a></li> <li>Rick Waldron’s <a class=" link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li> </ul> <p><span class="alllinks"><br> </span></p> <h4 name="Related_Topics">Related Topics</h4> <dl> <dd><a href="/en/AJAX" title="en/AJAX">AJAX</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/WebSockets" title="en/WebSockets">WebSockets</a></dd> </dl> </td> </tr> </tbody>
</table>
<h2>See also</h2>
<ul> <li><a class=" external" href="http://www.w3.org/TR/eventsource/#the-eventsource-interface" title="http://www.w3.org/TR/eventsource/#the-eventsource-interface">EventSource API Specification</a></li> <li>A <a class=" external" 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 like application</a> powered by server-sent events and <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">its code on Github</a>.</li>
</ul>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>EventSource support</td> <td>{{ 9 }}</td> <td>{{ CompatGeckoDesktop("6.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ 11 }}</td> <td>{{ 5 }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>EventSource support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
Revert to this revision