Server-sent events

  • Revision slug: Server-sent_events
  • Revision title: Server-sent events
  • Revision id: 72320
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 137 words added, 16 words removed; page display name reset to default

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.

Specification

 

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>{{ 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>
<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>
<p> </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> <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>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