Push notification from server to client using SignalR

There are number of scenarios where we need send push notification from server to client, client gets update from the server when ever server has new data.

Some of the scenario which benefit from push notification(real-time web) are

  • Monitoring Server application over the web(Diagnostic reports or Error reports )
  • User signup notification.
  • Stock tickers.
  • Chat application.
  • Monitoring of hardware instruments.

Now we know the possible usecases ,so how can we implement server to send arbitrary data to client.

Currently there are four established technique to do push notification on web

    • Polling : In case of polling Web browser make connection to server, server responds immediately with data if present else empty response. After predefined time(polling time) Web browser makes same request to server.This process repeats. Even though this solution works, it is not scalable solution. It can put heavy load on the server depending on the polling interval and number of clients . Polling from JavaScript shown below
	function getInfo() {

	$.ajax("url", function ( newInfo){
		if ( newInfo != null) {
			// do something with the data
		}
	});
	// poll again after 20 seconds
	setTimeout(getInfo,20000);
}
// start the polling loop
getInfo();
    • Long polling: It is similar to polling , where Web browser makes request to server , but server does not respond to client immediately , it will leave the request hanging open till it has some data to deliver. Eventually server responds and client uses the data and starts new request, whole process repeats. This technique is improvement over polling as it does creates unnecessary connections.  Long polling from JavaScript shown below
function getNewInfo(){
  $.ajax("url", function (newinfo) {
      // do something with the data
	  // start the new request
      getNewINfo();
  });
}
// start the polling loop
getNewInfo();
  • EventSource: It is similar to long polling client make request ,server leaves the request hanging open till it has some data to deliver, difference is after sending data back server does not close the connection. Server will keep the connection open .  This solution provide good scalability in handling requests , also it is implemented in natively by Web Browser it can perform better compared to previous techniques.But EventSource is  not iimplemented IE.  Event source from JavaScript shown below
var eventSrc = new EventSource("url");
	// register event handler for the message
    eventSrc.addEventListener( "message",function (evt) {
        //process the data
    });
  • WebSocket:Is the new approach to Web browser/server communication. It is bidirectional communication channel compared to unidirectional Event Source.  At high-level client sends HTTP Connection with “Upgrade: websockets” header;server leaves connection open , client and server negotiate which version of web socket protocol to use. Client and Server exchange messages once connection is upgraded to web socket. This technique is natively implemented by the Web Browser/Server . Refer to caniuse website to check the latest websocket implementation in Web Browser. WebSocket usage from JavaScript shown below
var socket = new WebSocket("url");
socket.onmessage = function (msg) {
	var newInfo = msg.data;
	// do something with the data
}
// client can also send request to server
socket.send(.... )

As we seen ,each technique has some pros and cons and not all browser have implemented all the features.
What we need is some abstraction over the different implementation  so that developer need not worry about various implementations.

SignalR to rescue.

SignalR is an abstraction on top of a persistent HTTP connection. It provides on consistent API over different implementations(long polling,websocket).

SignalR can use websocket if it is implemented by the Web browser and server and fallback to long polling if it is not implemented.
SignalR uses C# dynamic feature on the server side ( asp.net ) and Javascript dynamic features on the client side to create server and client proxy.

It is similar to Nodejs+socket.io implementation based on JavaScript.

CPU usage monitor sample

To illustrate the SignalR usage I wrote sample web application which allows to monitor % cpu usage on the server in real-time. Sample  application uses SignalR on server/client and Google web chart  for visualization.

Tools used: Free Microsoft Visual Web Developer 2010 Express, SignalR on Nuget and Google Chart Tools.

Here is the step by step instruction.

1. Create “ASP.NET Empty Web Application” in VS Web Developer express.

2. Use Nuget Package manager console in VS to install SignalR and associated dependency from Nuget.

3.Create class to hold the cpu usage information.

public class CpuUsageInfo
    {
        public double CPUUsage { get; set; }
        public String DateString { get; set; }
    }

