HTML5-cheatsheet1/eventsource.html

<!DOCTYPE HTML>
<!--
written by Nick Shin - nick.shin@gmail.com
the code found in this file is licensed under:
- Unlicense - http://unlicense.org/

this file is from https://github.com/nickshin/CheatSheets/


this file contains some HTML5 snippets on:
- eventsource

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
reference sources:
+ http://www.html5rocks.com/en/tutorials/eventsource/basics/
  o one way server side notification - lighter than websockets:

  SSEs are sent over traditional HTTP. That means they do not require a
  special protocol or server implementation to get working. WebSockets
  on the other hand, require full-duplex connections and new Web Socket
  servers to handle the protocol. In addition, Server-Sent Events have a
  variety of features that WebSockets lack by design such as automatic
  reconnection, event IDs, and the ability to send arbitrary events.


+ http://googlecodesamples.com/html5/sse/sse.html
  o associating an ID with an event example

  Setting an ID lets the browser keep track of the last event fired so that if,
  the connection to the server is dropped, a special HTTP header (Last-Event-ID)
  is set with the new request. This lets the browser determine which event is
  appropriate to fire. The message event contains a e.lastEventId property.


+ http://tutorialspoint.com/html5/html5_server_sent_events.htm
  o "event name" example

  A single event source can generate different types events by including an
  event name. If a line beginning with "event:" is present, followed by a
  unique name for the event, the event is associated with that name. On the
  client, an event listener can be setup to listen to that particular event.


+ see servers/sse.pl for more details on eventsource server implementation
+ the servers/sse.php can be found at:
  - http://code.google.com/r/javijimenezvillar-tapquo/source/browse/www.html5rocks.com/content/tutorials/eventsource/basics/demo/sse.php


notes:
# ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING **
# ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING **
#
# poor EventSource handlers (client) may crash the browser...
#
# ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING **
# ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING ** WARNING **


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

best viewed in editor with tab stops set to 4
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
-->


<!-- ================================================== -->
<!-- START OF HTML -->

<html manifest='eventsource.appcache'>
<head>
<title>EventSource : HTML5 test code</title>

