EventSource: The Glorified Long Polling Machine

event-source.html

Open your console.
<script src="event-source.js"></script>

event-source.js

document.addEventListener("DOMContentLoaded", function() {

  /*

  EventSource is nothing more then a glorified
  long polling machine. It will create HTTP requests 
  to a provided url of the same origin 
  (which in turn creates an `open` event ) until
  it sees a valid "text/event-stream" response body
  at which point a `message` event will be fired.

  This process will repeat until the EventSource is
  terminated my calling its close() method. 

  no "data: " message from the server should result in long polling
  `open` events being fired, followed by zero `message` events

  */

  var // declare localized references
  eventSrc  = new EventSource( "event-source.php" ), 
  handler = function( event ) {

    console.log( [ event.type, new Date(), event, event.data ] );

  },
  getReadyState = function( src ) {

    if ( src.readyState ) {
      // readyState is almost always 0, we're only interested in 
      // seeing readyState OPEN (1) ( or CLOSED (2) )
      console.log( [ src.readyState, new Date() ] );
    }

    setTimeout(function() {
      getReadyState( src );
    }, 1);
  };

  console.log( eventSrc );

  // Setup event handlers
  [ "open", "message" ].forEach( function( name ) {

    eventSrc.addEventListener( name, handler, false );

  });

  // Begin sampling the ready state
  getReadyState( eventSrc );

}, false);

event-source.php

<?php
header("Content-Type: text/event-stream\n\n");

/*
  To test the long polling thery, this response "stream" 
  has no response body.

  From the client, EventSource will make an HTTP request 
  for the url provided to the requesting instance. If no data body 
  exists in the response, then no `message` event is fired.
 
  The client will continue to poll by creating new HTTP requests 
  (that create `open` events on the client) until a valid
  response body ("data: [string]") is present.

  Open event-source.html in your browser, then open your console.
  you will see logged `open` events. Return to this
  file and uncomment the following line: 
*/

//echo "data: foo" . "\n\n";

/*
  This will result in new `message` events being logged to the console.

  Notice that the `message` event is actually preceded by an `open`
  event, which (if you look in the network (or similar) tab of your
  console, you will see) a new HTTP request is created for
*/
?>

That does nothing but throw an exception: "EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection." and then forces the EventSource instance to close.

Changing it to the code below causes the script to hang for a VERY long time then suddenly dump a series of message events to the console. The result is a massive delay before the retry step is attempted again - poor execution.

<?php
    header("Content-Type: text/event-stream\n\n");

    //server-side try this:
    $c = 0;
    while (1)  {
      $c++;
      echo "data: ".$c."\n\n";
      sleep(1);
    }
?>

Additionally - the "open" event is still fired before each set of message event dumps. Hardly useful.

That approach was successfully executed here: https://gist.github.com/1002722