Prototype for Real Time Data Streaming (Data Push) Part 2

This is the part 2 of the serial. Here is the other parts of the series.

Prototype for Real Time Data Streaming (Data Push) Part 1: maven2 generated Jetty based application

Prototype for Real Time Data Streaming (Data Push) Part 2: multi-channel subscription based web application

Prototype for Real Time Data Streaming (Data Push) Part 3: channel feeder java based application

In the part 1 of this serial, I created a project DeviceMonitort by using mvn. In the following, I will modify the web application to support multi-channels subscription based web application housing on Jetty 7 embedded server.

Multi-Channel subscription based Web Application

Web Pages

First, I will replace the index.jsp with there html files: index.html, frameleft.html and frameright.html.

index.html

<html>
<head>
<title>Device Monitor</title>
</head>
<frameset cols="30%,70%">
<frame src="frameleft.html" name="left_frame">
<frame src="frameright.html" name="right_frame">
</frameset>

frameleft.html

Here I demonstrates multiple channel selections on the left frame, and users can choose whatever predefined channels they want to subscribe. In fact, the channel name can be generalized as anything.

<html>
<head>
<title>frameleft</title>
<script language="JavaScript" type="text/javascript">
<!--
function change(channel)
{
parent.left_frame.document.form1.text1.value=channel;
parent.right_frame.location="device.jsp";
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<FORM name="form1">
Choose a channel from the list:
<INPUT type="text" name="text1" size="25" value="/123" readonly="readonly">
</FORM>
<a href="javascript:change('/123')">/123</a>
<br>
<a href="javascript:change('/stopwatch')">/stopwatch</a>
<br>
<a href="javascript:change('/sar')">/sar</a>
<br>
<a href="javascript:change('/iostat')">/iostat</a>
<br>
<a href="javascript:change('/vmstat')">/vmstat</a>
<br>
<a href="javascript:change('/ifstat')">/ifstat</a>
</body>
</html>

frameright.html

<HTML>
<HEAD>
<TITLE>Device Monitor Introduction</TITLE>
</HEAD>
<BODY>
<p>Cometd is a project by the Dojo Fundation to implement Bayeux specification. </p>
<br>
<p>Bayeux is a purpose to implement responsive user interaction for web clients using Ajax and server-push technique called Comet.</p>
<br>
<p>The messages are routed via named channels and can be delivered server2client, client2server or client2client.</p>
<br>
<p>Channels are by default broadcast publish subscribe. </p>
</FORM>
</BODY>
</HTML>

Other Files

The device.jsp file is modified from index.jsp. It allows the parameterized channelName to be passed to dev.js.

device.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/json2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/org/cometd.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery.cometd.js"></script>
<span style="color:#ff0000;"><script type="text/javascript" src="dev.js"></script></span>
<%--
The reason to use a JSP is that it is very easy to obtain server-side configuration
information (such as the contextPath) and pass it to the JavaScript environment on the client.
--%>
<script type="text/javascript">
	var config = 	{
		contextPath: 	'${pageContext.request.contextPath}',
				 channelName: parent.left_frame.document.form1.text1.value
			};</span>
</script>
</head>
<body>

<div id="body"></div>

</body>
</html>

The jquery dev.js is modified from application.js, and is called by device.jsp above, and it subscribes to config.channelName.

dev.js

(function($)
{
var cometd = $.cometd;

$(document).ready(function()
{
function _connectionEstablished()
{
$('#body').prepend('<div>CometD Connection Established</div>');
}

function _connectionBroken()
{
$('#body').prepend('<div>CometD Connection Broken</div>');
}

function _connectionClosed()
{
$('#body').prepend('<div>CometD Connection Closed</div>');
}

// Function that manages the connection status with the Bayeux server
var _connected = false;
function _metaConnect(message)
{
if (cometd.isDisconnected())
{
_connected = false;
_connectionClosed();
return;
}

var wasConnected = _connected;
_connected = message.successful === true;
if (!wasConnected && _connected)
{
_connectionEstablished();
}
else if (wasConnected && !_connected)
{
_connectionBroken();
}
}

// Function invoked when first contacting the server and
// when the server has lost the state of this client
function _metaHandshake(handshake)
{
if (handshake.successful === true)
{
cometd.batch(function()
{
cometd.subscribe(config.channelName, function(message)
{
//$('#body').append('<div>Server Says: ' + message.data + '</div>');
$('#body').prepend('<div>['+config.channelName+'] ' + message.data + '</div>');
});
// Publish on a service channel since the message is for the server only
//cometd.publish('/123', { name: 'World' });
});
}
}

// Disconnect when the page unloads
$(window).unload(function()
{
cometd.disconnect(true);
});

var cometURL = location.protocol + "//" + location.host + config.contextPath + "/cometd";
cometd.configure({
url: cometURL,
logLevel: 'debug'
});
$('#body').<span style="color:#ff0000;">prepend</span>('<div>Connecting to ['+config.channelName+']'+'</div>');
cometd.addListener('/meta/handshake', _metaHandshake);
cometd.addListener('/meta/connect', _metaConnect);

cometd.handshake();
});
})(jQuery);

By now, the multi-channel web based application is ready to go. Just start your jetty server:

mvn install jetty:start

Go to http://localhost:8080/  The following is the web application page:

Device Monitor Main Page

For example, click channel ‘/sar’ and you will subscribe to /sar. Of course, you just get the following screen because there isn’t any data feed onto the channel.

Device Monitor (/sar channel)

Device Monitor (/sar channel)

In the next post, I will show how to develop a java application to feed data onto the channel.

About henry416
I am a computer technology explorer and an university student based on Toronto. If you have any question, please feel free to discuss and comment here

One Response to Prototype for Real Time Data Streaming (Data Push) Part 2

  1. Pingback: Prototype for Real Time Data Streaming (Data Push) Part 3 « Henry Chen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s