A Wall Powered by EventSource and Server-Sent Events

EventSourcelanded in Aurora 6. It is a new and simplified way to open long-lived connections to a server, and let the browser create events as the server streams messages to the client. It is also available in Chrome and Opera and there are fallback solutions for other browsers.

Creating a wall/feed for a social app…

The messages

The server will send two kinds of messages:
● simple messages, starting on a new line prefixed with “data:”
● messages with specific event names, similar to simple messages but with “event: <anEventName>” on the previous line

In this case, simple messages are treated as users’ statuses and specific events will be inserted in the timeline with specific colors, although they could appear in different places on the page. The message data will be sent as JSON, although it could be flat text strings.

The server

The server will be a dummy .php script that reads sample statuses from a text files and stream them, one at a time, to the client, using appropriate headers.

The Client

The client will create an event source and register event handlers for each specific event name, as well as an onmessage handler for simple messages.

Interesting questions: We do not have any documentation about that yet, but reading the spec should help you: http://www.w3.org/TR/eventsource/#eventsource
I’ve noticed that (at least in Firefox) the connection is closed if the user hits the Esc key in my demo.

:( I looked at the spec a couple of weeks ago and it’s nowhere near specific enough for interoperability. Was kinda hoping that Mozilla might be setting the standard… too many flaky/hostile mobile networks and laptop lids which close to assume the connection is robust.

Good article despite I wouldn’t have use a “Wall” example since it’s typically the kind of application that would benefits from being WebSocket (bi-directional) powered.
Instead I would have use an example where a radio website would be able to push the name of the current song to listeners.

Hey Sonny,
Let me disagree, on those kind of walls you typically receive way more data than you send, and the data that you send back don’t need to be treated in near-real-time.
With EventSource you can use a standard Web server to stream data to the client (WebSockets need a special setup on the server side), and use XHR to send data to the server from time to time.

I think this wall example would be more “complete” with a multi-client version, louisremi, can you confirm that we would need some kind of server database access to realize such an application ? Since the php file is not aware of the different clients, I think we need something like that (that could be a flat file on the server maybe).

Hi, thanks for posting on this interesting feature.
Is the approach shown above, i.e. the server, say sse.php, running an infinite loop and waking up every N seconds to check if there’s any event/message to send, the only one to use always?
The question comes from the idea of using events in an MVC application as follows: while the user is visiting a certain page of the site, say fun.php, an event needs to be sent. Would it be possible to send the message directly from fun.php rather than passing the data to build the message to sse.php (via queue, etc.)?

You can definitely send events from the script generating the page being visited.
For performance reason, you might want to host long-lasting connection on a different server hosting more appropriate technology, such as node.js for example.

Great to see “Server-Sent Events” moving forward into Firefox. What is cool about it compared to Web-Sockets is that it doesn’t invent another protocol and fits perfectly with HTTP and the REST architecture style.

It might not cover 100% of real-time use cases, but does what it does in a very standard, simple, yet powerful way. In the Restlet Framework, we are planning on adding its support, both server and client-side.

Thank you for this nice demo. Between I can’t get EventSource working on my machine. I’m always getting an error stating that Firefox cannot establish a connection with the server.

I made a little program that listens for connections then enters a simple loop
that sends events every 2 seconds. When i point my browser to it’s url, I can see the updates. But When using new EventSource(urlOfProgram), nothing.

Do I need to host both the page and program on the same address AND port?

I’m using OSX Lion 10.8.2, Firefox 16.0.2, Tomcat 7, Spring MVC app, with DWR as well. Server Sent Events appear to stop working in Firefox after awhile with a simple clock, sending with retry every 1000ms. I’ve written a WebServlet and also a Spring MVC controller app and firefox seems to stop receiving/responding to Server Sent Events in less than 20 minutes. Chrome does not have this problem and continues overnight. I suspect this is a bug in Firefox since side by side, Chrome keeps going… Firefox stops. I’m really interested in any suggestions anyone might have and am willing to send any code as demo if desired. Has anyone tried SSE in Firefox for any extended period?