Server-Sent Events refers to a new-ish spec which allows a server to push data to the web browser, requiring only a few lines of native JavaScript on the client-side. This new interface drastically simplifies web applications which rely on periodic updates from a server-side application. For example, Mozilla provided this example of a “wall” built using Server-Sent Events. I wrote some sample code of my own to see just how hard it is to implement Server-Sent Events, and the answer is, it’s not.

The Server-Side

The Server-Sent Events spec is really just a new way of solving an old problem. For quite some time, developers have been building client-side applications that periodically refresh themselves with up-to-date information, the obvious example being sites like Facebook and Twitter. Historically, these applications have relied on long polling, where the JavaScript setTimeout method is used to repeatedly make AJAX requests to retrieve fresh data. The biggest change with Server-Sent Events is that the server is given control over this process, using a push rather than a pull. The client makes an HTTP request, and from there the server sends responses at intervals it defines. The benefit of this approach is that the client only makes a single HTTP request which stays open, rather than an ongoing series of requests which come with excess overhead.

As an example, I modified the photo API that I created for my earlier post on CORS to support Server-Sent Events. Here’s a look at the modified response from that API:

retry: 8000
data: { "kjonaas": {
   "photo": {
      "large": "http://iamnoahcooper.com/kjonaas-elton-cooper/images/motorcycle.jpg",
      "small": "http://iamnoahcooper.com/kjonaas-elton-cooper/thumbs/motorcycle.jpg",
      "caption": "Riding his motorcycle at Auditorium Shores.",
      "date": "02/27/2010"
   }
}}

The first line defines the interval for pushing data to the client in milliseconds. The second is the data to be sent in the message, in this case formatted as json. While my example doesn’t, the response can also include an event, which as its name implies, allows the server to notify the client when an event occurs. An example would be a login or logout event.

The Client-Side

With the API above complete, I only needed to write a tiny bit of HTML and JavaScript to display a random photo of my son every 8 seconds. If you view source on http://iamnoahcooper.com/kj_sse.html, you’ll see the following JavaScript:

if(window.EventSource) {
   var source = new EventSource('http://iamnoahcooper.com/kjonaas-elton-cooper/' + 
   'random.php?format=json_sse&ts=' + new Date().getTime());
   source.addEventListener('message', function(e){
      var photo = JSON.parse(e.data).kjonaas.photo;
      document.getElementById('kjonaas').innerHTML = '<img src="' + 
      photo.large + 
      '" alt="" /><br />' + 
      photo.caption;
   }, false);
}

The crux of Server-Sent Events on the client-side is the EventSource constructor. As you can see, I simply bound an event listener to the message event that parses the data seen in the response above. Again, after the initial HTTP request is made by the client, it will stay open, and each time the server sends a new message, this function will be fired once more. Pretty cool!

Problems

While modern browsers such as Firefox, Chrome, Safari, and Opera support Server-Sent Events (and in many cases have for some time now), it’s worth noting that there are two kind of important browsers that don’t: Internet Explorer and Android. That shouldn’t be used as a reason not to implement Server-Sent Events, however! For these browsers, developers can just continue to use long polling.

What’s more disappointing to me is that it appears that currently Firefox is the only browser that supports Server-Sent Events via CORS, as I can think of plenty of interesting cross-domain applications of Server-Sent Events.

Another slightly annoying issue that’s going to have to be addressed by browser vendors as Server-Sent Events are more widely adopted is that one cannot directly view message data, because the client doesn’t seem to know how to render the text/event-stream Content-Type. This made troubleshooting issues I encountered with my API difficult, as neither Firebug nor the Chrome Net panel are capable of displaying the response.

So what is this “CORS” thing anyway?

At a super high level, CORS changes one of the fundamental (and annoying) rules of the web, the same origin policy, allowing domaina.com to share information with domainb.com. The same origin policy was put in place to prevent would-be hackers from reading personal information about you from the websites you frequent. Were it not for the same origin policy, I could easily embed some code on the page you’re viewing right now to steal your deets from, say, Amazon.com. While it’s obviously a really good thing that I can’t do that, this long-standing rule-with-no-exceptions is unbelievably frustrating for those of us who build web applications. It’s 2012; a lot has changed since the same origin policy was introduced in Netscape 2.0. There are plenty of completely legit reasons to need to share information across multiple domains. Thankfully, CORS now allows for doing exactly that. To use my previous example, if Amazon.com wants me to be able to read some (not-so-personal) information from its website, all it has to do is simply return a response header, Access-Control-Allow-Origin, indicating that my domain is allowed in.

