I’ve covered the steps needed to host SignalR within a web application, but we’ve also seen we can connect to SignalR through a .NET client (in my case a simple Console app.). So next we’ll cover self-hosting SignalR.

Requirements

At the time of writing you’ll need to install the following NuGet packages from Package Manager Console in Visual Studio

Install-Package Microsoft.AspNet.SignalR
Install-Package Microsoft.Owin.Hosting -Pre
Install-Package Microsoft.Owin.Host.HttpListener -Pre

You can delete the scripts folder added by SignalR, we’re really just after the assemblies

Microsoft.AspNet.SignalR.Core
Microsoft.AspNet.SignalR.Owin
Microsoft.Owin.Host.HttpListener
Microsoft.Owin.Hosting
Owin

So if you feel like only deploying the minimal assemblies you can remove anything else installed from those packages.

Edit: Since writing the above a couple of things seems to have changed on those packages, you’ll now need Microsoft.Owin assembly and WebApplication (in the below code) is now WebApp.

The Server

public class MyHub : Hub
{
   public void Send(string message)
   {
      Clients.All.sendMessage(message);
   }
}

internal class MyStartUp
{
   public void Configuration(IAppBuilder app)
   {
      // the line below works fine with the console client but not the browser client
      // app.MapHubs();
      // use the following to enable the browser client to work with the server
      HubConfiguration config = new HubConfiguration();
      config.EnableCrossDomain = true;
      config.EnableDetailedErrors = true;
      app.MapHubs(config);   
   }
}

class Program
{
   // just for demo purposes, will "beep" every 5 seconds
   private static Timer timer = new Timer(o =>
   {
      var context = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
      context.Clients.All.sendMessage(DateTime.Now.ToLongTimeString() + " beep");
   });

   static void Main(string[] args)
   {
      using (WebApplication.Start<MyStartUp>("http://localhost:9100"))
      {
         // just for this demo
         TimeSpan ts = TimeSpan.FromSeconds(5);
 	 timer.Change(ts, ts);

	 Console.WriteLine("Server is running, Press <Enter> to stop");
	 Console.ReadLine();
      }
   }
}

I’ve listed all the code above, it’s all pretty self-explanatory. The URL in the start method is the URL for the server and port etc. The timer is solely used to send out a message every 5 seconds for out client to see. I’ve listed the code for a simple client below (see my post on creating a .NET client for SignalR if you need more info. on this).

Client

A simple .NET Console client…

static void Main(string[] args)
{
   HubConnection connection = new HubConnection("http://localhost:9100");
   IHubProxy proxy = connection.CreateHubProxy("myHub");
   connection.Start().ContinueWith(task =>
   {
      proxy.Invoke("Send", ".NET Client Connected");

      proxy.On<string>("sendMessage", (message) =>
      {
         Console.WriteLine(message);
      });
   });
   Console.Read();
}

If, you wish to access the server hub via JavaScript then the following is a simple example of the required JavaScript, note we create the proxy to the hub in the same way to the way we do this in the console client.

<script>
   $(function () {
      var connection = $.hubConnection("http://localhost:9100");
      var proxy = connection.createHubProxy('myHub');

      proxy.on("sendMessage", function (message) {
         $('#discussion').append('<li><strong>' + message + '</strong></li>');
      });

      connection.start().done(function () {
         proxy.invoke("Send", "Webpage client");
      }).fail(function () {
         $('#discussion').append('<li><strong>Failed to start</strong></li>')
      });
   });
</script>

