Create a push notification system with SignalR

In the previous article, we have seen Part 2 - CRUD operation on fullcalender with angularJS. Here In this article, I will show you, how to implement a push notification system with SignalR for notifying connected clients / users when any database changes happen on the server.

Event/Scheduler calendar using ui-calendar in AngularJS
 
    Create a push notification system with SignalR
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">  
                    <span class="noti glyphicon glyphicon-bell"><span class="count">&nbsp;</span></span>            
                    <div class="noti-content">
                        <div class="noti-top-arrow"></div>
                        <ul id="notiContent"></ul>
                    </div>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
        @* Add Jquery Library *@
        <script src="~/Scripts/jquery-2.2.3.min.js"></script>
        <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
        <script src="/signalr/hubs"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        @* Add css  *@
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <style type="text/css">
            /*Added css for design notification area, you can design by your self*/
            /* COPY css content from youtube video description*/
            .noti-content{
                position:fixed;
                right:100px;
                background:#e5e5e5;
                border-radius:4px;
                top:47px;
                width:250px;
                display:none;
                border: 1px solid #9E988B;
            }
            ul#notiContent{
                max-height:200px;
                overflow:auto;
                padding:0px;
                margin:0px;
                padding-left:20px;
            }
                ul#notiContent li {
                    margin:3px;
                    padding:6px;
                    background:#fff;
                }
    
                .noti-top-arrow{
                    border-color:transparent;
                    border-bottom-color:#F5DEB3;
                    border-style:dashed dashed solid;
                    border-width: 0 8.5px 8.5px;
                    position:absolute;
                    right:32px;
                    top:-8px;
                }
                span.noti{
                    color:#FF2323;
                    margin:15px;
                    position:fixed;
                    right:100px;
                    font-size:18px;
                    cursor:pointer;
                }
                span.count{
                    position:relative;
                    top:-3px;
                }
        </style>
    
        @* Add jquery code for Get Notification & setup signalr *@
        <script type="text/javascript">
            $(function () {
                // Click on notification icon for show notification
                $('span.noti').click(function (e) {
                    e.stopPropagation();
                    $('.noti-content').show();
                    var count = 0;
                    count = parseInt($('span.count').html()) || 0;
                    //only load notification if not already loaded
                    if (count > 0) {
                        updateNotification();
                    }
                    $('span.count', this).html('&nbsp;');
                })
                // hide notifications
                $('html').click(function () {
                    $('.noti-content').hide();
                })
                // update notification 
                function updateNotification() {
                    $('#notiContent').empty();
                    $('#notiContent').append($('<li>Loading...</li>'));
    
                    $.ajax({
                        type: 'GET',
                        url: '/home/GetNotificationContacts',
                        success: function (response) {
                            $('#notiContent').empty();
                            if (response.length  == 0) {
                                $('#notiContent').append($('<li>No data available</li>'));
                            }
                            $.each(response, function (index, value) {
                                $('#notiContent').append($('<li>New contact : ' + value.ContactName + ' (' + value.ContactNo + ') added</li>'));
                            });
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    })
                }
                // update notification count
                function updateNotificationCount() {
                    var count = 0;
                    count = parseInt($('span.count').html()) || 0;
                    count++;
                    $('span.count').html(count);
                }
                // signalr js code for start hub and send receive notification
                var notificationHub = $.connection.notificationHub;
                $.connection.hub.start().done(function () {
                    console.log('Notification hub started');
                });
    
                //signalr method for push server message to client
                notificationHub.client.notify = function (message) {
                    if (message && message.toLowerCase() == "added") {
                        updateNotificationCount();
                    }
                }
    
            })
        </script>
    </body>
    </html>
    
    Posted By :