Introduction

You can download the code here

This is a very simple example of how we can use SignalR, based on the microsoft virtual academy course "Building apps with ASP.NET 4.5", it can be used like a guide to build a more complex web app. This solution requires NuGet packages to be downloaded. Visual Studio will download the necessary packages automatically. This solution is designed for Visual Studio 2012

Description

This application displays a div shape that the users can drag. The position of the shape in all other browsers will then be updated to match the position of the dragged shape.

As the server component this web page contains a C# implementation of the SignalR Hub class , and as the client component an HTML page using JQuery .

This concepts are associated with applications in real-time gaming and other simulation applications.

Index.html

HTML

01.<!DOCTYPE html> 
02.<html xmlns="http://www.w3.org/1999/xhtml"> 
03.<head> 
04.    <title>SignalR Example</title> 
05.       
06.        #shape { 
07.            width: 100px; 
08.            height: 100px; 
09.            background-color: #FF0000; 
10.            cursor:move; 
11.        } 
12.  
13.         #count { 
14.             font-size:60px; 
15.             color:#cccccc; 
16.             float:right; 
17.         } 
18.      
19.</head> 
20.<body> 
21.   
22.    <div id="count">0</div> 
23.    <div id="shape"></div> 
24.  
25.    <script src="Scripts/jquery-1.6.4.js"></script> 
26.    <script src="Scripts/jquery-ui-1.10.3.js"></script> 
27.    <script src="Scripts/jquery.signalR-1.1.3.js"></script> 
28.    <script src="/signalr/hubs"></script> <!--this is for automatically  
29.generate a javascript proxy class for our server class--> 
30.    <script> 
31.  
32.        $(function () { 
33.  
34.            var hub = $.connection.moveShape, //set hub with the server side class 
35.               $shape = $("#shape"); 
36.  
37.  
38.  
39.            hub.client.usersConnected = function (numUsers) { //this instanciate the  
40.usersConnected function receiving the numUsers parameter which is the number of users connected 
41.               $("#count").text(numUsers); //show the number of users connected inside a div 
42.            }; 
43.  
44.  
45.             
46.  
47.            hub.client.shapeMoved = function (x, y) { //this instanciate the shapeMoved function  
48.receiving x, y  
49.                $shape.css({ left: x, top: y }); //this moves the shape in the clients to  
50.the coords x, y  
51.            }; 
52.  
53.            $.connection.hub.start().done(function () {//when the connection is ready,  
54.we going to make the shape draggable 
55.                $shape.draggable({ 
56.                    drag: function () { //when the user drag the shape, we going to  
57.send to the server the x, y values 
58.                        hub.server.moveShape(this.offsetLeft, this.offsetTop || 0); 
59.                    } 
60.                }); 
61.            }); 
62.        }); 
63.  
64.    </script> 
65.</body> 
66.</html>

MoveShapeHub.cs

01.using Microsoft.AspNet.SignalR; 
02.using Microsoft.AspNet.SignalR.Hubs; 
03.using System; 
04.using System.Collections.Generic; 
05.using System.Linq; 
06.using System.Threading.Tasks; 
07.using System.Web; 
08.  
09.namespace SignalR.MoveShape 
10.{ 
11.      
12.    public static class UserHandler //this static class is to store the number of  
13.users conected at the same time 
14.    { 
15.        public static HashSet<string> ConnectedIds = new HashSet<string>(); 
16.    } 
17.  
18.    [HubName("moveShape")]   //this is for use a name to use in the client 
19.    public class MoveShapeHub : Hub 
20.    { 
21.        public void moveShape(int x, int y) // this method will be called from  
22.the client, when the user drag/move the shape 
23.        { 
24.              
25.            Clients.Others.shapeMoved(x, y); // this method will send the coord x, y  
26.to the other users but the user draging the shape 
27.            
28.        } 
29.  
30.        public override Task OnConnected() //override OnConnect, OnReconnected and OnDisconnected  
31.to know if a user is connected or disconnected 
32.        { 
33.            UserHandler.ConnectedIds.Add(Context.ConnectionId); //add a connection id to the list 
34.            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); //this will send to ALL the clients  
35.the number of users connected 
36.            return base.OnConnected(); 
37.        } 
38.  
39.        public override Task OnReconnected() 
40.        { 
41.            UserHandler.ConnectedIds.Add(Context.ConnectionId); 
42.            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
43.            return base.OnConnected(); 
44.        } 
45.  
46.        public override Task OnDisconnected() 
47.        { 
48.            UserHandler.ConnectedIds.Remove(Context.ConnectionId); 
49.            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
50.            return base.OnDisconnected(); 
51.        } 
52.  
53.  
54.          
55.    } 
56.}

Globa.asax.cs

01.using System; 
02.using System.Collections.Generic; 
03.using System.Linq; 
04.using System.Web; 
05.using System.Web.Routing; 
06.using System.Web.Security; 
07.using System.Web.SessionState; 
08.  
09.namespace SignalR 
10.{ 
11.    public class Global : System.Web.HttpApplication 
12.    { 
13.  
14.        public void Application_Start() 
15.        { 
16.            // Register the default hubs route: ~/signalr 
17.            RouteTable.Routes.MapHubs(); 
18.        } 
19.  
20.        protected void Session_Start(object sender, EventArgs e) 
21.        { 
22.  
23.        } 
24.  
25.        protected void Application_BeginRequest(object sender, EventArgs e) 
26.        { 
27.  
28.        } 
29.  
30.        protected void Application_AuthenticateRequest(object sender, EventArgs e) 
31.        { 
32.  
33.        } 
34.  
35.        protected void Application_Error(object sender, EventArgs e) 
36.        { 
37.  
38.        } 
39.  
40.        protected void Session_End(object sender, EventArgs e) 
41.        { 
42.  
43.        } 
44.  
45.        protected void Application_End(object sender, EventArgs e) 
46.        { 
47.  
48.        } 
49.    } 
50.}

Source Code Files

Global.asax - The global application class, used to register the route to the autogenerated hubs proxy.
index.html - The client application, written using JavaScript and the JQuery library.
MoveShapeHub.cs - The server application, written as an implementation of a SignalR hub.