Real Time - Introducing HTML5 - page 273

}
}
// finally cache the response connection
connections.push(response);
/** When a regular web request is received */
connections.forEach(function (response) {
history[++eventId] = { agent:
¬ request.headers['user-agent'], time: +new Date };
response.write('data: ' + JSON.stringify
¬ (history[eventId]) + '\nid: ' + eventId + '\n\n');
});
My client-side code looks like this:
var es = new EventSource('/eventsource');
es.onmessage = function (event) {
var data = JSON.parse(event.data);
log.innerHTML += '<li><strong>' + data.agent +
¬ '</strong><br> connected at <em>' +
¬ (new Date(data.time)) + '</em></li>';
};
A very simple application, but behind the scenes all the hard
work happens thanks to real-time, push-based events from
the server.
Implementation support
Support isn't too bad for EventSource . Chrome, Safari, Firefox,
and Opera handle it just fine, while—at the time of writing, at
least—whether or not IE10 will support EventSource sadly remains
a mystery (but I still have every faith). However, because Event-
Source reverts to polling, it's very simple to replicate this API to
create a polyfill using JavaScript and Ajax (you can see a few
examples online here: https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-browser-Polyills under “EventSource”).
One thing I've noticed is that if you create a new EventSource
during or immediately after the page has loaded, some brows-
ers will keep their “loading throbber” running, making it look
like the page has more to load even when that's no longer the
case. I'm unclear if this is a bug in the implementations or if it's
a specially crafted feature to keep us developers on our toes,
but I've found that simply waiting for the document to finish