Introduction

If you haven’t heard of SignalR then you have probably been living under a rock for the past year or so.

SignalR is an Async library for .NET to help build real-time, multi-user interactive web applications.

In other words, it’s kind of a client-servery thing.

So what can we do with it. We can send messages to all the clients that are connected to our server for one.

Let’s try this.

For this post I took the quickstart example on the SignalR wiki.

The server

First thing to do is to setup the server.

For this I created an Empty ASP.Net web Application.

Then I did the Nuget thing.

Install-Package Microsoft.AspNet.SignalR -pre

Then create a Global.asax file.

vb.net
1
2
3
4
5
6
7
8
9
10
11
12
13
Imports System.Web.SessionState
Imports System.Web.Routing
Imports Microsoft.AspNet.SignalR
 
Public Class Global_asax
    Inherits System.Web.HttpApplication
 
    Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
        RouteTable.Routes.MapConnection(Of MyConnection)("echo", "echo/{*operation}")
    End Sub
 
 
End Class
Imports System.Web.SessionState
Imports System.Web.Routing
Imports Microsoft.AspNet.SignalR

Public Class Global_asax
    Inherits System.Web.HttpApplication

    Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
        RouteTable.Routes.MapConnection(Of MyConnection)("echo", "echo/{*operation}")
    End Sub


End Class

this will create the routes that will tell you where you have to go to get your information. As you can see the route echo will use our MyConnection class which we will create next.

vb.net
1
2
3
4
5
6
7
8
9
10
11
Imports Microsoft.AspNet.SignalR
Imports System.Threading.Tasks
 
Public Class MyConnection
    Inherits PersistentConnection
 
    Protected Overrides Function OnReceivedAsync(equest As IRequest, connectionId As String, data As String) As Task
        Return Connection.Broadcast(data)
    End Function
 
End Class
Imports Microsoft.AspNet.SignalR
Imports System.Threading.Tasks

Public Class MyConnection
    Inherits PersistentConnection

    Protected Overrides Function OnReceivedAsync(equest As IRequest, connectionId As String, data As String) As Task
        Return Connection.Broadcast(data)
    End Function

End Class

This is the most basic form. Take the data you recieved and broadcast it to all clients.

Start this project and you should see something like this.

Which at least means our server has started.

Take note of the url you see in your addressbar and remember that for the next session.

The console client

The first thing to do after this is to make a consoleapplication to test if it really works.

Go to your nuget console and copy paste this in. Make sure the nuget console is in the right project first.

Install-Package -pre Microsoft.AspNet.SignalR.Client

And here is my slightly improved version of that console app.

vb.net
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Imports Microsoft.AspNet.SignalR.Client
 
Module Module1
 
    Sub Main()
        Dim connection = New Connection("http://localhost:50865/echo")
 
        AddHandler connection.Received, Sub(data) Console.WriteLine(data)
 
        connection.Start().Wait()
 
        Dim line As String = Nothing
        Console.WriteLine("type anything + enter to send, type exit + enter to exit.")
        While line <> "exit"
            line = Console.ReadLine()
            connection.Send(line).Wait()
        End While
    End Sub
 
End Module
Imports Microsoft.AspNet.SignalR.Client

Module Module1

    Sub Main()
        Dim connection = New Connection("http://localhost:50865/echo")

        AddHandler connection.Received, Sub(data) Console.WriteLine(data)

        connection.Start().Wait()

        Dim line As String = Nothing
        Console.WriteLine("type anything + enter to send, type exit + enter to exit.")
        While line <> "exit"
            line = Console.ReadLine()
            connection.Send(line).Wait()
        End While
    End Sub

End Module

Make sure you use the correct url. You know, the one I told you to remember.
This will show you the incoming messages via a console.writeline using an AddHandler of the Recieved event of the connection.

And it will give you the possibility to send messages.

Build it and go to your output folder where you click on the exe file several times to get several windows open at the same time and start typing in one of them.

You can see the window I have typed in has the message twice and the other clients will have it once.

Now that was easy.

The webclient

It is just as easy to create the weblient.

Just create another Empty ASP.Net web application and create an empty index.html file in that.

Then do the nuget thing again.

And make sure it created a Scripts folder with 5 js files in it.

The important file here is jquery.signalR-1.0.0-alpha1.min.js We will need that soon.

Now copy the following code into the index.html file.

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
  <script src="Scripts/jquery.signalR-1.0.0-alpha1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function () {
          var connection = $.connection('http://localhost:50865/echo');
 
          connection.received(function (data) {
              $('#messages').append('<li>' + data + '</li>');
          });
 
          connection.start();
 
          $("#broadcast").click(function () {
              connection.send($('#msg').val());
          });
      });
  </script>
 
  <input type="text" id="msg" />
  <input type="button" id="broadcast" value="broadcast" />
 
  <ul id="messages">
  </ul>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
  <script src="Scripts/jquery.signalR-1.0.0-alpha1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function () {
          var connection = $.connection('http://localhost:50865/echo');

          connection.received(function (data) {
              $('#messages').append('<li>' + data + '</li>');
          });

          connection.start();

          $("#broadcast").click(function () {
              connection.send($('#msg').val());
          });
      });
  </script>

  <input type="text" id="msg" />
  <input type="button" id="broadcast" value="broadcast" />

  <ul id="messages">
  </ul>
</body>
</html>

Make sure you reference the right jquery.signalr file and that you change the url to the signalr server. You know, that url I told you to remember earlier.

Now you will get a very boring page like this.

But let’s go back to our console app and start typing things in there, and see the magic happen.

And that’s not all you can also do this in the webpage.

Simples.

Conclusion

SignalR is very easy to set up although the doc was wrong in some places. But nothing I couldn’t figure out on my own.