Server-Sent Events

[krem]

So the past few weeks I've spent some time playing around with different techniques and reading up-coming standards. WebSockets looks promising. However, right now it's limited in support (Chrome is the only one to support it as of right now, but FireFox isn't far behind).

While doing all this reading, I started to put together a test server and playing around with a few different options. One that I'm working with and have had several good test runs is using a dual-channel method.

The way I have implemented this is by having one channel always streaming data back to client. I came across a draft on W3 for Server-Side events and loved how it laid things out. You can read the technical details here: http://www.w3.org/TR/eventsource/

What it basically comes down to is a stream of text content in which each block of data follows this format:

Code:

event: [event name]<new line>
id: [an event ID]<new line>
data: [the data in the event message]<new line>
<new line>

If the data: line is repeated multiple times, then all the data is appended together.

It also includes an additional header: Last-Event-ID. This HTTP header is sent to the server to indicate what the last event ID that the client received. This is useful when a connection is re-established, which is suppose to happen if the server closes the connection.

A nice clean format and might eventually become a standard. However, even if it doesn't, implementing it via JavaScript is very simple. First I need to create a channel that would allow for streaming. Since all my tests are done in FireFox, I chose the XMLHttpRequest object. In the future, I'll use XDomainRequest object because IE's implementation of the XHR is a bit quirky (i.e. onreadystatechange not firing right for readyState == 3).

So I have an EventSource.js file that determines whether to use XHR HTTP Streaming or XDomainRequest object. It them uses that to open a ge channel to the server and start the streaming. Works great if your server is setup properly. I have a custom MUD Server that deals with that (and all the cross-domain permissions). Also, the Server gracefully closes the connection to the client every minute and the client re-establishes the connection.

However, there are some issues if this ever is implemented in the browser. The W3 standard doesn't make mention of the ability to set the request headers in the request or the ability to get the response headers. This is going to be a problem because right now I set a response header called MUD-SessionID so that when a client connects/reestablishes a connection, I know who they are. There are ways around that (i.e. use a query string), but I really like the HTTP Header method as it hides this information from the client unless they really want to see it.

As always, feel free to comment.

[krem]

Some changes since I originally posted:

I changed the name from EventSource to EventStream. EventSource really didn't make much sense to me and I like Stream much better.

I made changes away from what the standards document provides. The reason for this is because the standards document doesn't allow for easy session management (as mentioned before) outside of me reviewing the HTTP Headers as well as any sort of hand-shake so I know when a stream is established. So what I ended up doing was adding a new field name called 'session'. The field name is the string before the : in the standard. So 'data', 'event', and 'id' are all field names. Now 'session' is in there.

On top of implementing that, I also added an 'onopen' event which gets called when a new session ID obtained. This helps let other objects know when a session is established so that they can include that session value with any following HTTP requests.[/align]