{"id":100,"date":"2019-02-16T08:57:45","date_gmt":"2019-02-16T08:57:45","guid":{"rendered":"http:\/\/blog.yusufcelik.net\/?p=100"},"modified":"2019-02-16T08:57:45","modified_gmt":"2019-02-16T08:57:45","slug":"nette-signalr-kullanimi","status":"publish","type":"post","link":"http:\/\/blog.yusufcelik.net\/index.php\/2019\/02\/16\/nette-signalr-kullanimi\/","title":{"rendered":".Net’te SignalR Kullan\u0131m\u0131"},"content":{"rendered":"\n

SignalR Real Time uygulamalar geli\u015ftirmek i\u00e7in \u00e7\u00f6z\u00fcm sunan bir framework’t\u00fcr. Bize sundu\u011fu kolayl\u0131k sayesinde anl\u0131k olarak istekler g\u00f6ndermemize yard\u0131mc\u0131 olmaktad\u0131r.<\/p>\n\n\n\n

SignalR \u00e7al\u0131\u015fma mant\u0131\u011f\u0131 a\u015fa\u011f\u0131daki gibidir. Bir event tetiklenir. Tetiklenen event olu\u015fturdu\u011fumuz Hub s\u0131n\u0131f\u0131n\u0131 tetikler. Hub s\u0131n\u0131f\u0131da iste\u011fi client(lar)’a g\u00f6nderilmesini sa\u011flar. <\/p>\n\n\n\n

\"\"



<\/figcaption><\/figure>\n\n\n\n

\u0130lk olarak Visual Studio’da bir ASP.NET MVC projesi olu\u015fturuyoruz. Ve daha sonradan Nuget Package Manager’dan Microsoft.AspNet.SignalR projemize ekliyoruz. <\/p>\n\n\n\n

Paketle beraber a\u015fa\u011f\u0131daki paketlerde y\u00fckleniyor.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ayn\u0131 \u015fekilde Microsoft.AspNet.SignalR.Client kurulumunu yap\u0131yoruz.<\/p>\n\n\n\n

Kurulumlar\u0131 yapt\u0131kdan sonra projemizin dizinine Hubs ad\u0131nda bir klas\u00f6r ekliyoruz. Ve bu klas\u00f6re a\u015fa\u011f\u0131daki gibi bir Hub ekliyoruz.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Olu\u015fturdu\u011fumuz Hub s\u0131n\u0131f\u0131n\u0131n i\u00e7i a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<\/p>\n\n\n\n

    public class HubIsmiHub : Hub\n    {\n        public void Hello(string message)\n        {\n            Clients.All.hello(message);\n        }\n    }<\/code><\/pre>\n\n\n\n
Burada Hello methodu Hub taraf\u0131ndan tetiklenen method’dur. Client.All.hello \u00a0<\/strong>ise client taraf\u0131nda tetiklenmesini istedi\u011fimiz methoddur.<\/p>\n\n\n\n
\u015eimdi ise Controller s\u0131n\u0131f\u0131m\u0131za a\u015fa\u011f\u0131daki methodu ekliyoruz.<\/p>\n\n\n\n
        [HttpPost]\n        public ActionResult SendMessage(string message)\n        {\n            var hubConnection = new HubConnection(\"http:\/\/localhost:49813\/signalr\", useDefaultUrl: false);\n            IHubProxy hubProxy = hubConnection.CreateHubProxy(\"HubIsmiHub\");\n            hubConnection.Start().Wait();\n\n\n            hubProxy.Invoke(\"Hello\", message).Wait();\n\n            return Json(true);\n        }<\/code><\/pre>\n\n\n\n
Hub connection’\u0131m\u0131z\u0131 olu\u015fturuyoruz. Ve projemizin \u00e7al\u0131\u015ft\u0131\u011f\u0131 port ile birlikte  yukarudaki gibi “http:\/\/localhost:49813\/signalr” ekliyoruz. <\/p>\n\n\n\n
Daha sonra tetiklece\u011fimiz hub’\u0131 olu\u015fturuyoruz. Burada projemizde tetiklemek istedi\u011fimiz Hub ismini kullan\u0131yoruz. Ve Hub’da ki fonksiyonu parametreleri ile birlikte Invoke ederek tetiklenmesini sa\u011fl\u0131yoruz. <\/p>\n\n\n\n
\u015eimdi s\u0131ra cshtml ve script kodlar\u0131m\u0131z\u0131 olu\u015fturmaya geldi.<\/p>\n\n\n\n
<script src=\"~\/Scripts\/jquery-3.3.1.min.js\" type=\"text\/javascript\"><\/script>\n<script src=\"~\/Scripts\/jquery.signalR-2.4.0.min.js\" type=\"text\/javascript\"><\/script>\n<script src=\"~\/signalr\/Hubs\"><\/script>\n<input id=\"messageText\" type=\"text\" placeholder=\"Mesaj\" \/>\n<input id=\"sendMessage\" type=\"button\" value=\"G\u00f6nder\" \/>\n<ul id=\"messageList\">\n\n<\/ul>\n\n<script type=\"text\/javascript\">\n    var person = prompt(\"Please enter your name\", \"Personal Info\");\n\n\n    $('#sendMessage').click(function () {\n        var message = person + \"->\" + $('#messageText').val();\n        $.post('\/Home\/SendMessage', { 'message': message },\n    });\n\n\n    var con = $.connection.hubIsmiHub;\n    con.client.hello = function (data) {\n        $('#messageList').append('<li>' + data + '<\/li>');\n\n    }\n\n    $.connection.hub.start();\n<\/script><\/code><\/pre>\n\n\n\n
Yukar\u0131daki gibi projemize jquery, signalr js dosyalar\u0131n\u0131 ekliyoruz. “~\/signalr\/Hubs” \u015feklinde ekledi\u011fimiz script dosyas\u0131 ise proje \u00e7al\u0131\u015ft\u0131kdan sonra olu\u015facakt\u0131r. Ve signalR’\u0131 kullanabilmemiz i\u00e7in bunu eklememiz gerekiyor. <\/p>\n\n\n\n
$.connection.hubIsmiHub methodu ile client taraf\u0131nda ba\u011flanmak istedi\u011fimiz hub ismini yaz\u0131yoruz. <\/p>\n\n\n\n
con.client.hello methodu ise Hub taraf\u0131ndan client taraf\u0131nda tetikledi\u011fi methodddur. <\/p>\n\n\n\n
Proje’de prompt methodu ile giri\u015fte bir isim al\u0131nmas\u0131n\u0131 sa\u011flad\u0131m. Daha sonra buttona t\u0131kland\u0131\u011f\u0131nda Controller’da ki Post methoduna text’deki de\u011ferin post edilmesini sa\u011flad\u0131m. Controller’da Hub’u ba\u015flatarak di\u011fer client’lara g\u00f6nderilecek methodu belirledim.<\/p>\n\n\n\n
Son olarak Projemizi \u00e7al\u0131\u015ft\u0131rmadan \u00f6nce projemize bir Startup.cs dosyas\u0131 ekliyoruz. Ve signalR’\u0131n i\u00e7in a\u015fa\u011f\u0131daki gibi signalR’\u0131 ba\u015flang\u0131\u00e7 konfig\u00fcrasyonlar\u0131na ekliyoruz.<\/p>\n\n\n\n
using System;\nusing System.Threading.Tasks;\nusing Microsoft.Owin;\nusing Owin;\n\n[assembly: OwinStartup(typeof(SignalRDeneme.Startup))]\n\nnamespace SignalRDeneme\n{\n    public class Startup\n    {\n        public void Configuration(IAppBuilder app)\n        {\n            app.MapSignalR();\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
SignalR Real Time uygulamalar geli\u015ftirmek i\u00e7in \u00e7\u00f6z\u00fcm sunan bir framework’t\u00fcr. Bize sundu\u011fu kolayl\u0131k sayesinde anl\u0131k olarak istekler g\u00f6ndermemize yard\u0131mc\u0131 olmaktad\u0131r. SignalR \u00e7al\u0131\u015fma mant\u0131\u011f\u0131 a\u015fa\u011f\u0131daki gibidir. Bir event tetiklenir. Tetiklenen event olu\u015fturdu\u011fumuz Hub s\u0131n\u0131f\u0131n\u0131 tetikler....<\/p>\n","protected":false},"author":1,"featured_media":105,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts\/100"}],"collection":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":1,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":106,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions\/106"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}