4. Create new class on the server side which derives from SignalR PersistentConnection class.

 public class Perfmon : PersistentConnection
    {
        protected override System.Threading.Tasks.Task OnConnectedAsync(SignalR.Hosting.IRequest request, IEnumerable groups, string connectionId)
        {
            return base.OnConnectedAsync(request, groups, connectionId);
        }
    }

5.Update the Global.asax file to map ASP.NET route

protected void Application_Start(object sender, EventArgs e)
        {

            // add routing
            RouteTable.Routes.MapConnection("perfmon", "perfmon/{*operations}");

            Task.Factory.StartNew(() =>
                {
                    // get connection to global client connections
                    IConnectionManager connectonManager = AspNetHost.DependencyResolver.Resolve();
                    var connection = connectonManager.GetConnection();

                    var counter = new PerformanceCounter();
                    counter.CategoryName = "Processor";
                    counter.CounterName = "% Processor Time";
                    counter.InstanceName = "_Total";

                    while (true)
                    {
                        var item = new CpuUsageInfo()
                        {
                            DateString = DateTime.Now.ToString("hh:mm:ss"),
                            CPUUsage = Math.Round(counter.NextValue(), 2),
                        };

                        connection.Broadcast(item);

                        Thread.Sleep(500);
                    }
            });

        }

6. Inside Application_Start method add code to get send CPU usage events to connected clients using SignalR library.

7. Create new html file with that plots line chart using Google charting tools. In the JavaScript make connection to server using SignalR js library. As the data arrives from the server update the chart data collection and redraw the chart.

    var output;
    $(document).ready(function () {

        output = $("#output");

    });

    var data;
    var chart;
    var options;
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

        // Create the data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Time');
        data.addColumn('number', 'CPU Usage in %');

        // Set chart options
        options = { 'title': 'CPU usage history', 'width': 600, 'height': 400 };

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

    connection = $.connection('/perfmon');

    connection.received(function (dataItem) {
        var newItem = dataItem;

        output.text("Received text from the server .: " + newItem.DateString + "," + newItem.CPUUsage);

        // update chart with data received from the server
        data.addRow([newItem.DateString, newItem.CPUUsage]);
        if (data.getNumberOfRows() > 100) {
            data.removeRow(0);
        }
        chart.draw(data, options);
    });

    connection.start();

Here is the demo output in Browser

Complete sample code
Resources
1. SignalR Channel9 Video
2. SignalR on GitHub
3. Socket.IO

Physical machine to Virtual machine(P2V) using Disk2Vhd

Recently I had to work with team to move their build system to Visual Studio 2005 SP1. Currently their build system was setup with Visual Studio 2005 with various third party software , environment settings, registry changes , which are necessary to build the legacy software. Team wanted to try out Visual Studio 2005 SP1 changes on clean workstation with all necessary settings so that they could build software and run some tests and once they are confident then they can update existing build systems to Visual Studio 2005 SP1.

Unfortunately setting up new system requires lengthy process. It requires going through their build system setup documentation and making sure that all the third party software, environment variables, registry settings and other settings in proper order. This can easily take up 1/2 day of work, even then it is not guaranteed to work , because you could easily miss out some settings.

I knew that using Virtualization technologies we could do physical to virtual desk conversion but I never tried it.

Enter Physical-to-Virtual ( P2V )

Physical to Virtual Conversion (P2V) is the process by which an existing operating system on a physical server — its filesystem, applications and configuration, etc. — is cast into a virtualized instance of the same operating system and filesystem, transferred, instantiated, and started as a VM on  hosted or bare metal virtualized platform.  All major virtualization software vendor’s provides tool which can create virtual disk format from the physical disk , which is first step in P2V, VMware provides VMware vCenter Converter and Microsoft provides SCVMM (System Center Virtualization Manager) .

But each of these solutions requires installing some software. I wanted simple standalone solution, after searching on the web , found Disk2Vhd tool from sysinternals (now part of Microsoft). This tool is standalone executable, simple to use and does not require to install any software. It creates virtual appliance in VHD (virtual hard disk) format and all major vendors directly supports this format.