Note: The at least one proxy.on event handler must be set before the connection.start or you will be able to send messages but not receive them (see http://www.asp.net/signalr/overview/hubs-api/hubs-api-guide-javascript-client#establishconnection for more information).

Here’s the minimal steps required to create a SignalR server.

• Create a new ASP.NET Empty Web Applications
• Use NuGet to add Microsoft ASP.NET SignalR to the project
• Right mouse click on the project select Add | Global Application Class
• Edit the Global.asax.cs file to look like the following

  public class Global : System.Web.HttpApplication
  {
     protected void Application_Start(object sender, EventArgs e)
     {
        RouteTable.Routes.MapHubs();
     }
  }
  

• A a new class file named MyHub and edited it to look like this

  public class MyHub : Hub
  {
     public void Send(string message)
     {
        Clients.All.sendMessage(message);
     }
  }
  

• Finally we need an index.html pages so right mouse click on the project and select Add | HTMLPage – name it index and press ok. Then edit the file as follows

  <!DOCTYPE html>
  <html>
  <head>
      <title>Minimal SignalR</title>
  
      <script src="../Scripts/jquery-1.6.4.js"></script>
      <script src="../Scripts/jquery.signalR-1.1.2.js"></script>
      <script src="../signalr/hubs"></script>
  
      <script>
          $(function () {
             var monitor = $.connection.myHub;
             monitor.client.sendMessage = function (message) {
                $('#discussion').append('<li><strong>' + message + '</strong></li>');
            }
            $.connection.hub.start().done(function () {
                monitor.server.send("Starting...");
            });
          });
      </script>
  </head>
  <body>
      <h2>Minimal SignalR</h2>
  
      <div class="container">
         <ul id="discussion"></ul>
     </div>
  </body>
  
  </html>
  

The above has all the parts required to create a SignalR capable server and script in the HTML file but it doesn’t do anything, that’s for the user to implement, but just as an example to give something to see, let’s edit Global.asax.cs again and change the code to the following

private Timer timer = new Timer(o =>
{
   var context = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
   context.Clients.All.sendMessage(DateTime.Now.ToLongTimeString() + " beep");
});

protected void Application_Start(object sender, EventArgs e)
{
   RouteTable.Routes.MapHubs();

   TimeSpan ts = TimeSpan.FromSeconds(5);
   timer.Change(ts, ts);
}

The code above will simply send a message every 5 seconds to any listening clients.

Note: You’ll notice how the JavaScript has the MyHub methods etc. in camel case, the proxy automatically does this for us. Also notice the JavaScript call, monitor.server.send uses the Hub method to push a message out when the script starts whereas we subscribe our function to a “known” name, one used in the MyHub (Clients.All.sendMessage). As this is dynamic there’s no compile time check on this, so make sure you get the name and case correct.

I’ve been using SignalR from a browser but decided I wanted to try the .SignalR .NET Client code as well to see how to implement such an app. I’m not going to cover the server exception to show the Hub

public class MonitorServiceHub : Hub
{
   public void ProjectUpdate(string message)
   {
      Clients.All.projectUpdated(message);
   }
}

It’s very simple as you see. This pushed messages out to anything subscribed to the “projectUpdated” function.

So in JavaScript we have the following for the browser

<script>
var monitor = $.connection.monitorServiceHub;
monitor.client.projectUpdated = function (message) {
   $('#latest').append('<li>' + message + '</li>');
}
$.connection.hub.start().done(function () {
   monitor.server.projectUpdate("Starting Monitor");
});
</script>

So how to we create a SignalR client ?

• Create a new Console application in Visual Studio 2012
• Use NuGet to add the Microsoft ASP.NET SignaalR Client
• Now, simple add the following code

  static void Main(string[] args)
  {
     HubConnection connection = new HubConnection("http://localhost/test/");
     IHubProxy proxy = connection.CreateHubProxy("monitorServiceHub");
     connection.Start().ContinueWith(task =>
     {
        proxy.Invoke("ProjectUpdate", ".NET Client Connected");
  
        proxy.On<string>("projectUpdated", (message) =>
        {
           Console.WriteLine(message);
        });
     });
     Console.Read();
  }
  

Obviously replace the http://localhost/test/ with the location of your server. This line creates the connection (as the name suggests) and then we create the proxy. Notice we use the camel case name as created by the proxy. Next we start the connection and set up a ContinueWith where the communications takes place. I’ve added code to send a message out (just to demonstrate how) using Invoke, so all clients will see when the .NET client connects. Notice this uses the method name on the class not the camel case naming. Finally we in essence subscribe to the projectUpdated messages/function and simply output whatever message we get to the Console.