Create a Push notification service using the SignalR with sample Rectangle Drag application from various users

              In this article we are going to see how to create a Push notification service , First of all what is an Push notification means, in generally speaks in some social networking sites you have seen that updates of others persons notifies you in real time data, how it is notifies an client ? when the server reaches any changes from the clients then it is pushes the changes from the server to all users, ie is known as Push notification, or server to client push mechanism.

    First in this sample we are going to create a application which an rectangle that can be drag and moved to any part of the browser using jquery UI plugin. After creating the Application launch the App in two different browers or more than that to test the Push notification, Now where is the Push notification present here ?

    Whenever an Rect is drag and move in any browser , then the position of the Rect in that browser while moving is indicates to all clients who are al1 using that link other than same browser , so now the position of that Rect is sends to all browser as notifications, in client part when we receive the updates we are moving the Rect of the browser to that position along with some text indication.

     First we using the IE to drag , then we can see the push notification result in Chrome browser that Rect moves along with some text info indication, Then in the second term now try to move in Chrome browser now we can see that Rect in IE starts move along with some text information indication.


First create a Empty MVC project , Then install a SignalR from the Manage-Nuget-Packages , Now you can see that two Js are download in  scripts folder.

1. Jquery.min.js 
2. Jquery.SignalR.min.js

In this sample we are using the Jquery UI along with this.

1.  jquery-1.6.4.min.js
2.  jquery.signalR-2.1.2.min.js
3.  jquery-ui.min-1.11.1.js

Dowload this Js files from Jquery exclude the Signalr, we can get the SignalR from the NugetPackages

Create a class called Startup to indicates that this a startup class 

using Microsoft.Owin;

using Owin;

using MyWebApplication;

[assembly: OwinStartup(typeof(MyWebApplication.Startup))]

namespace MyWebApplication

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            app.MapSignalR();

        }

    }

}

Then Starts write the Server and client code for the notifications

1. Create a Cs file to create a Hub.
2. Create a Html file to create a client code.

Now add the following lines in the Html first before start the sample

     <script src="Scripts/jquery-1.6.4.min.js"></script>

    <script src="Scripts/jquery-ui.min-1.11.1.js"></script>

    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>

Then start write the code in Hub cs, Create a class which must be inherit from the Hub class, then implement some function which can be called from the client.Then create an method which can be called from server to push data , but how the server knews the method, to avoid this problem all method indication in server or client must be dynamic, ie is method are binded and called at runtime.

In client side add a script tag which is created at runtime and added.

      <script src="signalr/hubs"></script>

some times you can see that this script is not found or showing 404 error number , this can resolve by following steps 

This issue is generally due to a missing or invalid script reference to the auto-generated Hub JavaScript proxy at '~/signalr/hubs'.

Please make sure that the Hub route is registered before any other routes in your application.

In ASP.NET MVC 4 you can do the following:

      <script src="~/signalr/hubs"></script> 
some times ~/ doesnt need in my app also doesnt needed.

If you're writing an ASP.NET MVC 3 application, make sure that you are using Url.Content for your script references:

        <script src="@Url.Content("~/signalr/hubs")"></script>

If you're writing a regular ASP.NET application use ResolveClientUrl for your script references or register them via the ScriptManager using a app root relative path (starting with a '~/'):

<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>

Now  
In client create a method updateContainer to push the data from the server to client, then create a method in server MoveContainer to indicates the changes from the client to server.create a hub name SmartMoveHub and gives it a custom name by using attribute HubName.

When we run the application we can see that js signalr/hubs that has created at runtime , which consits of many information regarding the server communication from the client.

Normally Signalr uses the websockets,server sentevents for communication [HTML5], if it is not avaliable for the client then it tries for forever frames,Ajax Long polling for comet long held connection.

HTML5
***************
Websockets,
Server Sent Events

LongHeld connection
*********************
Forever Frames
Ajax LongPolling


HTML Code:
***************

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        #divcontainer{

            width:100px;

            height:100px;

            background-color:orangered;

            cursor:move;

        }

    </style>

</head>

<body>

    <div  id="datapush">

       

    </div>

    <div id="divcontainer">

    </div>

    <script src="Scripts/jquery-1.6.4.min.js"></script>

    <script src="Scripts/jquery-ui.min-1.11.1.js"></script>

    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>

   

    <script src="signalr/hubs"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var smartmovehub = $.connection.smartMove;

            smartmovehub.client.updateContainer = function (x, y) {

                $('#datapush').html('Rect is moved to Top :' + x + ', Left :' + y + ' By Push Notification From other users');

                $('#divcontainer').css('top', x).css('left', y);

            };

            $.connection.hub.start().done(function () {

                $('#divcontainer').draggable({

                    drag: function (evt,ui) {

                        smartmovehub.server.moveContainer(ui.position.top,ui.position.left);

                    }

                });

               

            });

        });

    </script>

</body>

</html>

Hub Code:
**************

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

namespace SampleSignalR

{

    [HubName("smartMove")]

    public class SmartMoveHub:Hub

    {

        public void MoveContainer(int x, int y)

        {

            Clients.Others.updateContainer(x, y);

        }

    }

}

Startup code:
**************

using Microsoft.Owin;

using Owin;

using MyWebApplication;