Try it out!

To give a real life, working example, this simple little bit of HTML and JavaScript will retrieve and display a random image of my son, Kjonaas, when placed on any domain.

<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="kjonaas"></div>
<script type="text/javascript">
var xhr=new XMLHttpRequest();
var requestURI='http://iamnoahcooper.com/kjonaas-elton-cooper/random.php';
var ts=new Date().getTime();
var showPhoto=function(xml){
	var photo=xml.getElementsByTagName('photo')[0];
	document.getElementById('kjonaas').innerHTML='<img src="'+
	photo.getElementsByTagName('large')[0].firstChild.nodeValue+
	'" alt="" /><br />'+
	photo.getElementsByTagName('caption')[0].firstChild.nodeValue;
};
if('withCredentials' in xhr){
	xhr.open('get',
	requestURI+'?ts='+ts,
	true);
	xhr.onload=function(){
		showPhoto(this.responseXML.getElementsByTagName('kjonaas')[0]);
	};
	xhr.send();
}
else if(typeof XDomainRequest!='undefined'){
	xhr=new XDomainRequest();
	xhr.open('get',
	requestURI+'?ts='+ts);
	xhr.onload=function(){
		var xml=new ActiveXObject('Microsoft.XMLDOM');
		xml.async=false;
		xml.loadXML(this.responseText);
		showPhoto(xml.getElementsByTagName('kjonaas')[0]);
	};
	xhr.send();
}
</script>
</body>
</html>

If you examine the HTTP request to that little Kjonaas API I created, you’ll see the following header included in the response:

Access-Control-Allow-Origin: *

This is CORS in its most basic form — because I don’t need to worry about who can access the information this API returns, I’ve indicated that any domain that wants to is allowed to retrieve the XML. If I did want to restrict access to the API to, say, my wife’s website, I’d just need to return a more explicit header:

Access-Control-Allow-Origin: http://www.sarahpcooper.com

If it’s not clear to you yet, I’m in love with CORS.

I mean seriously enthralled. For years, like so many other web developers who pay their rent by writing AJAX, I’ve been hacking together solutions to do this exact thing, with various and sundry libraries, hidden iframes, and in moments of true desperation, Flash. The beauty of CORS is that, as seen above, it requires only a few lines of native JavaScript. What’s more, CORS is supported by almost every modern browser — Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome have all embraced it, and it works just as well on a phone or tablet as it does on a desktop. The one notable exception is Opera, though they’ve recently announced that support for CORS will be included in Opera 12.

But it’s not all rainbows and unicorns, not yet at least.

If you actually read my JavaScript above, you’ll note that I have an obnoxious but necessary if statement. As is so often the case, Microsoft decided to go with its own implementation of CORS rather than the standard adopted by its peers. To take advantage of CORS in IE, web developers must use the proprietary XDomainRequest object. Fortunately, IE10 preview indicates that Microsoft may have seen the error of its ways, and will support the standard XMLHttpRequest going forward.

The biggest catch, though, is IE’s Same Scheme policy, which isn’t terribly well documented, so you might not know it exists until you run into it like I did. Same Scheme says that even with the advent of CORS, domaina.com can only share information with domainb.com if both use the same protocol. If you place my code above on a page served over HTTPS, and attempt to view that page in IE8 or IE9, you’ll get a JavaScript error. As a web developer for a company whose APIs are generally only accessibly over HTTPS for security reasons, this makes me want to rip every last one of my hairs out of my skull. Hopefully in adding support for XMLHttpRequest, Microsoft will also ditch Same Scheme. It’s hard to tell if that is the case or not, given that IE10 preview is only available for Windows 8.

Microsoft issues aside, start using CORS!

