Click here to Skip to main content
15,072,691 members
Articles / SignalR
Article
Posted 16 Jan 2015

Tagged as

Stats

16.1K views
11 bookmarked

SignalR Hello World (That is not a chat app)

Rate me:
Please Sign up or sign in to vote.
4.80/5 (4 votes)
16 Jan 2015CPOL3 min read
SignalR Hello World (That is not a chat app)

I have been wanting to try out SignalR for a while now and finally came up with an idea that is simple enough to start with (that is not a chat application).

I am not going to go into the details of how SignalR works, just show you the code to get started. If you have never heard about SignalR, read the first two paragraphs here.

Our app will do the following:

  • The User navigates to a page on their desktop. We will display a QR code on the page.
  • The User will scan the QR code with their smart phone and get redirected to a page on their mobile browser.
  • The User will then see live orientation data of their phone on their desktop.

To keep the post short, I am only going to show you the code relevant to SignalR. You can checkout the demo and the source code for the full details.

Let's Get Started

Open up Visual Studio and create a new ASP.NET MVC 5 application.

Grab the following library via nuget

  • Microsoft ASP.NET Web SignalR

On the Server

The first thing we need to do is hook-up SignalR to our app start-up. We do this by creating a file and adding the following code. When the app starts up, the Configuration function will automatically get called. *Note: SneakySignal is the name of the project and has nothing to do with SignalR.

C#
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SneakySignal.Startup))]
namespace SneakySignal
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Next, we need to add the code that will handle the communication between server and client. For now, all you need to know is that SignalR uses the concept of hubs. You can read more about it here.

Create the MotionHub.cs class that inherits from Hub.

C#
using Microsoft.AspNet.SignalR;
namespace SneakySignal
{
    public class MotionHub : Hub
    {
        //Desktop and phone uses this to get their connection id
        public string GetConnectionId()
        {
            return Context.ConnectionId;
        }

        //Called by the phone
        //Tells the desktop that the phone wants to connect
        public void ClientConnected(string connectionId)
        {
            var clientId = Context.ConnectionId;
            Clients.Client(connectionId).clientConnected(clientId);
        }

        //Called by the desktop
        //Tells the phone that it is connected and can start sending data
        public void StartExecution(string connectionId)
        {
            Clients.Client(connectionId).startExecution();
        }

        //Called by the phone
        //Tells the desktop that the orientation has changed
        public void OrientationChanged(string connectionId, OrientationData orientationData)
        {
            Clients.Client(connectionId).orientationChanged(orientationData);
        }
    }

    public class OrientationData
    {
        public decimal Alpha { get; set; }
        public decimal Beta { get; set; }
        public decimal Gamma { get; set; }
    }
}

As you can see, we only have to write the business logic specific to our app as SignalR handles all the connection management.

Last but not least, add the following lines in your _layout.cshtml file.

C#
/Scripts/jquery.signalR-2.1.2.min.js
/signalr/js

/signalr/js is a convention used by SignalR. On build, our MobileHub will generate some JavaScript that will be found on this route.

Now for the client side implementations.

Desktop Client

C#
var hub = $.connection.motionHub;
//register mobile and tell it to start executing
hub.client.ClientConnected = function (clientId) {
    hub.server.startExecution(clientConnectionId);
};
//update orientation
hub.client.orientationChanged = function (orientation) {

};

//connect to server
$.connection.hub.start().done(function () {
    hub.server.getConnectionId().done(function (desktopConnectionId) {
        //show QR code with url containing desktop connection id
    });
})

The first thing you will see is that we get our specific hub from $.connection.motionHub. We then subscribe to the clientConnected and orientationChanged methods that we specified in our MotionHub.cs file.

The last thing is to connect to the server using $.connection.hub.start(). When we are connected to the server, we ask it to provide us with our connection id.

Mobile Client

C#
var hub = $.connection.motionHub;

hub.client.StartExecution = function () {
  window.addEventListener("deviceorientation", function(orientation){
        hub.server.orientationChanged(desktopConnectionId, orientation);
  });
};
//connect to server
$.connection.hub.start().done(function () {
    hub.server.clientConnected(desktopConnectionId).done();
});

The JavaScript on the mobile side is very similar. First, we subscribe to startExecution. In this method, we add an event listener that listens for the deviceorientation event. On an event, we call orientationChanged on the server with the new orientation.

All that is left is to connect to the server and tell the relevant desktop that we want to connect to it.

*Note. I left out a lot of logic like event throttling, etc. to keep it concise.

To summarize what is actually happening, have a look at the image below:


And That's It

I was impressed by how simple it is to get something awesome done so easily. Obviously, there is a lot more to SignalR and what you can do with it, but for a hello world, this really turned out great. Jump over to the demo and have a look.


This post was first published on blog.entelect.co.za

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

SneakyPeet
Software Developer (Senior)
Unknown
I write about Domain Driven Design, Clean Code and .net

Comments and Discussions

 
Bugerror Pin
Hassan F.9-Jun-15 22:38
professionalHassan F.9-Jun-15 22:38 
Questionimpressive Pin
Adam_Finster17-Jan-15 14:36
MemberAdam_Finster17-Jan-15 14:36 
AnswerRe: impressive Pin
SneakyPeet18-Jan-15 7:35
MemberSneakyPeet18-Jan-15 7:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.