The latest release intercooler includes beta support for Server Sent Events. Server Sent Events (SSEs) are an HTML5 feature that allow a server to send information to the browser via a push mechanism, rather than using traditional client-based polling (supported in intercooler via the
There are two major client-push technologies in HTML5: the popular Web Sockets API and the less popular Server Sent Events. Why is intercooler.js including support for the latter, a less popular technology?
In looking at both technologies, Server Sent Events dovetail more cleanly with the core intercooler.js REST-ful philosophy of encoding as much state as possible in the hyptertext itself: by responding only to data messages (i.e. new HTML content, to be merged into the dom) or named events triggered by the server, we keep the client side as stateless (outside of the hypertext) as possible. Additionally, Server Sent Events are text and use standard HTTP, again keeping with the intercooler.js philosophy of staying as close as possible to the original vision of the web.
The implementation of on the server side events is obviously platform dependent, but it is a very simple API at the network level. A server needs to support the Event Stream Format, a very simple format that allows for two types of data to be transmitted: Data Messages and Named Events.
An example java implementation of a simple SSE server is available here:
And a simple PHP implementation is available from the Mozilla site:
You can take advantage of SSEs in intercooler by using the new
ic-sse-src attribute, which points to a URL that satisfies the Event Stream format:
<div ic-sse-src="/my_sse_stream"> This element is bound to the /my_sse_stream Server Sent Event stream </div>
When the client receives an SSE Data Message, the content of that message will be swapped into the body of the element as HTML. If the server were to send the following message:
<div>New Contact Added!</div>
The result would be:
<div ic-sse-src="/my_sse_stream"> <div>New Contact Added!</div> </div>
If you wanted to make the new content appended to the divs existing, you could use the following intercooler:
<div ic-sse-src="/my_sse_stream" ic-swap-style="append"> This element is bound to the /my_sse_stream Server Sent Event stream </div>
in which case, if you received the event above, you would end up with:
<div ic-sse-src="/my_sse_stream" ic-swap-style="append"> This element is bound to the /my_sse_stream Server Sent Event stream <div>New Contact Added!</div> </div>
But what about Named Events? You can listen for named Server Sent Events by using the
sse: prefix in the
<div ic-sse-src="/my_sse_stream"> This element is bound to the /my_sse_stream Server Sent Event stream <span ic-get-from="/latest_info" ic-trigger-on="sse:info_updated"> No Info Yet! </span> </div>
In this case when the Server Sent Event stream emits an event named
info_updated, the inner span will issue a GET request to the
And that’s it! Pretty simple and a nice, declarative way to add push notifications to your intercooler.js-based web application.