Server-sent events

  • Revision slug: Server-sent_events
  • Revision title: Server-sent events
  • Revision id: 72322
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 1 words added, 10 words removed

Revision Content

{{ draft() }}

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.

The underlying connection

When the browser connects to the server in order to begin receiving server-sent events, a new connection is opened, and the browser begins to listen for incoming data on that channel. When the server decides to send an event to the listening client, it sends data in the format covered in (SECTION), then closes the connection. This causes the event's listener function on the client to be executed; in addition, the browser opens a new connection to the server, ready to receive the next event.

Documentation

Using server-sent events
A tutorial guide to writing both server and client side part of a server-sent events app.
EventSource reference
A reference to the client-side EventSource API.

View All...

Tools


Related Topics

AJAXJavaScript, WebSockets

See also

Specification

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>{{ draft() }}</p>
<p>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing 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>
<h2>The underlying connection</h2>
<p>When the browser connects to the server in order to begin receiving server-sent events, a new connection is opened, and the browser begins to listen for incoming data on that channel. When the server decides to send an event to the listening client, it sends data in the format covered in (SECTION), then closes the connection. This causes the event's listener function on the client to be executed; in addition, the browser opens a new connection to the server, ready to receive the next event.</p>
<table class="topicpage-table"> <tbody> <tr> <td> <h4 name="Documentation">Documentation</h4> <dl> <dt><a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></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></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 <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> <li><a class=" external" 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>
</ul>
<h2>Specification</h2>
<ul> <li><a class=" external" href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Server-sent events</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