---
title: "Introduction to SignalR"  
description: "In this article I’m explaining about SignalR"  
author: "Anonymous User"  
published: 2014-11-05  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/1515/introduction-to-signalr  
category: "asp.net mvc"  
tags: ["asp.net mvc", "mvc4", "signalr"]  
reading_time: 4 minutes  

---

# Introduction to SignalR

In this article I’m explaining about SignalR\

We know very well how a client sends data to a server so now it's time to understand how a server pushes data to a client in a HTTP connection. SignalR is an [open source](https://www.mindstick.com/articles/337437/how-to-leverage-open-source-for-innovative-project-development) library to add real-time web functionality in [your ASP.Net](https://www.mindstick.com/forum/157778/how-do-you-choose-the-right-encryption-algorithm-for-your-asp-dot-net-application) [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about). So what does real-time functionality mean? Just use as an example when more than 1 user is working on the same document in Google Documents When a user is making changes and at the same time another user can see the changes without reloading the page. So real-time web functionality is the ability to have server code to push content to [connected clients](https://www.mindstick.com/interview/34153/how-can-you-broadcast-a-message-to-all-connected-clients-in-signalr). In the [HTTP request](https://www.mindstick.com/forum/34241/how-to-send-http-request-in-ios-using-nsurlconnection-objective-c) response model we know each time we need to send a new request to communicate with the server but SignalR provides a persistent connection between the client and server.

Using SignalR we can create [web applications](https://www.mindstick.com/blog/302483/full-stack-development-the-complete-guide-to-building-modern-web-applications) that require high frequency updates from the server. For examle, a dashboard, games and chat applications. SignalR uses Web Sockets and the HTML5 API that helps in bidirectional communication. It also provides an API for server-to-client Remote Procedure Calls (RPC) call, it may be something new for you because most of the time we use a request and response model.\
\
SignalR includes automatic connection management, it provides the facility to broadcast messages to all connected clients or to a specific client. The connection between the client and server is persistent while in HTTP it isn't persistent.

a. Chat room applications

b. Real-time monitoring applications

c. Job progress updates

d. Real time forms

##### Step 1:

Open [Visual studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) >> File >> New >> Select [Asp.NET MVC](https://www.mindstick.com/articles/1571/start-with-asp-dot-net-mvc-4) 4 Web Application >> Project Name >> Click “Ok” >> Select Empty Template Click “ OK”

![Introduction to SignalR](https://www.mindstick.com/mindstickarticle/88530afc-8c24-4b28-ae9a-0beff0436792/images/544fe463-9ae8-495e-a3d3-d80a02cf2d71.png)

##### Step 2:

Tools >> Library Package Manager >> Package Manager Console

![Introduction to SignalR](https://www.mindstick.com/mindstickarticle/88530afc-8c24-4b28-ae9a-0beff0436792/images/201b84fa-085a-4d78-93df-f0c10b16897b.png)

Install SignalR package

type code in Console

PM> Install-Package Microsoft.AspNet.SignalR

![Introduction to SignalR](https://www.mindstick.com/mindstickarticle/88530afc-8c24-4b28-ae9a-0beff0436792/images/e53325ec-faea-4b01-aaa5-6f6d6a836991.png)

##### Step 3:

Now create “Hubs” folder and add a class named “ChatHub”

And write below code in it.

```
using System;using System.Collections.Generic;using System.Linq;using System.Web;using Microsoft.AspNet.SignalR; namespace AdminChat.Hubs{    public class ChatHub:Hub    {        public void Send(string name, string message)        {            Clients.All.broadcastMessage(name, message);        }     }}
```

##### Step 4:

Now add a “Home” Controller

```
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc; namespace AdminChat.Controllers{    public class HomeController : Controller    {        //        // GET: /Home/         public ActionResult Index()        {            return View();        }     }} 
```

##### Step 5:

Now add a view named “Index.cshtml”

```
@{
    ViewBag.Title = "Index";
}
<script
src="~/Scripts/jquery-1.6.4.min.js"></script>
<script
src="~/Scripts/jquery.signalR-2.1.1.min.js"></script>
<script
src="~/signalr/hubs"></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('').foucs();
            });


        });

        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 6:

Now add another class named “StartUp” in Hubs folder

```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(AdminChat.Hubs.StartUp))]

namespace AdminChat.Hubs
{
    public class StartUp
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}
```

Run Application and look like this

![Introduction to SignalR](https://www.mindstick.com/mindstickarticle/88530afc-8c24-4b28-ae9a-0beff0436792/images/95a6c115-cb5b-4de2-9652-3b805a7d37ad.png)

Enter [User Name](https://answers.mindstick.com/qa/30717/how-to-retrieve-user-name-in-case-of-window-authentication) click ok and copy url and paste other tab and enter other user name

![Introduction to SignalR](https://www.mindstick.com/mindstickarticle/88530afc-8c24-4b28-ae9a-0beff0436792/images/0a857264-0b3f-4607-9146-caa8d2991eed.png)

Type message and send

![Introduction to SignalR](https://www.mindstick.com/mindstickarticle/88530afc-8c24-4b28-ae9a-0beff0436792/images/61c4e35c-d6ef-4ef1-8754-60656f50942e.png)

\

in my next post i'll explain about IndexOf [methods in c#](https://www.mindstick.com/forum/33925/difference-between-dispose-and-finalize-methods-in-c-sharp)

---

Original Source: https://www.mindstick.com/articles/1515/introduction-to-signalr

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.