<!-- ================================================== -->
<!-- Javascript {{{ -->
<!-- ================================================== -->

<script type='text/javascript' src='js/DebugLog.js'></script>


<!-- .................................................. -->
<!-- js/DebugLog.js {{{2 -->
<!-- .................................................. -->

<script>
	// for this file, replacing (hooking) the log() and throw()
	// with the DEBUGLOG system
	var log_hook = DEBUGLOG.printhook;
	var throw_hook = DEBUGLOG.printhook;
	function debuglog_onload() {
		DEBUGLOG.setElementById( 'logwindow' );
	}
</script>

<!-- .................................................. -->
<!-- js/DebugLog.js }}}2 -->
<!-- eventsource {{{2 -->
<!-- .................................................. -->

<script>
	var EVENTSOURCE = (function(){
		// ----------------------------------------
		// constructor
		var my = function () {
			// private static unique to 'this' instance
			var source = null;

			// these are technically public static...
			this.getsource = function () {
				return ( this.classcheck() ) ? source : null;
			};
			this.setsource = function ( evtsrc ) {
				if ( this.classcheck() )
					source = evtsrc;
			};
		};
	

		// ----------------------------------------
		// private static
		var error_code = 0;

		// public static (enums) ;-)
		my.EVENTSOURCE_SUCCESS						= error_code--;
		my.EVENTSOURCE_BAD_CLASS					= error_code--;
		my.EVENTSOURCE_ERNO_NOT_CONNECTED			= error_code--;
		my.EVENTSOURCE_ERNO_CREATE					= error_code--;


		// ----------------------------------------
		// public static
		this.className = 'EVENTSOURCE';


		// ----------------------------------------
		// public static
		// can be overridden -- a new property is created for that instance
		my.prototype = {
			open: function ( url, open_cb, message_cb, error_cb, close_cb ) {
				if ( ! this.classcheck() )
					return EVENTSOURCE.EVENTSOURCE_BAD_CLASS;
			
				// ........................................

				var evtsrc = new EventSource( url );
				if ( ! evtsrc )
					return EVENTSOURCE.EVENTSOURCE_ERNO_CREATE;

				evtsrc.onopen    = ( open_cb )    ? open_cb    : donothing;
				evtsrc.onmessage = ( message_cb ) ? message_cb : donothing;
				evtsrc.onerror   = ( error_cb )   ? error_cb   : donothing;
				evtsrc.onclose   = ( close_cb )   ? close_cb   : donothing;

				this.setsource( evtsrc );

				return EVENTSOURCE.EVENTSOURCE_SUCCESS;
			},

			// ----------------------------------------
			close: function () {
				var evtsrc = this.getsource();
				if ( ! evtsrc )
					return EVENTSOURCE.EVENTSOURCE_ERNO_NOT_CONNECTED;
				evtsrc.close();
				return EVENTSOURCE.EVENTSOURCE_SUCCESS;
			},

			// ----------------------------------------
			// house keeping
			classcheck: function () {
				if ( this.className === EVENTSOURCE.className )
					return true;
				throw_hook( "*** ERRRO: object's className mismatch" );
				return false;
			},

			donothing: function () {} // no-op
		};

		return my; // must be last
	}());
</script>

<script>
	var MYAPP = (function () {
		// ----------------------------------------
		// constructor
		var my = function () {
			// ----------------------------------------
			// 'this' collision tests
			var es = null;

			this.getsource = function () {
				return ( this.classcheck() ) ? es : null;
			};
			this.setsource = function ( evtsrc ) {
				if ( this.classcheck() )
					es = evtsrc;
			};
		};


		// ----------------------------------------
		// private static
		var error_code = 0;

		// public static (enums) ;-)
		my.MYAPP_SUCCESS				= error_code--;
		my.MYAPP_BAD_CLASS				= error_code--;
		my.MYAPP_ERNO_NO_EVENTSOURCE	= error_code--;


		// ----------------------------------------
		// public static
		this.className = 'MYAPP';


		// ----------------------------------------
		// public static
		// can be overridden -- a new property is created for that instance
		my.prototype = {
			evtsrc_onopen: function ( evt ) {
				log_hook('Opened');
			},
		
			evtsrc_onmessage: function ( evt ) {
				log_hook('RECV < { origin: [' + evt.origin +
							'] lastEventId: [' + evt.lastEventId +
							'] source: [' + evt.source +
							'] port: [' + evt.port + '] }');
				log_hook('RECV < [' + evt.data +']');

// to double check origin
//				if (evt.origin != 'http://googlecodesamples.com') {
//					log_log('Origin was not http://googlecodesamples.com');
//					return;
//				}
// to parse JSON
//				var data = JSON.parse(evt.data);
//				log_hook( 'msg: ' + data.msg );
			},
		
			evtsrc_onerror: function ( evt ) {
				if (evt.eventPhase == 2) { //EventSource.CLOSED
					log_hook('> Connection was closed');
				} else {
					log_hook('Error: ' + evt.data);
				}
			},
		
			evtsrc_onclose: function ( evt ) {
				log_hook( 'this is not used in EventSource?' );
			},
		
			// ----------------------------------------

			init: function ( url ) {
				if ( ! this.classcheck() )
					return MYAPPET.MYAPP_BAD_CLASS;
				
				var evtsrc = new EVENTSOURCE;
				if ( ! evtsrc )
					return MYAPP.MYAPP_ERNO_NO_EVENTSOURCE;
				this.setsource( evtsrc );
				evtsrc.open( url, this.evtsrc_onopen, this.evtsrc_onmessage, this.evtsrc_onerror, this.evtsrc_onclose );
				log_hook('Connect init(): ' + url);
				return MYAPP.MYAPP_SUCCESS;
			},

			// ----------------------------------------
			// house keeping
			classcheck: function () {
				if ( this.className === MYAPP.className )
					return true;
				throw_hook( "*** ERRRO: object's className mismatch" );
				return false;
			},

			donothing: function () {} // no-op
		};

		return my; // must be last
	}());
</script>

<script>
	var myapp = null;

	function eventsource_onload() {
		// ----------------------------------------
		var url = '/HTML5/cgi-bin/sse.pl';
//		var url = 'servers/sse.php';
		myapp = new MYAPP;
		myapp.init( url );

		// remember: the first getsource() is EVENTSOURCE
		// the second getsource() is the actual EventSource object
		var evtsrc = myapp.getsource().getsource();

		// adding custom 'event name' handlers
		evtsrc.addEventListener('login', function(e) {
			log_hook( "EventName: login[ " + e.data + " ]" );
		}, false);

		evtsrc.addEventListener('server-time', function(e) {
			log_hook( "EventName: server-time[ " + e.data + " ]" );
		}, false);

		openclose_stop();
	}

	function eventsource_unload() {
		if ( myapp )
			myapp.getsource().getsource().close();
		openclose_start();
	}

	function openclose_start() {
		log_hook( 'EventSource manually closed -- the browser will not attempt to reconnect to server...' );
		var el = document.getElementById("openclose");
        el.innerHTML = "Start EventSource";
		el.onclick = function() { eventsource_onload(); };
	}

	function openclose_stop() {
		var el = document.getElementById("openclose");
    	el.innerHTML = "Stop EventSource";
		el.onclick = function() { eventsource_unload(); };
	}
</script>

<!-- .................................................. -->
<!-- eventsource }}}2 -->
<!-- this document {{{2 -->
<!-- .................................................. -->

<script>
	onload         = onload_handler;
	onbeforeunload = onbeforeunload_handler;

	function onload_handler() {
		debuglog_onload();
		eventsource_onload();
	}

	function onbeforeunload_handler() {
		eventsource_unload();
	}
</script>

<!-- .................................................. -->
<!-- this document }}}2 -->
<!-- Javascript }}} -->
<!-- ================================================== -->
</head>


<!-- ================================================== -->
<!-- START OF BODY -->

<body>

<!-- .................................................. -->
<div id="logwindow"></div>

<!-- .................................................. -->

<button onclick="DEBUGLOG.clear()">Clear log</button>
<button id="openclose">Please Wait...</button>

<!-- .................................................. -->

</body>
</html>