Using server-sent events

  • Revision slug: Server-sent_events/Using_server-sent_events
  • Revision title: Using server-sent events
  • Revision id: 11091
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment initial info; more coming tomorrow; page created, 241 words added

Revision Content

{{ draft() }}

Developing a web application that uses server-sent events is quite easy. You'll need a bit of code on the server to stream the events to the web application, but the web application side of things works nearly identically to handling any other type of events.

Receiving events from the server

The server-sent event API is contained in the EventSource interface; to open a connection to the server to begin receiving events from it, you create a new EventSource object, specifying the URI of a script that generates the events. For example:

var evtSource = new EventSource("ssedemo.php");

Once you've instantiated your event source, you can begin listening for messages:

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");
  
  newElement.innerHTML = "message: " + e.data;
  eventList.appendChild(newElement);
}

This code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's HTML.

You can also listen for events, using addEventListener():

evtSource.addEventListener("ping", function(e) {
  var newElement = document.createElement("li");
  
  var obj = JSON.parse(e.data);
  newElement.innerHTML = "ping at " + obj.time;
  eventList.appendChild(newElement);
}, false);

This code is similar, except that it will be called automatically whenever the server sends an message with the event field set to "ping"; it then parses the JSON in the data field and outputs that information.

Sending events from the server

Revision Source

<p>{{ draft() }}</p>
<p>Developing a web application that uses server-sent events is quite easy. You'll need a bit of code on the server to stream the events to the web application, but the web application side of things works nearly identically to handling any other type of events.</p>
<h2>Receiving events from the server</h2>
<p>The server-sent event API is contained in the <a href="/en/Server-sent_events/EventSource" title="en/Server-sent events/EventSource"><code>EventSource</code></a> interface; to open a connection to the server to begin receiving events from it, you create a new <a href="/en/Server-sent_events/EventSource" title="en/Server-sent events/EventSource"><code>EventSource</code></a> object, specifying the URI of a script that generates the events. For example:</p>
<pre>var evtSource = new EventSource("ssedemo.php");
</pre>
<p>Once you've instantiated your event source, you can begin listening for messages:</p>
<pre class="brush: js">evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");
  
  newElement.innerHTML = "message: " + e.data;
  eventList.appendChild(newElement);
}
</pre>
<p>This code listens for incoming messages (that is, notices from the server that do not have an <code>event</code> field on them) and appends the message text to a list in the document's HTML.</p>
<p>You can also listen for events, using <code>addEventListener()</code>:</p>
<pre class="brush: js">evtSource.addEventListener("ping", function(e) {
  var newElement = document.createElement("li");
  
  var obj = JSON.parse(e.data);
  newElement.innerHTML = "ping at " + obj.time;
  eventList.appendChild(newElement);
}, false);
</pre>
<p>This code is similar, except that it will be called automatically whenever the server sends an message with the <code>event</code> field set to "ping"; it then parses the JSON in the <code>data</code> field and outputs that information.</p>
<h2>Sending events from the server</h2>
Revert to this revision