Buildstarted · July 9, 2014 17:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <title></title>
    <style type="text/css">
        .shape {
            height: 50px;
            width: 50px;
            position: absolute;
        }
    </style>
 </head>
    <body>
        <button disabled>Add shape</button>

        <script src="/Scripts/jquery-2.1.1.min.js"></script>
        <script src="/Scripts/jquery-ui-1.10.4.min.js"></script>
        <script src="/Scripts/jquery.signalR-2.1.0.min.js"></script>
        <script src="/signalr/js"></script>
    
        <script>
            (function(document) {
                var shapeHub = $.connection.shapeHub;

                function addShape(x, y, shapeId, color) {
                    var shape = $("<div>")
                        .attr("id", shapeId)
                        .addClass("shape")
                        .css({
                            background: color,
                            top: y + "px",
                            left: x + "px"
                        });

                    $("body").append(shape);

                    shape.draggable({
                        drag: function () {
                            var loc = shape.offset();
                            shapeHub.server.move(loc.left, loc.top, shape.attr("id"));
                        }
                    });

                }

                shapeHub.client.move = function (x, y, shape) {
                    $("#" + shape).css({
                        top: y + "px",
                        left: x + "px"
                    });
                };

                shapeHub.client.add = function(x, y, shapeId, color) {
                    addShape(x, y, shapeId, color);
                };

                $.connection.hub.start()
                    .done(function() {
                        $(document).on("click", "button", function() {
                            var id = "shape-" + Date.now();
                            var color = "#" + Math.floor(Math.random() * 16777215).toString(16);

                            addShape(0, 0, id, color);
                            shapeHub.server.add(0, 0, id, color);
                        });

                        $("button").removeAttr("disabled");
                    });
            })(window.document);
        </script>
    </body>
 </html>
diff --git a/ShapeHub.cs b/ShapeHub.cs
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using System.Web;
 using Microsoft.AspNet.SignalR;

 namespace MoveShapesDemo
 {
    public class Shape
    {
        public float X { get; set; }
        public float Y { get; set; }
        public string Id { get; set; }
        public string Color { get; set; }
    }

    public class ShapeHub : Hub
    {
        private static Dictionary<string, Shape> _shapes = new Dictionary<string, Shape>();

        public override Task OnConnected()
        {
            foreach (var shape in _shapes.Values)
            {
                Clients.Caller.add(shape.X, shape.Y, shape.Id, shape.Color);
            }

            return base.OnConnected();
        }

        public void Move(float x, float y, string shapeId)
        {
            Clients.Others.move(x, y, shapeId);
            _shapes[shapeId].X = x;
            _shapes[shapeId].Y = y;
        }

        public void Add(int x, int y, string shapeId, string backgroundColor)
        {
            Clients.Others.add(x, y, shapeId, backgroundColor);
            _shapes.Add(shapeId, new Shape() { X = x, Y = y, Id = shapeId, Color = backgroundColor });
        }
    }
 }
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	<style type="text/css">
	.shape {
	height: 50px;
	width: 50px;
	position: absolute;
	}
	</style>
	</head>
	<body>
	<button disabled>Add shape</button>

	<script src="/Scripts/jquery-2.1.1.min.js"></script>
	<script src="/Scripts/jquery-ui-1.10.4.min.js"></script>
	<script src="/Scripts/jquery.signalR-2.1.0.min.js"></script>
	<script src="/signalr/js"></script>

	<script>
	(function(document) {
	var shapeHub = $.connection.shapeHub;

	function addShape(x, y, shapeId, color) {
	var shape = $("<div>")
	.attr("id", shapeId)
	.addClass("shape")
	.css({
	background: color,
	top: y + "px",
	left: x + "px"
	});

	$("body").append(shape);

	shape.draggable({
	drag: function () {
	var loc = shape.offset();
	shapeHub.server.move(loc.left, loc.top, shape.attr("id"));
	}
	});

	}

	shapeHub.client.move = function (x, y, shape) {
	$("#" + shape).css({
	top: y + "px",
	left: x + "px"
	});
	};

	shapeHub.client.add = function(x, y, shapeId, color) {
	addShape(x, y, shapeId, color);
	};

	$.connection.hub.start()
	.done(function() {
	$(document).on("click", "button", function() {
	var id = "shape-" + Date.now();
	var color = "#" + Math.floor(Math.random() * 16777215).toString(16);

	addShape(0, 0, id, color);
	shapeHub.server.add(0, 0, id, color);
	});

	$("button").removeAttr("disabled");
	});
	})(window.document);
	</script>
	</body>
	</html>
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Threading.Tasks;
	using System.Web;
	using Microsoft.AspNet.SignalR;

	namespace MoveShapesDemo
	{
	public class Shape
	{
	public float X { get; set; }
	public float Y { get; set; }
	public string Id { get; set; }
	public string Color { get; set; }
	}

	public class ShapeHub : Hub
	{
	private static Dictionary<string, Shape> _shapes = new Dictionary<string, Shape>();

	public override Task OnConnected()
	{
	foreach (var shape in _shapes.Values)
	{
	Clients.Caller.add(shape.X, shape.Y, shape.Id, shape.Color);
	}

	return base.OnConnected();
	}

	public void Move(float x, float y, string shapeId)
	{
	Clients.Others.move(x, y, shapeId);
	_shapes[shapeId].X = x;
	_shapes[shapeId].Y = y;
	}

	public void Add(int x, int y, string shapeId, string backgroundColor)
	{
	Clients.Others.add(x, y, shapeId, backgroundColor);
	_shapes.Add(shapeId, new Shape() { X = x, Y = y, Id = shapeId, Color = backgroundColor });
	}
	}
	}