Signal-r Integration in ASP.NET MVC 5

What is SignalR?

• The First Thing is to Know The SignalR is a Way to Create Real-Time Web Applications using The Stander HTTP(HyperText Transfer Protocol) protocol.
• Client And Server Can Connect To This HTTP Protocol.
• The SingalR is establish the Open Connection between the Client and the Server.

Implementation

Step1: Create New Asp.Net MVC Project.

Step2: Then right click on Solution Explore -> Add New Item -> SignalR Hub Class -> ChatHub.cs

Create a file named ChatHub.cs File.

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

namespace DemoSignalR
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

Step4: Right click on Solution Explore -> Add -> Class -> Startup.cs

Now, go to Startup.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Owin;
using Microsoft.Owin;

[assembly: OwinStartup(typeof(DemoSignalR.Startup))]
namespace DemoSignalR
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Step5: Add new method in HomeController

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

right click chat() method Add view chat.cshtml

Step6: Write below code in chat.cshtml

@{
    ViewBag.Title = "Chat";
}
<style>
    .set_text 
    {
        text-align:center
    }
    .set_margin 
    {
        margin-left:36%;
    }
    .set_padding 
    {
        padding:2%;
    }
    .set_margin_list 
    {
        margin-left:10%;
    }
</style>
<h3 class="text-center">Real Time Chat Application</h3>
<div class="container">
    <div class="row set_padding">
        <div class="col-md-12 text-center set_text form-group">
            <input type="text" id="message" class="form-control text-center set_margin"/>
        </div>
        <div class="col-md-12 text-center">
            <input type="button" id="sendmessage" value="Send Message" class="btn btn-primary"/>
        </div>
        <div class="col-md-12 text-center">
            <input type="hidden" id="displayname" />
        </div>
        <div class="col-md-12 set_margin_list ">
            <ul id="discussion">
            </ul>
        </div>
    </div>
</div>
@section scripts {
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(function () 
        {
            var chat = $.connection.chatHub;
            chat.client.addNewMessageToPage = function (name, message) {
                $('#discussion').append('<li><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            $('#displayname').val(prompt('Enter your name:', ''));           
            $('#message').focus();           
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function ()
                {
                    chat.server.send($('#displayname').val(), $('#message').val());
                    $('#message').val('').focus();
                });
            });
        });
        
        function htmlEncode(value) 
        {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

Step7: Run Application see output.