SignalR mvc example in asp.net

SignalR is an open source library is used to build real time web applications. When more than one user working on an application, when one user making changes, meanwhile the other user can see the changes without reloading the web page. It provides real time functionality, push notification to the connected clients.

You can make real time chat room, monitoring applications and real time forms etc…

Create a new asp.net mvc project and name it as chatapp.

Step 1: To begin install signalr in the project by running the following command in the nuget package manager console.

PM> Install-Package Microsoft.AspNet.SignalR

Step 2: Create a folder and name it as “Hubs”.Right click on the folder and create a class and name it as chatHub. Copy and paste the following code.

public class chatHub:Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.broadcastMessage(name, message);
        }
    }

Step 3:  Right click on the controller folder and create a new controller and name it as SignalRController. Inside the SignalRController copy and paste the following code.

public ActionResult Index()
        {
     
           return View();

        }

Step 4: Right click on the index method and create a view named as index. Copy and paste the following code.

@{
    ViewBag.Title = "Index";
}

@using MymvcApp.Models;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var chat = $.connection.chatHub;
        $.connection.hub.start().done(function () {
            $('#btnSend').click(function () {
                chat.server.send($('#name').val(), $('#txtMessage').val());
                $('#txtMessage').val('').focus();
            });
        });
 
        chat.client.broadcastMessage = function (name, message) {
            var encodedName = $('<div />').text(name).html();
            var encodedMessage = $('<div />').text(message).html();
            $('#MessageList').append('<li><strong>' + encodedName + '</strong> : &nbsp;&nbsp;' + encodedMessage + '</li>');
        };
 
        $('#name').val(prompt('Enter Name : ', ''));
 
    });
</script>
 
<div>
    <div>
        <input type="text" id="txtMessage" />
        <input type="button" value="Send" id="btnSend" />
        <input type="hidden" id="name" />
    </div>
    <div>
        <ul id="MessageList">
        </ul>
    </div>
</div>

Step 4: Right click on the models folder and create a class named as startup. Copy and paste the following code.

using Microsoft.Owin;
using Owin;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
[assembly: OwinStartup(typeof(MymvcApp.Models.StartUp))]
 
namespace MymvcApp.Models
{
    public class StartUp
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Description: run the application, it pops a prompt, enter the user name and click ok. Copy the URL and paste it in another browser tab and enter the user name. Type the message on the each tab and see the message instantly updating in the web pages.  

To begin for chat, enter the user name ,

URL copied and paste it in the new tab and enter the second user name:

Type the message and enter press send button,