Makale Özeti

SignalR ve Html5 Canvas ile etkileşimli çizim ekranı

Makale

SignalR gerçek zamanlı uygulamalar geliştirmek için yazılmış bir kütüphanedir. Bunun en basit örneği chat sistemidir. Bunun dışında canlı maç sonuçları da buna güzel bir örnektir. Örneğin bir gol olduğu zaman sistemdeki herkese gol haberi gelir. Yani anlık bilgi değişiminde herkes bu değişikliği fark eder. Örnekleri çoğaltmak mümkün. Ben örneğimde SignalR ile Html5 Canvas kullanarak basit bir çizim ekranı oluşturdum.

Sizlere hızlıca alt yapıyı nasıl kuracaz onu göstereceğim.

Bir mvc projesi oluşturup SignalR referansını ekleyelim.Bunun için üst menüden Tool> Library Package Manager > Package Manager console ekranına Install-Package Microsoft.AspNet.SignalR yazıp referansı yükleyelim.
Beraberinde bazı script dosyalarınıda projeye dahil edecek.

Şimdi haberleşmeyi sağlayacak sınıfı yazıyoruz. Bu sınıf Hub sınıfından türemeli. İçinde client tarafından çağırılacak 2 metot var. Burada herhangi bir client servera 4 parametreli bilgiyi gönderdiğinde server gelen bu bilgileri broadcast olarak , yani o an bağlı tüm kullanıcılara bu bilgiyi geri döndürüyor. Buna kendisi de dahil. Metot içinden çağırılan draw metodu client tarafında yazmış olduğumuz javascript kodudur.

 

01 namespace SignalRHtml5.Hubs
02 {
03     public class DrawHub : Hub
04     {
05         public void DrawSomeThings(int x, int y, int z, string w)
06         {
07             Clients.Others.draw(x, y, z, w);
08         }
09  
10         public void ClearCanvas()
11         {
12             Clients.All.clearCanvas();
13         }
14     }
15 }

 

Global.asax içine RegisterRoutes(RouteTable.Routes); kodundan önceRouteTable.Routes.MapHubs(); kodunu yazalım.
Cizim adında controller olusturdum. Index view içine aşağıdaki tanımlamaları yapalım.
Burdaki /signalr/hubs çalışma anında üretilen javascript dosyasıdır. Ayrıca script tanımlamasında en altta olsun.

 

1 <script src="/Scripts/jquery-1.9.1.js"></script>
2 <script src="/Scripts/jquery.signalR-1.0.1.js"></script>
3 <script src="/signalr/hubs"></script>

 

Bundan sonra kodun hepsini açıklamıcam. Önemli noktaların açıklamaları yazdım.

 

01 //Bağlantıyı sağlıyoruz DrawHub sınıfımızın ismini lowerCase kuralında yazıyoruz.Küçük büyük hassasiyeti
02 // var
03 var hub = $.connection.drawHub;
04 $.connection.hub.logging = true;
05  
06 //Server Broadcast yaptığında bu metodu tetikliyor
07 //Gelen parametrelere göre çizim yapılıyor
08 hub.client.draw = function (x, y, z, w) {
09     var ctx = canvas.context;
10     ctx.fillCircle(x, y, z, w);
11 };
12  
13 //Ekranı silmek için bağlı tüm clientlarda bu metodu tetikliyor
14 hub.client.clearCanvas = function () {
15     var ctx = canvas.context;
16     ctx.clearTo("#ddd");
17 };
18  
19 // Client tarafında biz paneli sil butonuna basınca bu önce servera iletiliyor.
20 // Son server bunu tüm clientlara yolluyor ve üstteki clearCanvas metodu tetikleniyor.
21 $("#clearCanvas").click(function () {
22     hub.server.clearCanvas();
23 });
24  
25 //Bağlantıyı başlatıyor
26 $.connection.hub.start().done(function () {
27     //Başarılı bağlanıldığında burada bişeyler yapılabilir
28 });
29  
30     //Ekrana basıldığında burası tetikleniyor
31     canvas.node.onmousemove = function (e) {
32         if (!canvas.isDrawing) {
33             return;
34         }
35         var x = e.pageX - this.offsetLeft;
36         var y = e.pageY - this.offsetTop;
37         ctx.fillCircle(x, y, radius, Color);
38           
39         //Server'a burdaki değişkenler gönderiliyor.
40         hub.server.drawSomeThings(x, y, radius, Color);
41     };

 

Ayrıca sayfada renk ve büyüklük seçmek için JqueryUI elementler kullandım.
Projeyi burdan indirebilirsiniz. Demosuda aşağıdaki gibi.