Tutorial: Your first ASP.NET SignalR project

Post to Twitter

Today we will go over the steps to get up and running with SignalR. SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates. We will build a cheesy Twitter clone called HalfTwit which will take 70 characters and share the comment for everyone else to see in real-time. I think you’ll find SignalR to be pretty slick and easy to use.


To get started you will need a few things installed:

Note: I’m using Windows 8 but this should work on all supported Visual Studio 2012 supported operating systems.

Start Visual Studio 2012 and create an ASP.NET Empty Web Application and name your project: HalfTwit

Project Setup

Right-click on the project and select from the menu the option to Manage NuGet Packages.

Opening NuGet

Once the dialog opens search for: Microsoft.AspNet.SignalR

Adding SignalR to the Project

Press the Install button and let SignalR install.

Installing SignalR

While we are in NuGet let’s also update JQuery to 2.x.

Update JQuery to 2.x

Right-click on the project in Visual Studio and select the Add and then the SignalR Hub Class option. Name the class: HalfTwitHub.cs

Adding the SignalR Hub Class

Note: If you want to know more about what a Hub does read this article (towards the bottom).

We need to add a Global.asax file so right-click on the project and select Add and then Global Application Class (leave the name as Global).

Adding the Global.asax file

We will add some code to the Global.asax file to register the default hub’s route which is: signalr/hubs/ Modify Application_Start to look like this:

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

Make sure to add these to the top of the Global.asax file:

using System.Web.Routing;
using Microsoft.AspNet.SignalR;

Now go into the HalfTwitHub.cs file and modify it like so:

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

namespace HalfTwit
{
    public class HalfTwitHub : Hub
    {
        public void PublishATwit(string twitMessage)
        {
            Clients.All.broadcastATwit(twitMessage);
        }
    }
}

Believe it or not but that is all we need on the server to talk to our soon to be built HTML JQuery client, this is because a dynamically created file will handle the communication to and from the client.

Let’s move onto the HTML JQuery client. Below the next two images is the code you can use to send real-time Twits to other people. The webpage is nothing exciting but serves the purpose to demo this. Make sure to add a new HTML file by right-clicking on the project and selecting Add and then HTML Page and call it index.

Adding the HTML page

Right-click on the new HTML page and select Set As Start Page.

Setting the new HTML file a Start Page

<!DOCTYPE html>
<html>
<head>
    <title>HalfTwit</title>
    <style type="text/css">
        body {
            margin: 15px;
        }
    </style>
</head>
<body>
    <input type="text" id="twitMessage" maxlength="70" />
    <input type="button" id="publishTwitMessage" value="Publish!" />
    <ul id="allTwits" />

    <script src="/Scripts/jquery-2.0.0.js" ></script>
    <script src="/Scripts/jquery.signalR-1.0.1.js"></script>
    <script src="/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var hub = $.connection.halfTwitHub;

            hub.client.broadcastATwit = function (twitMessage) {
                $('#allTwits').append('<li>' + twitMessage + '</li>');
            };

            $.connection.hub.start().done(function () {
                $('#publishTwitMessage').click(function () {
                    hub.server.publishATwit($('#twitMessage').val());
                });
            });
        });
    </script>
</body>
</html>

Note: Be careful in the JavaScript, notice that the halfTwitHub starts lowercase and in the C# it is HalfTwitHub.

Run the project (press F5) and you should be able to bring up two web browsers. I used Firefox and Internet Explorer.

Results with two web browsers

Pretty easy and you can definitely do some cool things with this.

Post to Twitter

This entry was posted in ASP.NET, C#, Open Source. Bookmark the permalink.