Once tool creates VHD file I can attach the virtual appliance into virtual machine monitor ( VMM ) such as VirtualBox , Xen,Hyper-v or VMware workstation and install the new service pack on top of the exiting virtual build machine setup.

Following section describes steps to move physical machine to virtual machine using Disk2VHD and VirtualBox software

1. Download Disk2Vhd  tool from Microsoft technet site.

2. Run Disk2Vhd tool  on a physical machine , you wish to convert to virtual . This tool list the all available drives on a system and the required disk space for storing virtual disk (VHD).

Disk2Vhd

3. After selecting the required options , select Create

To make it fast , you can select different disk location for storing the VHD file. Also make sure that you un-check all network drives and other drives which you do not wish to include .

4. Once VHD file is created , take the VHD to to different machine where Virtual machine monitor software is installed ( Hyper-V or Vmware Wokstation …etc ) , create new virtual machine and attach the VHD.

5. In this example I will uses VirtualBox VMM ( Virtual machine monitor ) to attach the VHD.

6. Create new VM in VirtualBox ( Machine->New ). In the “Create New Virtual Machine” dialog, enter name and select OS. In this case my build system was in Windows 7 , I selected the same.

image

7.Select Next and provide memory for new VM.

image

8. Select Next. In this dialog un-check “Start-up Disk” option. This allows us to attach existing VHD to VM instance.

image

9. Select Next , Following warning message is show, click “Continue

image

10. Select Next,

image

11. This will complete the creation of new Virtual machine. But still we have not configured it to use VHD file got from the P2V conversion.

From the VirtualBox Manager select the newly created VM ( p2v-win7vm) from the pane and select “Settings” options , as shown below.

image

12.In “Settings” dialog select “Storage” option on the left pane and click “+” button on IDE controller to add existing VHD . Once this option is select VirtualBox brings up dialog to choose existing disk.

image

13. Once VHD is selected, you can modify other  settings such as memory, processors and video memory from this dialog.

image

14. Now Virtual machine creation is complete , you can stat the VM, you have replica of your physical  setup inside VM.

In conclusion P2V is great technology to create copy/move your physical server instance inside VM .

Resources

1. TechNet site.

2. Free P2V software from VMware.

3. VirtualBox Virtualization software.

Simple way to share files from between Linux to windows

I often use both Windows and Linux environment at work. Sometimes I need to share files between Linux & windows workstation.

There are couples of ways to share files between Linux & Windows.

  1. Setup Samba server (CIFS share) on your Linux box, which can be accessed from any windows machine. Because In many of the Linux distros Samba server is not installed by default. It requires installing package and setting up configuration file to share folder.
  2. Run Ftp server on you Linux box and use ftp client from windows box to access it. Again this solution may require starting the ftp server on the Linux machine and configuring it to allow access to shares.
  3. Run SSH server on Linux machine and on windows box you use secure copy(scp) or similar SSH client to do file transfer. You can download scp client for windows putty download page.This also requires installing SSH server on Linux box ( for Ubuntu by default SSH server is not installed)

Even though many of the option listed are simple , it requires some effort to setup. You need to repeat the same when you re-install Linux.

Recently I discovered simple and elegant way to achive the same using python built in SimpleHTTPServer module.Advantage of this approach is python is by default installed on all Linux distributions. No need to install any additional package.

Here is how to do it

    1. From the command shell, go to the directory you want to share. For example if you want to share “/usr/home/john/files” .                                                                                                                                                                       $ cd /usr/home/john/files
    2. Run following command to share files. This command starts the webserver on port 8080 with directory browsing enabled .                                                                                                                                                                             $ python -m SimpleHTTPServer 8080
    3. On your windows box point your any Webrowser to http://<linux_machine_ip&gt;:8080 . This will list all the files present on the Linux box . Now select any files download to windows.

Resource

C# 5 Callerinfo Attribute

