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