What's this? Draw

0 users online, 0 in this canvas

A collaborative drawing experiment with SignalR by Korreca

Hint: Seems that you are drawing alone, click this to open another window and see how it works in real time
Toggle navigation

But how does this works? Simple answer, Magic! Long answer, here

How does this works?

I told you, Magic!

No, seriously, just SignalR (and a bit of magic).

After installing SignalR via NuGet using Install-Package Microsoft.AspNet.SignalR you just have to follow a few steps.

First, you have to add the OWIN Startup Class and write one line of code:

    using Microsoft.Owin;
    using Owin;
    [assembly: OwinStartup(typeof(SignalRChat.Startup))]
    namespace SignalRChat
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // The LINE OF CODE
                app.MapSignalR();               
            }
        }
    }

The next step is to create our SignalR Hub with the broadcast method:

    using Microsoft.AspNet.SignalR;
    public class DrawHub : Hub
    {
        public void DrawMove(int[] p)
        {
            // Call the client method to draw the line.
            Clients.Others.DrawMove(p);
        }
    }

Wait, what???

Yes, you can call javascript methods from the server!

Setting up our html:

    <script src="Scripts/jquery-2.1.3.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>

Now, you need to initialize the hub by name in the client side:

    // Declare a proxy to reference the hub by class name. 
    var drawHub = $.connection.drawHub;

I told you, Magic!

Just get your server hub via the $.connection object. SignalR does all the work.

Next step, write the client method:

    // Create client functions that the hub can call to broadcast messages.
    drawHub.client.DrawMove = function (p) {
        // Call to canvas paint function
        DrawMove(p);
    };

And finally, call the server method from the client side (again, Magic!)

    // oX = original X
    // oY = original Y
    // x = current X
    // y = current Y
    // w = canvas.lineWidth
    // c = canvas.strokeStyle
    drawHub.server.drawMove([oX, oY, x, y, w, c]);

Wow... That was a lot of work... Nah, just kidding!

If you want to know more about SignalR, you can visit their website at http://signalr.net/ or the ASP.NET dedicated site at http://www.asp.net/signalr with lots of docs, samples & tutorials.

Also, you can contact me on Twitter

Create a private canvas

¿Create a new canvas and leave this?

You can share the link of the new canvas to draw with friends

Share your private canvas!

Copy & share the following link:

Loading... Please wait

Loading... Please wait

Please, select an image to load