Real time Push Notifications with SignalR & PNotify (Pines Notify)

In this post, let us build a small proof of concept for SignalR with two basic screens.
  1. Users.aspx: A sample user home page.
  2. Admin.aspx: This page is for administrator for sending notifications to all Users.
What are we doing?
Admin can make announcements. Can just post a title, a message and send it simultaneously to all the users who have opened up Users screen at that point of time.

Not a big deal?
But, we are going to do that without making the Users screen to refresh to get notifications in any way. No timer is used. Users should see the notification via a live connection .Works like a call over a telephone!


SignalR library holds the lions share in this POC and the Jquery add-in PNotify does a job of displaying pretty good notifications just like one sees on an OS X.

This is what you would end up doing!!


Prerequisites

NUGET
NuGet is a free, open source developer focused package management system for the .NET platform intent on simplifying the process of incorporating third party libraries into a .NET application during development.

It is nothing but a add-on for your visual studio. For example, you create an empty website and you want to add Jquery scripts to it but you don’t want to manually do it. Nuget can do it for you with 1 command automatically. Similarly, there are many libraries like enterprise library, Reactive extensions and many. Adding references, copying those files to your solution manually is a headache. With nugget, just run a command and you are done. Spend more time on actual code rather than adding references to a third party library.

Isn’t it great to have an add-on like this? This makes your life easy. However, SignalR references can be added through Nuget but it’s not mandatory. You can add the dll & script references manually if you like. I will leave it to you. But I have it and like it personally. Find the Nuget link here
http://visualstudiogallery.msdn.microsoft.com/27077b70-9dad-4c64-adcf-c7cf6bc9970c

Install it. You will see a package manager console and a Management tool after you install in visual studio 2010.

PNOTIFY
Pines Notify is a JavaScript notification plugin, developed by Hunter Perrin as part of Pines. It uses Jquery and is highly customizable. You can show javascript notifications using this plugin. Have a look at some samples here. http://pines.sourceforge.net/pnotify/. Download it.

Well, you need to make use of PNOTIFY along with SignalR to show notifications to all users, SignalR is the main library which helps you to achieve the async messaging and broadcasting. Notification is just JavaScript functionality and you can show normal alerts using regular java scripts if you want to without PNOTIFY. To make it attractive and look good, I am using PNOTIFY. Not for anything else.

Nuget SignalR Setup
  1. Open Visual Studio; create an empty website called “SignalR_POC”.
  2. Right Click on the Solution and Select “Manage Nuget Packages”.
  3. Search for SignalR. Once it shows it in the list, install it.
OR

From the Nuget Package Manager Console, type “Install-Package SignalR” as done in the video below.



PNotify Setup
Extract jquery.pnotify.js & jquery.pnotify.default.css from the zip file you downloaded. Copy these files to the root of the website solution.

Getting Hands Dirty
Add a new web form to your solution. Name it as Admin.aspx. (Well, you can even use an html file instead of aspx file. SignalR works even then. I have added Aspx file just because asp.net developers use it usually. Open it and add the below clientside code.





    

Administrator

Title : Message :


Add a new web form to your solution. Name it as Users.aspx. (Again, you can even use an html file instead of aspx file.. Open it and add the below client side code after the page directive.










     
    

Home Page for Users



In the above code, I have added Css & Js reference to a Jquery theme just to make the notifications appear in good colors and these references are not longer required if you do not want to use PNotify.

Now, add a class to your solution’s APP_CODE folder. Name it as PushHub.cs and replace the existing code with below code.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR.Hubs;

/// 
/// Summary description for PushHub
/// 
namespace Test
{

    [HubName("push")]
    public class PushHub : Hub
    {
        public void NotifyUsers(string i_sTitle, string i_sMsg)
        {
            var clients = Hub.GetClients();

            //Invokes onReceiveNotification function for all the Clients
            clients.onReceiveNotification(i_sTitle, i_sMsg);
        }
    }
}

That’s all you have to do!, Run it and see it to believe it.

Here is a small explanation on how it would work
When user.aspx is opened, it obtains a connection $.connection.push; and opens a connection and keeps it alive (without closing ). Push is the name of the hub at the server which we have written in PushHub.cs. In PushHub.cs, we have mentioned it by adding a attribute above the class. 
When admin.aspx is opened, a connection to same hub (push) is opened which was opened by users.aspx earlier.
Now, when user types a message in admin page with a title and clicks “Send this to all users”, $('#xbtnNotify').click event is fired in the same page. This event when fired calls server.notifyUsers(sTitle, sMessage);. NotifyUsers is the name of the function at Serverside code. (Server Method Call from Javascript directly!)
In the server side code, NotifyUsers method now calls onReceiveNotification method of all the clients who are in the same connection. So, automatically, this method is invoked on all the clients (Users.aspx)
Now, $.pnotify function of PNotify add-in is called with a title and message received from server (as parameters) and shows the notification! That’s the magic.
In simple terms, the response from admin goes back to PushHub.cs, then PushHub makes a call with data to a method which all clients have in common. All without a refresh, without timers and at Real-time. You can extend this and make bidirectional by making users to reply back to admin! Not a real good scenario but you can make it. Developing a chat system or a shoutbox for your website is no longer difficult with SignalR. Isn’t it?
If you want to know why to use SignalR, start from the begininng
http://www.msguy.com/2011/11/signalr-small-introduction.html

    Popular posts from this blog

    Facebook Javascript API : Feed and Share Dialog for Beginners

    What's new and expected in .NET Framework 4.5