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 new canvas and leave this?
You can share the link of the new canvas to draw with friends
Loading... Please wait