If you’re a developer, I strongly encourage you to evangelize for CORS at your company every opportunity you get. It’s surprisingly simple to implement, especially given how long its taken the Internet to come around to the idea that cross-domain resource sharing is ubiquitous, and not just for people with .ro email addresses hawking cheap Viagra.

1) Premarin

If you’re not a middle-aged woman, you probably have no fucking clue what a “Premarin” is. Premarin is a drug used to treat the symptoms of menopause. As if menopause wasn’t already gross enough, Premarin is made by strapping rubber bags to forcibly impregnated horses and collecting their urine. I swear to God I’m not making this shit up — the name Premarin is in fact an acronym for PREgnant MARes’ urINe. To produce this hot flash piss cocktail, Pfizer keeps horses pregnant for about 12 years straight in stalls so tiny they can’t even turn around, and deprives them of water in order to squeeze more estrogen out of them.
 

2) Circuses

Those assholes at Ringling must hate that PETA owns the domain name Circuses.com, almost as much as Tyson and Smithfield must hate that it owns Meat.org. For decades now, PETA’s activists have been following Ringling’s caravan of freaks and child molesters everywhere they go, documenting how poorly animals in their care are treated. In just 19 years, at least 29 elephants have died because of Ringling’s fuckedupedness, four of which were babies, one of which was an 8-month-old. 29 dead elephants in 19 years. If they were all buried on top of each other, the grave would have to be as deep as a football field.
 

3) POM

Fortunately PETA won it’s campaign against POM Wonderful pretty quickly, because honestly, it was confusing as all hell. It was a really difficult campaign to explain to someone at a demonstration, largely because of the fact that what POM was doing to animals is too psychotic to believe. Basically, in order to make some pretty outlandish health claims about its bourgie juice, POM was inducing erectile dysfunction in rabbits. It’s baffling, but true. POM’s goal in conducting these Dr. Jekyll-esque experiments was to be able to tell consumers that drinking their juice will make your old man weiner stay hard. The fun part of PETA’s ultimately victorious campaign to stop these experiments was that Naked Juice, one of POM’s primary competitors, had a “no animal experiments” policy. And their company is fucking called Naked Juice. I mean, if there was ever a perfect fit for a partnership with PETA, it’s a company with the word naked in their name. I really think the straw that broke the camel’s back was that POM realized naked supermodels like Pamela Anderson make old man weiners harder than any fruity drink ever could. AND HOLY SHIT, I JUST REALIZED THAT PAMELA ANDERSON WAS A PLAYBOY BUNNY AND THE CAMPAIGN WAS ABOUT BUNNIES. In retrospect, I don’t know how this campaign lasted longer than an afternoon …
 

4) NASA

Then NASA came along and took crazy animal experiments to a whole new, scary level. Before PETA came along and stopped them, NASA planned to spend a few million dollars to see what would happen to monkeys if they bombarded them with high levels of radiation in a sketchy laboratory in Long Island, destroying their brains in the process. I mean, I’m not really a scientist per se, but I’m pretty certain that we already have a pretty good idea what the effects of prolonged exposure to radiation are. Like death for example. Oh, and in these experiments, which thankfully never went forward, NASA was going to be radiating squirrel monkeys, which if you don’t already know are just the cutest things since the slow loris. Seriously, Google it. Anyone who would hurt one of those adorable fuckers deserves to be put on a space shuttle aimed straight at the ground.
 

This is amazing for two reasons:

1) Dudebro got away with saying fuck like 50 times on a website that’s usually a bunch of stuffy financial news.
2) Of all of the possible websites to have cited as examples, he chose two built by me.

Forbes joins countless other highly-reputable news sites who have name-dropped whatthefuckisasloth, including BuzzFeed, The L Magazine and yes, even GQ.

Now if only I could convince the even stuffier folks that monitor Wikipedia to stop reverting my edits.

It all started when I told my wife, Sarah, that she was a sloth (for no particular reason that I can remember), and we both realized that we had no idea what the fuck a sloth was. So, I figured I’d help other people who were in a similar situation, and thus whatthefuckisasloth.com was born.

The same issue occurs in Opera, as well as Flock and other Mozilla browsers.

