C# Online Compiler | .NET Fiddle

Model

​x
 
​

<!DOCTYPE html>
<html>
<head>
    <title>SignalR MoveShape Demo</title>
    <style>
        #shape {
            width: 100px;
            height: 100px;
            background-color: #FF0000;
        }
    </style>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.1.0.min.js"></script>
<script src="https://github.com/JustMaier/angular-signalr-hub/blob/master/signalr-hub.js"></script>
	
<script>
 $(function () { 
 
            var hub = $.connection.moveShape, //set hub with the server side class 
               $shape = $("#shape"); 
 
 
 
            hub.client.usersConnected = function (numUsers) { //this instanciate the  
usersConnected function receiving the numUsers parameter which is the number of users connected 
               $("#count").text(numUsers); //show the number of users connected inside a div 
            }; 
 
 
            
 
            hub.client.shapeMoved = function (x, y) { //this instanciate the shapeMoved function  
receiving x, y  
                $shape.css({ left: x, top: y }); //this moves the shape in the clients to  
the coords x, y  
            }; 
 
            $.connection.hub.start().done(function () {//when the connection is ready,  
we going to make the shape draggable 
                $shape.draggable({ 
                    drag: function () { //when the user drag the shape, we going to  
send to the server the x, y values 
                        hub.server.moveShape(this.offsetLeft, this.offsetTop || 0); 
                    } 
                }); 
            }); 
        }); 
</script>
    
    <div id="shape" />
</body>
</html>

View

 
<!DOCTYPE html>
<html>
<head>
    <title>SignalR MoveShape Demo</title>
    <style>
        #shape {
            width: 100px;
            height: 100px;
            background-color: #FF0000;
        }
    </style>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.1.0.min.js"></script>
<script src="https://github.com/JustMaier/angular-signalr-hub/blob/master/signalr-hub.js"></script>
    
<script>
 $(function () { 
 
            var hub = $.connection.moveShape, //set hub with the server side class 
               $shape = $("#shape"); 
 
 
 
            hub.client.usersConnected = function (numUsers) { //this instanciate the  
usersConnected function receiving the numUsers parameter which is the number of users connected 
               $("#count").text(numUsers); //show the number of users connected inside a div 
            }; 
 
 
            
 
            hub.client.shapeMoved = function (x, y) { //this instanciate the shapeMoved function  
receiving x, y  
                $shape.css({ left: x, top: y }); //this moves the shape in the clients to  
the coords x, y  
            }; 
 
            $.connection.hub.start().done(function () {//when the connection is ready,  
we going to make the shape draggable 
                $shape.draggable({ 
                    drag: function () { //when the user drag the shape, we going to  
send to the server the x, y values 
                        hub.server.moveShape(this.offsetLeft, this.offsetTop || 0); 
                    } 
                }); 
            }); 
        }); 
</script>
    
    <div id="shape" />
</body>
</html>
​

using Microsoft.AspNet.SignalR; 
using Microsoft.AspNet.SignalR.Hubs; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Threading.Tasks; 
using System.Web; 
 
namespace SignalR.MoveShape 
{ 
     
    public static class UserHandler
    { 
        public static HashSet<string> ConnectedIds = new HashSet<string>(); 
    } 
 
    [HubName("moveShape")]
    public class MoveShapeHub : Hub 
    { 
        public void moveShape(int x, int y)
        { 
             
            Clients.Others.shapeMoved(x, y); 
           
        } 
 
        public override Task OnConnected()
        { 
            UserHandler.ConnectedIds.Add(Context.ConnectionId);
            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
            return base.OnConnected(); 
        } 
 
        public override Task OnReconnected() 
        { 
            UserHandler.ConnectedIds.Add(Context.ConnectionId); 
            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
            return base.OnConnected(); 
        } 
 
        public override Task OnDisconnected() 
        { 
            UserHandler.ConnectedIds.Remove(Context.ConnectionId); 
            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
            return base.OnDisconnected(); 
        } 
 
 
         
    } 
}

Controller

 
using Microsoft.AspNet.SignalR; 
using Microsoft.AspNet.SignalR.Hubs; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Threading.Tasks; 
using System.Web; 
 
namespace SignalR.MoveShape 
{ 
     
    public static class UserHandler
    { 
        public static HashSet<string> ConnectedIds = new HashSet<string>(); 
    } 
 
    [HubName("moveShape")]
    public class MoveShapeHub : Hub 
    { 
        public void moveShape(int x, int y)
        { 
             
            Clients.Others.shapeMoved(x, y); 
           
        } 
 
        public override Task OnConnected()
        { 
            UserHandler.ConnectedIds.Add(Context.ConnectionId);
            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
            return base.OnConnected(); 
        } 
 
        public override Task OnReconnected() 
        { 
            UserHandler.ConnectedIds.Add(Context.ConnectionId); 
            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
            return base.OnConnected(); 
        } 
 
        public override Task OnDisconnected() 
        { 
            UserHandler.ConnectedIds.Remove(Context.ConnectionId); 
            Clients.All.usersConnected(UserHandler.ConnectedIds.Count()); 
            return base.OnDisconnected(); 
        } 
 
 
         
    } 
}

View in Full Screen

View IL Code