[assembly: OwinStartup(typeof(MyWebApplication.Startup))]

namespace MyWebApplication

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            app.MapSignalR();

        }

    }

}

Open the Url in Different Browser like IE and Chrome,Now
Drag the Rectangle In IE Browser, you can see that Rect in Chrome gets change the Postion by indication the position in Chrome

Now Drag the Rectangle in Chrome , now you can see the same changes in the IE

This kind of Push notification services using the Chatting applications , notification etc. From this post  you can able to read an  information about Signalr and it Usage in Real time applications.

Get the Current Goe Location using Google API in HTML

                     In this article we are going to see how to get the current geo location code , using the google API, For this we have to enable the Google GeoCode API service , then click the enable button when the first time browser raises a pop up to show map, To build a map like below one, we have to do the following steps. Use the mouse to zoom in and out

Start wirh HTML and then Javascript,

   <form id="mapform" runat="server">

        <div id="mapcanvas" style="width: 500px; height: 400px"></div>

    </form>

Create a Div element to place the map.

Next to get the google maps , we need a server call api key from google, for this do the simple three steps.
Go to the

1. Visit the APIs console at https://code.google.com/apis/console and log in with your Google Account.
2. Click the Services link from the left-hand menu in the APIs Console, then activate the Geocoding API service.
3. Once the service has been activated, your API key is available from the API Access page, in the Simple API Access section. Geocoding API applications use the Key for server apps.

Then Use that key in the script call. like below.

<script type="text/javascript" 

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZE2VTm32UQuqTgb3KgP4&sensor=false"></script>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

Then create a JavaScript to get the current location.
First check whether the Geo location is supported in browser,  for this we can test in navigator.geolocation.
Once it is passed, then bind a callback function, which have a position as input paramter. From the position we can get the coordinates.

Now the Next thing is Draw the map using the Geocodes, so to do this we have to create a Google.Maps.Map instance and Marker.

First pass the latitude and longitude as parameter to a instance. then pass that instance to a options parameter center:, Next get the element tag where to show the map, along with options in Map instance. now use the marker instance to set the map.Next create a infowindow with a content parameter.

 <script type="text/javascript">

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(success);

        }

        else {

            alert("GeoLocation is not supported in your browser");

        }

        function success(position) {

            debugger;

            var latitude = position.coords.latitude;

            var longitude = position.coords.longitude;

            var city = position.coords.locality;

            var myLatlng = new google.maps.LatLng(latitude, longitude);

            var myOptions = {

                center: myLatlng,

                zoom: 12,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

            var marker = new google.maps.Marker({

                position: myLatlng,

                title: "lat: " + latitude + " long: " + longitude

            });

            marker.setMap(map);

            var infowindow = new google.maps.InfoWindow({ content: "<b>Address</b><br/>                Latitude:" + latitude + "<br /> Longitude:" + longitude + "" });

            infowindow.open(map, marker);

        }

    </script>

 From this post you can learn how to get the location of current place using google GeoCode api.

JQuery - Create a Flag by animation using Canvas and Div tag

Please use browser other than IE to see the animation present inside the circle because it is code in canvas tag.
Output :

Happy Independence Day

      In this article we are going to see how to animate with canvas in Div tag, It is used to draw graphics on the fly. Animate method is used to animate the given element and slide Down is used to slide down the element with timing.Here we are going to do a sample program with the following two elements to animate and draw a flag Canvas, Div and following three methods to do the actions animate, slideDown, SlideUp.

Click Here for CSS Source

Click Here for HTML Source

Click Here for JQuery Source

JQuery - Animate using Canvas in Div tag to Draw a Flag - (HTML Source)

Html Source :

<div>

<div id="stick" class="stick"></div>

<div id="br" class="br" style="margin-top: -300;margin-left: 45px;" >

            <div id="sf">

            <div id='sfc'></div>

            </div>

            <br />

            <div id="wh">

<canvas id="c">

<canvas id="s1">

</canvas>

<canvas id="s2">

</canvas>

<canvas id="s3">

</canvas>

<canvas id="s4">

</canvas>

<canvas id="s5">

</canvas>

<canvas id="s6">

</canvas>

<canvas id="s7">

</canvas>

<canvas id="s8">

</canvas>

<canvas id="s9">

</canvas>

<canvas id="s10">

</canvas>

<canvas id="s11">

</canvas>

<canvas id="s12">

</canvas>

<canvas id="s13">

</canvas>

<canvas id="s14">

</canvas>

<canvas id="s15">

</canvas>

<canvas id="s16">

</canvas>

<canvas id="s17">

</canvas>

<canvas id="s18">

</canvas>

<canvas id="s19">

</canvas>

<canvas id="s20">

</canvas>

<canvas id="s21">

</canvas>

<canvas id="s22">

</canvas>

<canvas id="s23">

</canvas>

<canvas id="s24">

</canvas>

<canvas id="s25">

</canvas>

</canvas>

            </div>

                 <br />

            <div id="gr">

              <div id='grc'>

              </div>

            </div>

<div id="bt" class="bt">

 </div>

<br />

<br />

 </div>

<div id="name" class="name">

Happy Independence Day

</div>

</div>

Click Here for Output

Click Here for CSS Source

Click Here for JQuery Source