What is SignalR
" Signal R is Async signaling library for .NET to
help build real-time, multi-user interactive web applications. "
It is library developed by the David Fowler and Damian
Edwards; which supports the asynchronous connection in ASP.NET and helps to
build the real time web application using JavaScript at client side and ASP.NET
at server side.
We know that in HTTP web application client makes request to the server and
then server respond to the client; SO it is always from client to server. But
there are certain situation where some happenings at server needs to notify to
the client. So how do we achieve it? Previously we used to write JavaScript
polling for this. But this polling is buggy and needs lot of error handling and
it also not really real time it has some delay.
SignalR library provide this facility of notifying client
when something happens at server.
SignalR uses Web Sockets and Logrolling whichever is best
suited by the browser.
You can find more information on Web Sockets and
Logrolling here and here.
Normal HTTP request response flow
 |
Client makes request to server and server responds to the
client.
Old age solution for notifying
client
|
Client is making the request to the server after each
timer interval; timer is implemented at client side
SignalR Async flow for notifying
client
Client makes asycn request to the client; Server waits
for some event to occur on occurring the event server notifies the all clients
Application development using
SignalR library
SignalR has different component like
·
SignalR
·
SignalR.Server
·
SignalR.Js
·
SignalR.Client
To
develop the ASP.NET real time web application we need to install SignalR
package from Nuget. To do this run the following command in Package Manager Console
PM>
install-package SignalR
 |
Installed the SignalR from Nuget
Start VS2010 and create new Web Site project
(File->New->Web Site..) and run the command to install SignalR package.
After running the above command it will add SignalR references and SignalR JS
to your application as shown below.
Create web site project
References
of SignalR JS and SignalR dll
Server Side code
We will be developing chat application so let us add
class with name Chat as shown below
Following are some notable points about the code
1.
This
class file has reference to SignalR.Hubs.
2.
Chat
class has attribute HubName "chat" this is very important and
required; This says that this is a hub for the SignalR and SignalR JS
client shall call this class method.
3.
Chat
class has one method Send with attribute HubMethodName "send"; This
says that SignalR JS client calls this method asynchronously.
4.
Let
us look at the implementation of the Send method this contain signal line
Clients.addMessage(message);
Here Clients is dynamic
variable; and addMessage shall be resolved at a runtime. When this method is
called subscribed method of the clients shall be get called.
Client side code
At client side create
UI like shown below
It has one bullet list
with id messages, one text box with id msg and one button with id broadcast as
shown in the image above.
Let us see the client
JavaScript , Following is the JavaScript's are included.
1.
jquery-1.7.2.js
This is required as SignalR JS requires
JQuery. Please make sure that you have latest version of Jquery included.
2.
json2.js
This is required for working SignalR JS client in IE 8 + browsers.
3.
jquery.signalR.js
This is SignalR JS client.
4.
Following
line is most important
<script
type="text/javascript" src='<%=
ResolveClientUrl("~/signalr/hubs") %>'></script>
This is required
because at run time SignalR creates JavaScript proxy for the server at the
location ~/signalr/hubs; To create this proxy it uses the attributes given in
server code. If you do not include this path or include it incorrectly SignalR
will not find proxy and will not be able to run. you can look the proxy
generated in browser by entering the URL <You server path>/signalr/hubs;
as below
|
Let us see JavaScript
written as follows
1.
First
line var chat = $.connection.chat; creates connection to the server side Chat
class. Please note that "chat" here is the same as the HubName
attribute.
2.
Next
Line
$.connection.hub.start({ transport: 'auto' }, function () {
// alert('connected');
});
It opens the
connection with transport auto and function specified there gets called once
the connection is established.
3.
Next
piece of code is
$("#broadcast").click(function () {
// alert($("#msg").val());
chat.send($("#MainContent_userName").text() +
$("#msg").val());
$("#msg").val('')
});
This code is get
called when user clicks broadcast button; and chat.send() method calls the
server side Chat.Send method. Please note that "send" method here is
same as the HubMethodName attribute in server side code.
4.
Next
code
chat.addMessage = function (message) {
$('#messages').append('<li>' + message + '</li>');
};
It specifies when
server calls addMessage method then function should get called this function displays message in bulleted
list. Please note that we have added addMessage method to dynamic variable
Clients in the server code.
So, Now you have
developed the application What next? Let us run it. Run the application in two
separate browser as shown below; Enter your name and click Enter Chat room
button. For testing in both browsers I have taken one as IE and other as
Firefox.
As soon as you type
message in one window and click send button it will be displayed in both the
window; you can try opening more windows.
You can find the
running sample application here.
