Note to self about Server-Sent Events

This morning I took a look over the Firefox 6 release notes. Before I go any further - wow - kudos to the Firefox devs for such a good, detailed, and informative set of release notes. I was really impressed. Anyway, while reading them I noticed they mentioned support for Server-Sent Events. This is one of the more interesting HTML5 specs as it allows for push notifications. In my simple testing though it seemed to fall back to simple polling, which is actually kind of cool. So for example, here is the HTML:

<html>

<head> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function() {

	var source = new EventSource('test2.cfm');
	source.onmessage = function (event) {
	  console.log(event.data);
	};

}); </script> </head>

<body>

</body> </html> </code>

Note - the jQuery here is completely unrelated. Note the EventSource object. Once create, you can listen to a few events (see the spec I linked to above), including an onmessage one. I built a simple CFM page to respond to the requests. According to the spec you have a few options on what you return, but the simplest is to just send data back. Data values must be prepended with data:. So to send back two lines of text, you would do:

data: Foo data: 9 data: beer

I began with this in ColdFusion:

data: <cfoutput>#randRange(1,100)#</cfoutput>

Which didn't work. Luckily, Chrome was very clear on why:

Maybe I'm jaded (ok, I am), but I don't expect the browsers to be this helpful. In fact, look at what Firefox will report:

Useless. Less then useless in fact as it may lead you to think ColdFusion is down. Any way, now that we know the content type is the issue, it is trivial to solve:

<cfcontent type="text/event-stream">data: <cfoutput>#randRange(1,100)#</cfoutput>

Any way, this is an interesting feature. If you follow me on Twitter you know I've been railing against HTML5 demos that aren't practical. (How many times has a client asked you to draw something that Canvas would help you with? How many times has a client asked for better form validation?) This one looks like it could be very interesting. Any of my readers using this in production yet?

Oh - and yeah - don't bother trying this in IE9.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments