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.

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.


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)

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
    public class NotificationHub : Hub
         public void PushNotification(string 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.


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();



    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(

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

            bundles.Add(new ScriptBundle("~/bundles/signalr").Include(

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

            bundles.Add(new ScriptBundle("~/bundles/toastr").Include(

            // 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(

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

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

            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




    @RenderSection("scripts", required: false)

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


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

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

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

       .value('notification', $.connection.notification)
       .value('toastr', toastr);



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

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

    notification.client.response = function onNewMessage(message) {

    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.


Thanks for your patient !

[wpdm_file id=45]

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

  • 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.

  • 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 *