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
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
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.
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:
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 '~/'):
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:
***************
Hub Code:
**************
Startup code:
**************
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.
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>
In client side add a script tag which is created at runtime and added.
<script src="signalr/hubs"></script>
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.