Introduction

We are going to look at the new HTML5 eventSource capability. Adapting the articles (posted here) and (posted here) I am goign to show you how to send data from the server to your XPage without using ajax to initiate the communication. I have the feeling there is a lot to learn in this area and we are just scratching the surface.

Browser Support

Yep – it is HTML5 which means no IE right now – Chrome should support this but my copy does not – so right now this demonstration is only tested and working in the latest version of FireFox.

Demonstration

The results of this article are demonstrated here, and I strongly suggest you use some kind of plugin to watch the traffic as the values chance – quite fascinating. Right click – View Source and see for yourself – no ajax! no jQuery, nothing fancy, just HTML5 in action!

http://demo.xomino.com/xomino/xPlay.nsf/xHTML5ServerSent.xsp

Server output

I have modified Stephan Wissel’s xAgent XSnippet to create a simple data stream using server-side output. Calling this xAgent through the web generated the following simple data output as seen here through Firefox HTTPFox plugin.

The thing to highlight is the Content-Type text/event-stream

<?xml version="1.0" encoding="UTF-8"?>
<!-- XPage which is not rendered but returns data like XML, JSON, etc.     -->
<!-- More: http://www.wissel.net/blog/d6plinks/shwl-7mgfbn                 -->

<xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false">
  <xp:this.afterRenderResponse>
	<![CDATA[#{javascript:
		var externalContext = facesContext.getExternalContext();
		var writer = facesContext.getResponseWriter();
		var response = externalContext.getResponse();

		// set content type, e.g. ...
		response.setContentType("text/event-stream");

		response.setHeader("Cache-Control", "no-cache");

		// read parameters, e.g. ...
		var param = context.getUrlParameter("myParam");

		// write HTML output e.g. ...
		writer.write("data: the number is "+@Random());

		writer.endDocument();
	}]]>
  </xp:this.afterRenderResponse>
</xp:view>

HTML5 JavaScript

In our xPage we create some JavaScript to instantiate and then listen to the eventSource
First of all we test to see if the EventSource is supported in this browser

		if(typeof(EventSource)!=="undefined") {

		else {
			dojo.byId("#{id:serverData}").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
		}]]>

Using the following code we subscribe to the EventSource (xSendHTML5Data_1.xsp is the xPage described above)

			var eSource = new EventSource("xSendHTML5Data_1.xsp");

And then when we receive a message from the server we act on it

			eSource.onmessage = function(event) {
				//write the received data to the page
				dojo.byId("#{id:serverData}").innerHTML = event.data;
			};

This all comes together as the following ScriptBlock in the page

	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[//check for browser support
		if(typeof(EventSource)!=="undefined") {
			//create an object, passing it the name and location of the server side script
			var eSource = new EventSource("xSendHTML5Data_1.xsp");
			//detect message receipt
			eSource.onmessage = function(event) {
				//write the received data to the page
				dojo.byId("#{id:serverData}").innerHTML = event.data;
			};
		}
		else {
			dojo.byId("#{id:serverData}").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
		}]]>
		</xp:this.value>
	</xp:scriptBlock>

Stopping the source

We are able to stop the source using eSource.close() that will stop the data being sent. I added mine in a button

	<xp:button id="button1" value="Stop the Source">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[eSource.close()]]></xp:this.script>
		</xp:eventHandler></xp:button>

Changing the refresh time

We are able to change the refresh time by returning the retry value in millisecond along with our data

writer.write("retry: 2000\ndata: the number is "+@Random());

Specifying an event name

This mercilessly ripped directly from the article – I have not done anything with the event listeners yet, but here the next thing I want to look at….using the data returned from the server to trigger events in the browser without having to parse the return string and take action on it – that’s a huge performance gain and distributes the tasks….more to come on that in the near future….

For example, the following server output sends three types of events, a generic ‘message’ event, ‘userlogon’, and ‘update’ event:

data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n
With event listeners setup on the client:

source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.msg);
}, false);

source.addEventListener('userlogon', function(e) {
  var data = JSON.parse(e.data);
  console.log('User login:' + data.username);
}, false);

source.addEventListener('update', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.username + ' is now ' + data.emotion);
}, false);

Enjoy 🙂

Demonstration

http://demo.xomino.com/xomino/xPlay.nsf/xHTML5ServerSent.xsp