As application developer we log information related to execution (information or error) to log files. This information is helpful for tracing, debugging, and creating diagnostic tools. If the log message has file name, line number and function name it is easy to narrow down the issue file and function.

In C/C++ developer can use  __FILE__ , __LINE__ and __FUNCTION__ macros to print file name, function name and line information along with the log message.

Following code c++ code illustrate the usage

// logger function
void LogMessage(std::string caller ,std::string LogMessage)
{
	std::cout<<__FILE__<<":"<<__LINE__<<" - "<<caller<<" "<<LogMessage<<std::endl;
}
// main function
int main(int argc, char* argv[])
{
	LogMessage (__FUNCTION__,"Starting Application");
	return 0;
}

If you are .Net developer  prior to .Net 4.0  you would have used System.Diagnostics.StackFrameclass to get this information .

public class Program
{
	public static void LogMessage(String message)
	{
		// get access to caller stackframe
		StackFrame frame = new System.Diagnostics.StackTrace(true).GetFrame(1);
		String file = frame.GetFileName();
		int line = frame.GetFileLineNumber();
		String member = frame.GetMethod().Name;
		
		var s = String.Format("{0}:{1} - {2}: {3}", file, line, member, message);
		Console.WriteLine(s);
	}
	static void Main(string[] args)
	{
		LogMessage("Starting the application ...");
	}
}

In C# 5 and VB.Net 11 there is easier way of getting this information using CallerInfo attribute.By using Caller Info attributes, you can obtain information about the caller to a method.

You can obtain file path of the source code, the line number in the source code, and the member name of the caller.

Here is the sample which uses C#5 feature ( available in .Net 4.5 )

public class Program
{
	public static void LogMessage(    
	string message,
	[CallerFilePath] string file = "",
	[CallerLineNumber] int line = 0,
	[CallerMemberName] string member = "")
	{
		var s = string.Format("{0}:{1} - {2}: {3}", file, line, member, message);
		Console.WriteLine(s);
	}
	static void Main(string[] args)
	{
		LogMessage("Starting the application ...");
	}
}

More information about Callinfo attribute can be found here
1. MSDN

Microsoft All-In-One Code Framework

Often you will looking for code samples to solve certain programing tasks.
Code samples will help in  understanding available operating system API’s and it usage.

All-In-One Code Framework  is code samples library provided by Microsoft. More than 3500 quality code samples covering various technical topic ranging from System programming,Device Driver programming, Windows Azure,ASP.NET ,Office SharePoint etc. Samples will be available both for Native ( C++,MFC ) and .NET developers.

Microsoft All-In-One Code Framework  has “Sample browser” application , that helps you to find the code samples written by the Microsoft team.
These sample are based on request from developer communities, customers and typical  programming scenarios.

image[3]-20[1]

 

To find the code samples
Visit http://1code.codeplex.com/ and download the application. This application is based on click once technology.

Once it is downloaded , you can launch the application and search for samples by entering the query in the search box.
You can also apply search filter based on programming language ( C++,C#,VB.NET ) and technology.
Following picture shows the search results for “Mutex” with C++ filter.

 

allinone

 

More information can be found from

1. Codeplex website

2. Channel9 Resource

3. How to use video on developer channel

Speedy resolution of customer issues using Problem step recorder

Recently I saw a tool ( PSR) in windows 7 which allows customer to report issue/problem using screen capture technology.
This tool by default present in Windows 7 systems. Just type “PSR.exe” from the command prompt to launch this tool.

Using this tool is simple, run this tool and start using the system/application to reproduce the issue.
This tool records all user interaction with the system as screenshots along with the system information.
At the end , tool generates zip file containing all the necessary information.
User can submit zip file to developer for analysis. This allows developer to exactly see what operations user was doing when problem happens.

As this tool captures the screen shots it can be useful for anybody who wants to understand the customer interaction with the
system and to see exactly what customer was doing when problem happens.

Next time somebody tells you that your application is not working, ask them to run this tool and send the information to you.
More information can be found at
PSR