And obviously, since swfobject is a JavaScript file, if JavaScript is disabled in the browser the only option for showing the video is a plain ol’ Flash object inside noscript tags, and in that case the security warning is displayed for all browsers.

The workaround I came up with is to upload a SWF to the secure site that acts as a proxy and loads the YouTube video (since Flash has its own security model, it doesn’t matter that the video is not served via HTTPS).

Here is an example from peta2′s “Whose Skin Are You In?” Web site:

I’ve posted the SWF I created to Google Code at http://code.google.com/p/ytplayer.

Here’s the ActionScript that makes it all work:

Stage.align="TL";
Stage.scaleMode="noscale";
System.security.allowDomain("http://www.youtube.com");
System.security.loadPolicyFile("http://www.youtube.com/crossdomain.xml");

//create a MovieClip to load the player into
ytplayer=createEmptyMovieClip("ytplayer",1);

//create a listener object for the MovieClipLoader to use
ytPlayerLoaderListener={};
var loadInterval:Number;

//When the player clip first loads, we start an interval to check for when the player is ready
ytPlayerLoaderListener.onLoadInit=function(){
   loadInterval=setInterval(checkPlayerLoaded,250);
}
function checkPlayerLoaded():Void{
   //once the player is ready, we can subscribe to events
   if(ytplayer.isPlayerLoaded()){
      ytplayer.setSize(Stage.width,Stage.height);
      clearInterval(loadInterval);
   }
}

//create a MovieClipLoader to handle the loading of the player
ytPlayerLoader=new MovieClipLoader();
ytPlayerLoader.addListener(ytPlayerLoaderListener);

//load the player
ytPlayerLoader.loadClip("http://www.youtube.com/v/"+vidId+"&hl=en&fs=1",ytplayer);

//adjust size when user clicks full-screen
var listener:Object=new Object();
Stage.addListener(listener);
listener.onFullScreen=respondFunction;
function respondFunction(){
   ytplayer.setSize(Stage.width,Stage.height);
}

I call it TwitStream.

1) An Ivy league baseball player

2) An executive news director from Spokane

3) A character played by that guy from Punk’d

4) A major in some space army

5) Someone who takes pictures with fat chicks then tries to hide the evidence

6) The creator of a video blog about contemporary psychological overanalyzation and overmedication

7) A lawyer who wants the world to shut down on Sundays

It turns out that the fella who wrote Ender’s Game—one of my favorite books in my early teen years—is quite a bigot. Like, a really really crazy bigot.

Here’s what OSC thinks about legalizing marriage for all Americans:

“Regardless of law, marriage has only one definition, and any government that attempts to change it is my mortal enemy. I will act to destroy that government and bring it down, so it can be replaced with a government that will respect and support marriage, and help me raise my children in a society where they will expect to marry in their turn. Only when the marriage of heterosexuals has the support of the whole society can we have our best hope of raising each new generation to aspire to continue our civilization…

In the first place, no law in any state in the United States now or ever has forbidden homosexuals to marry. Any homosexual man who can persuade a woman to take him as her husband can avail himself of all the rights of husbandhood under the law. Ditto with lesbian women. To get those civil rights, all homosexuals have to do is find someone of the opposite sex willing to join them in marriage.

However emotionally bonded a pair of homosexual lovers may feel themselves to be, what they are doing is not marriage. they are not turning their relationship into what my wife and I have created, because no court has the power to change what their relationship actually is. They steal from me what I treasure most, and gain for themselves nothing at all. They won’t be married. They’ll just be playing dress-up in their parents’ clothes.

Homosexual ‘marriage’ won’t accomplish what they hope. They will still be just as far outside the reproductive cycle of life. And they will have inflicted real damage on those of us who are inside it. they will make it harder for us to raise children with any confidence that they, in turn, will take their place in the reproductive cycle.”

Insane much?

So, join me in stickin’ it to Mr. Card. Go to http://www.hrcactioncenter.org/site/Donation2?df_id=10742 to make as generous a donation as you can afford and show your support for equal rights regardless of gender or sexual orientation. After you’re done, be sure to let ol’ Orson know you donated on his behalf:

Orson Scott Card
P.O. Box 18184
Greensboro, NC 27419