Category: Web Applications

WebSocket with Spring Boot


In this post I am going to talk briefly about developing a WebSocket based application using Spring Boot framework. WebSocket[1] is a full duplex protocol allows bi-directional communication. At the moment, widely using protocols such as HTTP is uni-directional and use long polling mechanisms to achieve bi-directional behavior. But using protocols such as WebSocket allows sending requests from server to client-side. However unlike HTTP, WebSocket does not form a strong application-level protocol. WebSocket sits as a thin layer on-top-of TCP protocol and allow application developers to come-up with a high-level messaging protocol design.


Simple Text-Oriented Messaging Protocol (STOMP) is selected by the Spring framework for its WebSocket support. STOMP uses message brokers to provide bi-directional communication.

Server-side Code

Server-side code of a websocket server is as follows:

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

public class GreetingController {

 public Greeting greeting(HelloMessage helloMessage) throws Exception {
 return new Greeting("Hello," + helloMessage.getName() + "!");

In the above code @MessageMapping annotation is used to map the messages come with “/hello” in the path. @SendTo is used to specify the destination of the result. Here, HelloMessage and Greeting are bean classes which can be found in [2].

The server-side configuration is as follows:

public class WebsocketConfigurer extends AbstractWebSocketMessageBrokerConfigurer {

 public void configureMessageBroker(MessageBrokerRegistry registry) {

 public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {

WebsocketConfigurer class is annotated as the configuration class for the application. By configureMessageBroker method it enables message broker and add “/topic” as topic it holds. “/app” is used to identify messages which need to send to the controller.

In the second method, “/gs-guide-websocket” is used as a endpoint which clients can connect. So let’s move in to the client-side code. It contains 2 files, a static HTML and a JS file.

<title>Hello WebSocket</title>
	<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--	<link href="/main.css" rel="stylesheet">-->
<script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
<h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
enabled. Please enable
Javascript and reload this page!</h2>
<div id="main-content" class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="connect">WebSocket connection:</label>
<button id="connect" class="btn btn-default" type="submit">Connect</button>
<button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="name">What is your name?</label>
<input type="text" id="name" class="form-control" placeholder="Your name here...">
<button id="send" class="btn btn-default" type="submit">Send</button>
<div class="row">
<div class="col-md-12">
<table id="conversation" class="table table-striped">
<tbody id="greetings"></tbody>

var stompClient = null;

function setConnected(connected) {
$("#connect").prop("disabled", connected);
$("#disconnect").prop("disabled", !connected);
if (connected) {
else {

function connect() {
var socket = new SockJS('/gs-guide-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/greetings', function (greeting) {

function disconnect() {
if (stompClient != null) {

function sendName() {
stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));

function showGreeting(message) {
<td>" + message + "</td>

$(function () {
$("form").on('submit', function (e) {
$( "#connect" ).click(function() { connect(); });
$( "#disconnect" ).click(function() { disconnect(); });
$( "#send" ).click(function() { sendName(); });

Finally the pom file of the project is as follows:

<project xmlns=""







[1] WebSocket protocol RFC –

[2] Using WebSocket to build an interactive web application –

[3] WebSocket Support –

Microservices with Spring Boot


Currently enterprise application development is more interested towards building them as microservices. This trend started about 2 years back and some organizations take this as an opportunity to do a complete re-write of their products. To help developing microservices, several organizations have done framework implementations. In here I am talking about using Spring Boot to create a very basic microservice.


This system is about handling patient records. So it is more like an CRUD application. To persist data, I am using a Mongo DB (embedded version). First, let’s see what would be structure of this project.


Fist you need to create a project with the above structure. You may find maven arc-types which helps to do that. Next the pom file should be created properly. Here, I’m showing the important sections of the pom file.




</dependencies> file contains the main method to start the microservice. So it should looks like as follow:

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

public class Application {

 public static void main(String[] args) {, args);
} file is used to provide configurations to Spring framework. Here we provide the location of the service and REST-Template. So it should look like follows:


import org.glassfish.jersey.server.ResourceConfig;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.client.RestTemplate;

import javax.inject.Named;

public class ApplicationConfig {
    static class JerseyConfig extends ResourceConfig {
        public JerseyConfig() {

    public RestTemplate restTemplate() {
        RestTemplate restTemplate = new RestTemplate();
        return restTemplate;

Next we can extend MongoRepository and create PatientReportRepository. This is very interesting capability of Spring framework as it can convert method names in to SQL queries directly.

import com.project.capsule.bean.PatientReport;
import java.util.List;

public interface PatientReportRepository extends MongoRepository&lt;PatientReport, String&gt; {

 public List<PatientReport> findByName(String name);

 public List<PatientReport> findByNameLike(String name);

 public List<PatientReport> findByTimeBetween(long from, long to);


Now let’s create the bean class, PatientReport


import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import java.util.Map;

@JsonIgnoreProperties(ignoreUnknown = true)
public class PatientReport {

public String id;

public String name;
public int age;
public String sex;
public String doctorName;
public long time;
public String reportType;
public Map<String, Object> reportData;

Finally the service class, PatientReportService. You can define any number of methods and implement a custom logic.

import com.project.capsule.PatientReportRepository;
import com.project.capsule.bean.PatientReport;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;

import javax.inject.Named;
import java.util.*;

public class PatientReportService {

private PatientReportRepository repository;

public Response storePatientReport(@RequestBody PatientReport patientReport) {;
return Response.status(201).build();

public PatientReport retrievePatientReport(@PathParam("id") int id) {
PatientReport patientReport = repository.findOne(String.valueOf(id));
return patientReport;

public List<PatientReport> findReports(@RequestParam Map<String, Object> map) {
List<PatientReport> patientReports = new ArrayList<PatientReport>();
Map<String, PatientReport> resultantMap = new HashMap<String, PatientReport>();
List<PatientReport> resultantReports;

if (map.containsKey("name") && map.get("name") != null) {
String patientName = (String) map.get("name");
if (!patientName.trim().equalsIgnoreCase("")) {
resultantReports = repository.findByNameLike(patientName);

for (PatientReport report : resultantReports)
resultantMap.put(, report);

return patientReports;


Once you run the file, microservice will start from port 8080. You can change the post by giving argument “-Dserver.port=8090” etc. Thereafter you can use a REST client to send HTTP requests and see how it works!





WSO2 ESB Endpoint Error Handling


WSO2 ESB can be used as an intermediary component to connect different systems. When connecting those systems the availability of those systems is a common issue. Therefore ESB has to handle those undesirable situations carefully and take relevant actions. To cater that requirement outbound-endpoints of the WSO2 ESB can be configured. In this article I discuss two common ways of configuring endpoints.

Two common approaches to configure endpoints are;

  1. Configure with just a timeout (without suspending endpoint)
  2. Configure with a suspend state

Configure with just a timeout

This would suitable if the endpoint failure is not very frequent.

Sample Configuration:

<endpoint name="SimpleTimeoutEP">
    <address uri="http://localhost:9000/StockquoteService">


In this case we only focus on the timeout of the endpoint. The endpoint will stay as Active for ever. If a response does not receive within duration, the responseAction triggers.

duration – in milliseconds

responseAction – when response comes to a time-out message one of the following actions trigger.

  • fault – calls the fault-sequence associated
  • discard – discards the response
  • none – will not take any specific action on response (default action)

The rest of the configuration avoids the endpoint going to suspend state.

If you specify responseAction as “fault”, you can define define customize way of informing the failure to the client in fault-handling sequence or store that message and retry later.

Configure with a suspend state

This approach is useful when connection failures are very often. By suspending endpoint, ESB can save resources without unnecessarily waiting for responses.

In this case endpoint goes through a state transition. The theory behind this behavior is the circuit-breaker pattern. Following are the three states:

  1. Active – Endpoint sends all requests to backend service
  2. Timeout – Endpoint starts counting failures
  3. Suspend – Endpoint limits sending requests to backend service

Sample Configuration:

<endpoint name="Suspending_EP">
    <address uri="http://localhost:9000/StockquoteServicet">
        <errorCodes>101504, 101505</errorCodes>
        <errorCodes>101500, 101501, 101506, 101507, 101508</errorCodes>


In the above configuration:

If endpoint error codes are 101504, 101505; endpoint is moved from active to timeout state.

When the endpoint is in timeout state, it tries 3 attempts with 1 millisecond delays.

If all those retry attempts fail, the endpoint will move to suspend state. If a retry succeed, then endpoint will move to active state.

If active endpoint receives error codes 101500, 101501, 101506, 101507, 101508; endpoint will directly move to suspend.

After endpoint somehow moves to suspend state, it waits initialDuration before attempting any furthermore. Thereafter it will determine the time period between requests according to following equation.

Min(current suspension duration * progressionFactor, maximumDuration)

In the equation, “current suspension duration” get updated for each reattempt.

Once endpoint succeed in getting a response to a request, endpoint will go back to active state.

If endpoint will get any other error codes (eg: 101503), it will not do any state transition, and remain in active state.


In this article I have shown two basic configurations that would be useful to configure endpoints of WSO2 ESB. You can refer WSO2 ESB documentation for implementing more complex patterns with endpoints.


WSO2 ESB Documentation:

Timeout and Circuit Breaker Pattern in WSO2 Way:

Endpoint Error Codes:

Endpoint Error Handling:

Creating Geometry Compass Using JavaScript


Few weeks back, I was asked to look around for existing geometry drawing tools. While searching, I found numbers of dynamic geometric construction tools which allows  drawing. Most of those projects are desktop-based, and few are web-based. Most of the web-based are reusing existing platforms such as GeoGebra.

In my research, I was focusing on the ruler and the compass tools which can be reused. Unfortunately I didn’t came across a web-based tool which can reuse. There were some good stuff, which are not reusable. Since most of the other web-based systems reuse GeoGebra, so they have the same limitations that GeoGebra has. Almost all reusable web-based tools have an issue with their compass, which was not user-friendly.


Geometry compass in most web-based tools allows you to draw arcs in one direction. Mostly anti-clockwise direction. This uni-directional compass tools were annoying for me while drawing constructions. Searching furthermore, I found Geometra (a desktop-based tool) has provided a reasonable solution for that. The compass in Geometra allows drawing arcs both sides, but allows drawing only small-arcs (less than 180 degrees). In my implementation I thought of bringing Geometra’s approach to web-based environment.


For this implementation I used HTML5 canvas, and JavaScript. To make the implementation easier I added fabricjs library. Though FabricJs makes it easy to use HTML5 canvas, it has the limitation of representing Arcs. Therefore I extended its circle class to cater the requirement. Furthermore I used Compass class to handle properties of compass and event.js for handling mouse events.


In this section, I’ll go through files which I discussed earlier. “Arc.class.js” file extends Circle class of fabricJs. Then I’ve overridden the initialize, render and toSVG methods to suite the requirement.


fabric.Arc = fabric.util.createClass(fabric.Circle, {
	type: 'arc',

	counterclockwise: false,

	initialize: function (options) {
		this.counterclockwise = options.counterclockwise;
		this.callSuper('initialize', options);

	_render: function (ctx, noTransform) {
		ctx.arc(noTransform ? this.left + this.radius : 0,
		      noTransform ? + this.radius : 0,
		      this.endAngle, this.counterclockwise);

    toSVG: function(reviver) {
    	var markup = [];

		var rx = this.left + this.radius * Math.cos(this.startAngle);
		var ry = + this.radius * Math.sin(this.startAngle);

		var ex = this.left + this.radius * Math.cos(this.endAngle);
		var ey = + this.radius * Math.sin(this.endAngle);

		var svgPath = '';
	    if (!this.counterclockwise) {
	    	svgPath += '<path d=\"M'+rx+','+ry+' A'+this.radius+','+this.radius+' 0 0,1 '+ex+','+ey+'\" style=\"'+this.getSvgStyles()+'\"/>';
	    } else {
	    	// Exchange starting and ending points when it's counterclockwise
	    	svgPath += '<path d=\"M'+ex+','+ey+' A'+this.radius+','+this.radius+' 0 0,1 '+rx+','+ry+'\" style=\"'+this.getSvgStyles()+'\"/>';


    	return reviver ? reviver(markup.join('')) : markup.join('');

The above Arc class provides generic support for drawing arcs, similar to Line and Circle classes, already comes with FabricJs. To use Arc class, I created compass JavaScript file. It has 3 public methods: redraw; which is handling mouse movements when drawing starts, complete; which concludes the drawing and toSVG; which gives out the SVG representation of the arc drawn.


function Compass (mouseStart) {
	// 'c' for center, 'r' for radius, 'e' for end = this.rx = this.ex = mouseStart.x; = this.ry = this.ey = mouseStart.y;
	this.radius = 0;

	var points = [,, this.rx, this.ry];

	this.radiusLine = new fabric.Line(points, {				
										    strokeWidth: 2,
										    fill: 'black',
										    stroke: 'black',
										    strokeDashArray: [6, 3],
										    selectable: false


	this.textObj = new fabric.Text('0', {
									        fontFamily: 'Times_New_Roman',
									        left: this.x1,
									        top: this.y1,
									        fontSize: 20,
									        originX: 'center'


	this.status = 'radius';

Compass.prototype = {
	constructor : Compass,

	redraw : function (mouse) { 

		if (this.status == 'radius') {
			this.rx = mouse.x;
		 	this.ry = mouse.y;

		 	this.radiusLine.set({ x2: this.rx, y2: this.ry });

		 	var tmp = addDistanceLabel (this.textObj, {x:,}, {x:this.rx, y:this.ry});


		} else if (this.status = 'end') {
			this.ex = mouse.x;
			this.ey = mouse.y;

			this.endAngle = this._getAngle({ x:this.ex, y:this.ey })

			var angleDiff = this.endAngle - this.startAngle;

			if ((-Math.PI * 2 < angleDiff) && (angleDiff < -Math.PI)) {
				this.counterclockwise = false;
			} else if ((-Math.PI < angleDiff) && (angleDiff < 0)) {
				this.counterclockwise = true;
			} else if ((0 < angleDiff) && (angleDiff < Math.PI)) {
				this.counterclockwise = false;
			} else if ((Math.PI < angleDiff) && (angleDiff < Math.PI * 2)) {
				this.counterclockwise = true;

			this.fabricObj.set( {endAngle: this.endAngle, counterclockwise: this.counterclockwise} );



	complete : function () {

		if (this.status == 'radius') {




			this.radius = Math.sqrt( Math.pow((, 2) + Math.pow((, 2) );

			this.startAngle = this._getAngle({ x:this.rx, y:this.ry });

			this.fabricObj = new fabric.Arc({
										radius: this.radius,
										startAngle: this.startAngle,
										endAngle: this.startAngle,
										counterclockwise: false,
										fill: '',
										stroke: 'black',
										originX: 'center',
								        originY: 'center',
								        selectable: false,
								        strokeDashArray: [6, 3]


			this.status = 'end';

		} else if (this.status = 'end') {

			this.fabricObj.set({ strokeDashArray: [] });



	toSVG : function () {
	    return this.fabricObj.toSVG();

	_getAngle : function (point) {
		var angleRequired = 0;

		// gets the actual angle from center
		if (( == 0) {
			// handling special cases
			if ( > point.y) { 
				angleRequired = Math.PI/2;
			} else if ( < point.y) {
				angleRequired = -Math.PI/2;
		} else {
			// in general cases
			angleRequired = Math.atan (( / (;

			if (( < point.y) && (angleRequired < 0)) { // handle 2nd quadrant
				angleRequired = Math.PI - Math.abs(angleRequired);
			} else if (( > point.y) && (angleRequired > 0)) { // handle 3rd quadrant
				angleRequired = Math.PI + Math.abs(angleRequired);
			} else if (( > point.y) && (angleRequired < 0)) { // handle 4th quadrant
				angleRequired = 2*Math.PI - Math.abs(angleRequired);

		return angleRequired;

For handling mouse events, I’ve created event JavaScript file. Depending on mouse events, this event file calls methods belongs to compass.


var fabricCanvas = new fabric.Canvas('sheet', { selection: false });
var selectedTool = '';
var toolState = '';
var toolPreviousState = '';
var instruction = $('#instructionText');

var currentTool = null;

var compassSettings = $('#compass_settings');
var compassSettingsState = $('input[name=compass-state]');

$('input[name=tool]').click(function() {

fabricCanvas.on('mouse:down', function(e) {

	// Get mouse coordinates
	var mousePointer = getMousePointer(fabricCanvas, e);

	switch(selectedTool) {

		case 'compass' :

			switch(toolState) {
				case 'center' :
					currentTool = new Compass(mousePointer); 
					instruction.text('Select Radius Point');
					toolPreviousState = toolState;
					toolState = 'radius';

				case 'radius' :

					// do radius logic here

					// change to next
					// currentTool.addPoint(mousePointer);

					toolPreviousState = toolState;

					instruction.text('Select Ending Point');						
					toolState = 'end';

				case 'end' :

					// do end logic here

					instruction.text('Select Center Point');
					toolPreviousState = '';
					toolState = 'center';


}, false);

fabricCanvas.on('mouse:move', function(e) {
	var mousePointer = getMousePointer(fabricCanvas, e);

	switch(selectedTool) {
		case 'compass' :
			switch(toolState) {
				case 'radius':
				case 'end' :


}, false);

function getMousePointer (canvas, evt) {
    var mouse = canvas.getPointer(evt.e);
    var x = (mouse.x);
    var y = (mouse.y);
    return {
        x: x,
        y: y

function addDistanceLabel (lineObj, start, end) {
	// change text label
 	var textX = start.x + ((end.x - start.x) / 2);
 	var textY = start.y + ((end.y - start.y) / 2);

 	var distance = Math.sqrt( Math.pow((end.x-start.x), 2) + Math.pow((end.y-start.y), 2) );
 	distance = (distance / 50.0).toFixed(1); // make it centimeters

 	lineObj.set( {left: textX, top: textY } );
 	lineObj.setText(distance + ' cm');

function initTool (toolName) {


	switch (toolName) {
		case 'compass' :
			selectedTool = 'compass';
			toolState = 'center';
			instruction.text('Select Center Point');;


Finally you need to include dependencies in index.html file, which is shown below.


<!DOCTYPE html>
	    <title>Mathematical Constructions</title>
	    <meta charset="utf-8"/>

		<h3>Geometrical Construction Drawing</h3>
		<canvas id="sheet" style="left:10px;top:10px;bottom:10px; border:1px solid #000000;" height="550" width="1280"></canvas>
		<div id="instructionText">Click on Compass</div>
		<input type="button" name="tool" class="btn btn-default" onclick="initTool('compass')" value="Compass">

		<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="./js/fabric.js"></script>
		<script type="text/javascript" src="./js/events.js"></script>

		<!-- Extended shapes -->
		<script type="text/javascript" src="./js/Arc.class.js"></script>

		<!-- Tools for drawing -->
		<script type="text/javascript" src="./js/Compass.js"></script>

		<style type="text/css">
			.active_tool {background-color: gray}

To use this, you need to open index.html file in a browser. Then click Compass button, then click center and radius points respectively, and click on ending of arc. It’ll draw arcs shown as below.




In this post I shared my experience on how a bi-directional geometric compass is implemented for a web-based environment. Hope this will be helpful for you.


[1] GeoGebra –

[2] Geometra –

[3] HTML5 Canvas –

[4] SVG Path representation for Arcs –



Configuring ownCloud with XAMPP in Ubuntu



The ownCloud is a popular open-source, self-hosted file sync and sharing platform [1]. With ownCloud you can almost create a cloud storage of your own (private cloud). For that you need to installing ownCloud on top of an already existing server is the common way. For this base infrastructure, I’m using XAMPP [2], and please take a note of product versions below.


  • Linux machine (I tested with Ubuntu 16.04)
  • XAMPP 7.0.8 (x64)
  • ownCloud 9.1.0

Note: I have experienced issues with XAMPP 7.0.9, missing module mod_ssl [3]. Also older ownCloud versions may not support newer PHP version coming up with XAMPP


Installing XAMPP is quite simple task, that you need to run downloaded “.run” executable in sudo mode.

chmod +x

sudo ./

You will get a GUI to configure further settings. Once you finished installing XAMPP, you can move on to installing ownCloud.

Installing ownCloud wan’t easy as thought. You’ll have to deal with several ownership level changes to directories.

First you need to download the ownCloud, and extract the zip file. Secondly you need to put it in to “htdocs” folder of XAMPP.

Then use following in terminal to go to super-user mode and creating the “data” folder inside owncloud folder you copied. Thereafter you need to give all privileges to “data” folder with “chmod”

sudo su

cd owncloud/

mkdir data chmod 777 data/

Now you can access “http://localhost/owncloud&#8221; URL from browser and configure admin account.

Once you have created the admin account, you need to make sure that data folder has right permissions. For that you need to change user, user-group ad permissions of the “data” folder.

chown daemon:daemon -R data/

chmod 770 -R data/

After completion, you’ll be able to see the welcome screen of ownCloud when navigating to “http://localhost/owncloud&#8221; URL.


[1] ownCloud –

[2] XAMPP –

[3] XAMPP issue –

Experience with Azure Big Data Analyzing


This experiment was done in order to have first understanding on how to deal with big data on cloud. So this is my first time experience with lots of new technologies such as Hadoop, Hive etc. Before the experiment I have tried few examples with Hadoop and other related technologies, and yet found that this would be a better way to go.

Use case

This experiment is based on the dataset with annual salaries for different persons. In this case this is about California, USA in 2015. The data set contained names, job titles, basic salary, additional benefits and total salary. So in this, I’ll concentrate on averages of job titles and their averaged total salaries.

Please note that this is an experiment which is solely depends on the dataset. Actual survey reports may contain values different from final results.


Before moving to the rest of the article, you are expected to have better understanding on followings:

  • Your understanding on Microsoft Azure platform is necessary. You can create a free azure account and try to play around with portal. Also you need to understand their concepts such as Resources, Resource Groups etc.
  • You need to have some sort of understanding on big data concepts such as what is big data, Hadoop DFS, Hadoop Eco system, Hive, SQL etc.
  • Better to have done some tutorials in Azure documentation. Specially “Analyze flight delay data”, which laid the foundation for this article.
  • Understanding on HTML, PHP, JS with AJAX is required for understand visualization part.
  • Using tools like Putty, WinSCP if you are in Windows, else commands related to scp and ssh

Planning Deployment

Deployment required for this article is can be shown as follows.

Azure Deployment

Please note that I’ll shutdown HD Insight cluster once it completed its job, else you’ll lose your credits!

The diagram shows different steps that needs in this experiment.

  • First you need a dataset to examine.
  • Then you have to transfer it to Hadoop cluster, and to Hadoop Distributed File System (HDFS) from there.
  • Thereafter you will run required Hive queries to extract the essence of the dataset. After processing we’ll move those data to a SQL database for ease of accessing.
  • Finally you need to develop a PHP application which runs on an App server node to visualize results.

Preparing dataset

You can download San Francisco annual income dataset from following location:

After downloading, you need to open that using excel. I have observed that several job titles contains comma in text. So use find & replace to replace commas in it with hyphen character. Since this is a CSV file, those commas will negatively affect our analysis.

Put the CSV inside a zip folder to minimize data transfer.

Setting up Azure resources

Now you need to create Azure resources required. So let’s start with HD Insight. In this case we need to create a Hadoop-Linux cluster, with 2 worker nodes. Following guide will help to create such cluster quickly.

Also for further information about cluster types and concepts, you may look at following link:

Unfortunately Azure still hasn’t way to deactivate HD Insight cluster when idle. You need to manually delete it, else you’ll be charged for idle hours too.

Thereafter you need to create SQL database. Following tutorial will help on that: (Create a new Azure SQL database section)

Finally you need to create an empty App Service. For further information about App Service you may refer following:

This App Service will contain PHP runtime which will be needed at the last part of the article.

A best practice would be, when creating above resources would be to allocate all the resources to a single resource group, which makes it easy to manage.

Also make sure to give strong passwords and remember those.

Executing process

First you need to transfer zip file created to Hadoop nodes’s file system. You can do it by using scp command or any GUI tool which does scp.

As the host, you need to mention “”. Along with that, you need to provide ssh credentials.


Then you need to access that node using SSH. In windows you can use Putty tool, others may use terminal.


Unzip the file uploaded


Next, you have to move the csv file to Hadoop File System. Use following commands to create a new directory in HDFS and move the csv file

hdfs dfs -mkdir –p /sf/salary/data

hdfs dfs -put FILENAME.csv /sf/salary/data

Now, you need to create Hive query and execute. You can execute Hive query using a file or in an interactive manner. We’ll do in both manner, but first using the file.

Create the following “salaries.hql” using nano

nano salaries.hql

and add the following queries:

DROP TABLE salaries_raw;
-- Creates an external table over the csv file
 JOB_TITLE string,
 BASE_PAY float,
 OTHER_PAY float,
 BENEFITS float,
 TOTAL_PAY float,
 YEAR string,
 NOTES string,
 AGENCY string,
 STATUS string)
-- The following lines describe the format and location of the file
LOCATION '/sf/salary/data';

-- Drop the salaries table if it exists
DROP TABLE salaries;
-- Create the salaries table and populate it with data
-- pulled in from the CSV file (via the external table defined previously)
 JOB_TITLE AS job_title,
 BASE_PAY AS base_pay,
 TOTAL_PAY AS total_pay,
 TOTAL_PAY_N_BENEFITS AS total_pay_n_benefits
FROM salaries_raw;

You can also locally create “salaries.hql” and upload via SCP.

The queries are self-explanatory, but to make it easy, each query  ends with a semicolon. Table “salaries_raw” is creating to directly extract values in CSV. So first query has one-to-one mapping with csv data. Data to the table is taken from where we stored csv file. Thereafter “salaries” table is created using “salaries_raw” table. The “salaries” table filters values of base_pay, total_pay and total_pay_n_benifits columns only. Those columns are selected, because only those would necessary for the next level.

To execute the HIVE query, use the following command

beeline -u 'jdbc:hive2://localhost:10001/;transportMode=http' -n admin -f salaries.hql

Next part of the Hive query we’ll going to do with interactive manner. You can open interactive shell with command:

beeline -u 'jdbc:hive2://localhost:10001/;transportMode=http' -n admin

and enter following commands:

FROM salaries
WHERE base_pay IS NOT NULL AND total_pay IS NOT NULL AND total_pay_n_benefits IS NOT NULL
GROUP BY job_title;

The above Hive query will output the result to “/sf/salary/output” folder. It’ll group the job title and get the average values of base_pay, total_pay and total_pay_n_benifits columns.

Use “!quit” command to exit from interactive shell.

At this stage, we have successfully completed extracting essence of the dataset. Next, we need to make it ready for presentation.

For presentation, we’re going to copy output data to the SQL database created.

To create a table and do other interactions with SQL database, we need to install FreeTDS to Hadoop node. Use following command to install and verify the connectivity.

sudo apt-get --assume-yes install freetds-dev freetds-bin

TDSVER=8.0 tsql -H <serverName> -U <adminLogin> -P <adminPassword> -p 1433 -D <databaseName>

Once you execute the last command, you’ll be directed to another interactive shell where you can interact with the database you created, when creating SQL node.

Use following commands to create a table to put the output we got

CREATE TABLE [dbo].[salaries](
[job_title] [nvarchar](50) NOT NULL,
[base_pay] float,
[total_pay] float,
[total_pay_n_benefits] float,
([job_title] ASC))

Use “exit” command to exit from SQL interactive session.

To move the data from HDFS to SQL database, we are going to use Sqoop. Following Sqoop command with put output data in HDFS to SQL database.

sqoop export --connect 'jdbc:sqlserver://<serverName>;database=<databaseName>' --username <adminLogin> --password <adminPassword> --table ' salaries' --export-dir 'wasbs:/// sf/salary/output' --fields-terminated-by '\t' -m 1

Once the task is successfully completed, you can again log in to SQL interaction session and execute following to view table results:

SELECT * FROM salaries


Finally you need to use FTP to connect with App Services node, and FTP the following PHP files (including js foolder).

You need to change SQL server host and credentials in “dbconnect.php” file. I’ll leave the rest of code in PHP file as a self-explanatory for you. If you successfully created the app, you should see something similar to following:




In this article I have shown you how I did my first experiment with Azure big data analysis. Along the path I had to cover several other related technologies such as Spark, Azure Stream Analysis. So there are pros and cons with using those technologies. In such cases like analyzing annual income, it’s generally accepted to use Hadoop along with Hive. But if you want to do more frequent activities, you may look in to alternatives.


  1. Project sourcecode –
  2. Get started with Hadoop in Windows –
  3. Analyze Flight Delays with HD Insight –
  4. Use Hive and HiveQL with Hadoop in HDInsight –

Architectural Constraints of REST


The term REST, (Representational State Transfer) was introduced in way back in year 2000, by Roy Fielding in his doctoral dissertation at UC Irvine[1]. Though it is about 16 years ago, still it’s importance is more or less the same. REST introduces an architectural style for web applications.

REST is tightly coupled, and embraces the potential of HTTP. Because of that it has become more popular in web application domain. REST see a web application as a virtual state-machine where states are different web pages; progressing user from one state to another through links; and going to another state.

REST web application with state transitions

To call be a web application RESTful, it needs to comply certain constraints. Following those constraints also helps web application to have desirable non-functional properties as well.

Architectural Constraints

Decoupled client-server interaction

There should be a uniform interface to separate client and server, which helps to achieve separation of concerns. Client has no need to store data, such that client is portable. On the other hand, server does not worry about keeping user state, so server-side can be scaled. In RESTful architecture server and clients should be able to use different technologies to develop separately.


Going further with client-server architecture, the server should not keep client context between requests. Each request from client should include all the information necessary to serve that request. Session state is held at client side. Once session data is received, the service can transfer that to another service.

Each state of application contains the links for client to choose the next state transition.


The client may connect to intermediate layers, which might not aware before-hand. So those layers can enforce security, do load balancing, provide caching etc.


Response from server can be cached at client side and at intermediaries, as defined by HTTP response. Cache-Control Header plays a key role in that behavior [2].

Extensible through code on demand

This is an optional requirement. Server can send executable code to client side to customize the functionality of the client. Client-side scripts such as JavaScript can be taken as an example.

Uniform Interface

This a basic requirement of a RESTful service and helps to make decoupled client-server interaction.

  • Identification of resources

Server can use requests to identify resources separately (eg: URI), and returns the representation of that resource to client (as HTML, XML or JSON).

  • Manipulate the resource through its representation

The representation send by the server is enough for a client to manipulate (update, delete) that resource.

  • Self-descriptive messages

Information included in a message contains adequate information on how to manipulate that message.

  • Hypermedia as the engine of application state (HATEOAS)

“Hypermedia, an extension of the term hypertext, is a nonlinear medium of information which includes graphics, audio, video, plain text and hyperlinks” [3]

So clients can only make transitions, through actions that are dynamically identified within hypermedia by the server. There are no standard format to represent links in a hypermedia, but there are few popular ones [4].

Architectural Properties

The constraints helps you to achieve following properties;

  • Performance
  • Scalability
  • Simplicity of interfaces
  • Modifiability
  • Visibility
  • Portability
  • Reliability

Web service APIs that comply with REST architectural constraints are called RESTful APIs [5].