A SignalR Application for real time notification using AngularJS and toastr

SignalR is a new developer’s API provided for ASP.NET web applications, used to add “real time” web functionality to ASP.NET applications. “Real Time” web functionality is the ability to have server code to push contents to connected clients.

Uses
1. Notification
2. Chat application
3. Real time monitoring application
4. Job progress update etc.

So, let’s start to create a SignalR Application. In this program I will assign a task for a person and everybody will get notification.

Step 1: Create a ASP.NET MVC application with basic template

Open visual studio, Got to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET MVC 4 Web application and click OK
Select Basic Template and Razor as view engine

Step 2: Install required packages
Install nuget package for SignalR. To install click right button of the project and then click Manages NuGet packages. Search SignalR and then install Microsoft SignalR as follows.

installNuget

Run the following command in package manager console to install packages

PM> Install-Package angularjs
PM> Install-Package toastr

Step 3: Create Startup class

Create a Startup class in project root directory. Create Stratup.cs file and modify as follows.

using Microsoft.Owin;
using Owin;

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

namespace SignalRApp
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Step 4: Create signalR hub

Create a SignalR hub name NotificationHub in root directory and inherit Hub class. Modify the class as follows

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

namespace SignalRApp
{
    
    [HubName("notification")]
    public class NotificationHub : Hub
    {
         public void PushNotification(string msg)
         {
             Clients.All.response(msg);
         }
    }
}

Here Clients.All means all user will get notification. It can be configured on the basis of group and individual.

Step 5: Create HomeController and index view

Create a Home controller by right click on controller folder. Create an index view in Views->Hoome->index.cshtml by right clicking in index action of Home controller.

HomeController.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SignalRApp.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}

Index.cshtml


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Please entry a task

Enter a Task:

Here mainController and sendMessage() is declared. I will define it later.

Step 6: Change bundle config

Change BundleConfig and add customScripts, angular, signalr, jquery, toastr buddle as follows.


    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/customScripts").Include(
                      "~/Scripts/Application/app.js",
                      "~/Scripts/Application/mainController.js"));


            bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                       "~/Scripts/angular.js"));

            bundles.Add(new ScriptBundle("~/bundles/signalr").Include(
                       "~/Scripts/jquery.signalR-2.1.2.js"));

                        
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));


            bundles.Add(new ScriptBundle("~/bundles/toastr").Include(
                        "~/Scripts/toastr.js*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            //bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
               //"~/Content/bootstrap.css",
               "~/Content/toastr.css",
               "~/Content/site.css"));


            BundleTable.EnableOptimizations = false;
        }
    }

Here I add app.js and mainController.js in customScripts bundle. I will add it later.
And add bundle reference and ng-app in Views->Shared->_Layout.cshtml

_Layout.cshtml





    
    
    @ViewBag.Title
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/toastr")
    @Scripts.Render("~/bundles/signalr")
    
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/customScripts")
    
    @RenderSection("scripts", required: false)



Step 7: Add app.js and mainController.js in Scripts->Application folder

App.js


(function () {
    angular.module('app', []);

    $(function () {
        $.connection.hub.logging = true;
        $.connection.hub.start();
    });


    $.connection.hub.error(function (err) {
        console.log('An error occurred: ' + err);
    });

    angular.module('app')
       .value('notification', $.connection.notification)
       .value('toastr', toastr);

})();

mainController.js

angular.module('app').controller('mainController', function ($scope, notification, toastr) {
    $scope.messages = [];

    $scope.sendMessage = function () {
        var inputval = taskForm.elements.txtTask.value;
        taskForm.elements.txtTask.value = "";
        notification.server.pushNotification(inputval);
        $scope.newMessage = "";
    };

    notification.client.response = function onNewMessage(message) {
        displayMessage(message);
        $scope.$apply();
    };

    function displayMessage(message) {
        toastr.success(message); //To nofiy as fadin and fadout
    }

});

Now run the application and write a text in text box, open two or three browser, you will get same notification like below.

output

Thanks for your patient !

Please share, if it is helpfulShare on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someonePrint this page

3 thoughts on “A SignalR Application for real time notification using AngularJS and toastr

  1. Thanks!! nice article..

    one question how can i implement it to broadcast on a specific user not to everyone.

    thank you and keep it up.

  2. Noor Ahmad says:

    Thanks!
    Very nice article,
    Make a footer navigation bar for feedback and please include a links of all the topics in these page, so that it will easy to find desired topic without going down in such a long page.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>