Server-sent events by nitaku

See this Gist for the full source.

A simple test for server-sent events, based on this Mozilla Developer Network page.

Every second, a PHP server triggers a ping event, that is passed to the client. This invokes a simple callback that writes a message on a log.

The example also makes use of standard DOM manipulation instead of jQuery and the like (this has been used as reference for prepending a node).

WARNING! In order for this example to work, the provided PHP is invoked with an absolute URL. If you want to change the server-side code, please remember to change this URL to point to your copy (this time you should use a relative address, I think).

P.S. I have no idea if and when the server script is terminated, or if it is looping endlessly. I think that the script is terminated when the user leaves the page or deletes the EventSource object (PHP has a ignore_user_abort function to avoid script termination in such cases).

index.js

(function() {

  window.main = function() {
    /* get a reference to the Log DOM node
    */
    var log, source;
    log = document.getElementById('log');
    console.log('Opening connection...');
    source = new EventSource('http://wafi.iit.cnr.it/webvis/examples/server_sent_events/sender.php');
    source.onopen = function() {
      return console.log('...done.');
    };
    source.addEventListener('ping', (function(e) {
      /* callback for the 'ping' event
      */
      var newElement, obj;
      obj = JSON.parse(e.data);
      newElement = document.createElement('li');
      newElement.innerHTML = "ping at " + obj.time;
      return log.insertBefore(newElement, log.firstChild);
    }), false);
    return source.onerror = function(e) {
      return alert('EventSource failed!');
    };
  };

}).call(this);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Server-sent events</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="index.js"></script>
    </head>
    <body onload="main()">
        <ol id="log"></ol>
    </body>
</html>

index.coffee

window.main = () ->
    ### get a reference to the Log DOM node ###
    log = document.getElementById('log')
    
    console.log 'Opening connection...'
    source = new EventSource('http://wafi.iit.cnr.it/webvis/examples/server_sent_events/sender.php')
    
    source.onopen = () ->
        console.log '...done.'
        
    source.addEventListener 'ping', ((e) ->
        ### callback for the 'ping' event ###
        
        obj = JSON.parse(e.data)
        
        newElement = document.createElement('li')
        newElement.innerHTML = "ping at #{obj.time}"
        log.insertBefore(newElement, log.firstChild)
        
        ), false
        
    source.onerror = (e) ->
        alert('EventSource failed!')

index.css

#log {
  font-family: sans-serif;
  font-size: 16pt;
  list-style-type: none;
  margin-top: 42px;
  color: black;
}
#log li {
  margin-bottom: 0.2em;
}
#log li + li {
  color: #555555;
}
#log li + li + li {
  color: #777777;
}
#log li + li + li + li {
  color: #999999;
}
#log li + li + li + li + li {
  color: #bbbbbb;
}
#log li + li + li + li + li + li {
  color: #dddddd;
}

index.sass

#log
    font-family: sans-serif
    font-size: 16pt
    list-style-type: none
    margin-top: 42px
    color: black
    
    li
        margin-bottom: 0.2em
        
    li + li
        color: #555
    li + li + li
        color: #777
    li + li + li + li
        color: #999
    li + li + li + li + li
        color: #BBB
    li + li + li + li + li + li
        color: #DDD

sender.php

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

while (1) {
  // Every second, send a "ping" event.
  
  echo "event: ping\n";
  $curDate = date(DATE_ISO8601);
  echo 'data: {"time": "' . $curDate . '"}';
  echo "\n\n";
  
  // Actually send the buffer
  ob_flush();
  flush();
  
  // Wait a second
  sleep(1);
}
?>