<\/div>\n

Merhaba,<\/p>\n

SignalR Yaz\u0131 Seri<\/a>mizin en sonuncu SignalR Server Uygulamas\u0131<\/a> ba\u015fl\u0131kl\u0131 makalesinde Asp.NET Core Web API \u00fczerinden bir SignalR server uygulamas\u0131n\u0131n nas\u0131l aya\u011fa kald\u0131r\u0131ld\u0131\u011f\u0131n\u0131 irdelemi\u015ftik. Akabinde bu i\u00e7eri\u011fimizde, geli\u015ftirilen server uygulamas\u0131na kar\u015f\u0131l\u0131k bir client uygulamas\u0131n\u0131 tasarlayacak ve hangi prensiplerle aya\u011fa kald\u0131r\u0131ld\u0131\u011f\u0131n\u0131 irdeleyece\u011fiz.<\/p>\n

\u0130lk olarak bir \u00e7o\u011fumuzun akl\u0131nda muhtemel olan Client’ta Hangi UI Teknolojisini Kullanmal\u0131y\u0131z?<\/strong><\/em> sualine kar\u015f\u0131l\u0131k bir ayd\u0131nlatmayla ba\u015flayal\u0131m. Client olarak Angular, Vue.js, React vs. gibi geli\u015fmi\u015f UI teknolojilerinden herhangi birini kullanabilir yahut jQuery gibi standart JavaScript k\u00fct\u00fcphanesiyle de geli\u015ftirme yapabilirsiniz. Hangi mimari ya da k\u00fct\u00fcphane ile \u00e7al\u0131\u015f\u0131yorsan\u0131z \u00e7al\u0131\u015f\u0131n ilgili uygulamaya @microsoft\/signalr<\/a> JavaScript k\u00fct\u00fcphanesini entegre etmeniz yeterli olacakt\u0131r. Geri kalan prensipler burada anlat\u0131lacak olan mant\u0131kla paralel bir \u015fekilde seyredecektir.<\/p>\n

Bu i\u00e7erikteki kullan\u0131lacak teknolojiyi sorarsan\u0131z e\u011fer ilk etapta jQuery ile bir girizgah ger\u00e7ekle\u015ftirilecek ve yaz\u0131 serisinin ileriki makalelerinde Angular \u00fczerinden de derinlemesine \u00f6rnekler bar\u0131nd\u0131ran numuneler payla\u015f\u0131lacakt\u0131r. O halde buyrun ba\u015flayal\u0131m…<\/p>\n

Ba\u015flarken<\/h3>\n
Yukar\u0131da belirtildi\u011fi gibi hangi UI teknolojisi kullan\u0131l\u0131rsa kullan\u0131ls\u0131n temel olarak @microsoft\/signalr<\/a> k\u00fct\u00fcphanesi \u00fczerinden \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirilecektir. Bizler, \u00f6rneklendirmede \u015fimdilik<\/u> jQuery + HTML kullanaca\u011f\u0131m\u0131zdan dolay\u0131 ilgili k\u00fct\u00fcphaneyi ya npm \u00fczerinden ya da manuel entegre edece\u011fiz.<\/p>\n
Tabi ben \u015fimdilik npm \u00fczerinden bir entegrasyonu tercih ediyorum. Bunun i\u00e7in \u00f6ncelikle ‘package.json’ dosyas\u0131n\u0131 olu\u015fturabilmek i\u00e7in npm i(nit) -y<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131yor, ard\u0131ndan npm install @microsoft\/signalr<\/code> komutuyla signalr.js k\u00fct\u00fcphanesini uygulamaya indiriyoruz. \n<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
Ard\u0131ndan ‘signalr.js’ ya da ‘signalr.min.js’ dosyalar\u0131ndan herhangi birini HTML dosyas\u0131na kaynak olarak g\u00f6stererek a\u015fa\u011f\u0131daki tasar\u0131mda bulunuyoruz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="node_modules\/@microsoft\/signalr\/dist\/browser\/signalr.min.js"><\/script>\r\n <script src="node_modules\/jquery\/dist\/jquery.min.js"><\/script>\r\n <script>\r\n $(document).ready(() => {\r\n \/\/SignalR JavaScript kodlar\u0131 burada yaz\u0131lacak...\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <input type="text" id="txtMessage"> <button>G\u00f6nder<\/button>\r\n <ul id="messages">\r\n <\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki tasar\u0131m\u0131 incelerseniz e\u011fer mesaj yazabilmek ve di\u011fer client’lara g\u00f6nderebilmek i\u00e7in TextBox ve Button nesneleri olu\u015fturulmu\u015f ve mesaj trafi\u011fini listeleyebilmek i\u00e7inse ‘ul’ nesnesi eklenmi\u015ftir.<\/p>\n \u015eimdi SignalR client kodlamas\u0131n\u0131 ad\u0131m ad\u0131m detayl\u0131ca ele alal\u0131m;<\/p>\n\nAd\u0131m 1<\/strong> \n\u0130lk olarak SignalR server uygulamas\u0131n\u0131(bir \u00f6nceki makalemizde olu\u015fturmu\u015ftuk. bknz : SignalR Server Uygulamas\u0131<\/a>)<\/span> aya\u011fa kald\u0131ral\u0131m ve olu\u015fturulan Hub endpoint’i \u00fczerinden bir connection sa\u011flayal\u0131m. \n<\/a><\/p>\n\r\n var connection = new signalR.HubConnectionBuilder()\r\n .withUrl("https:\/\/localhost:5001\/myhub")\r\n .build();\r\n<\/pre>\n<\/li>\nAd\u0131m 2<\/strong> \nBuild edilen connection \u00fczerinden ‘start’ fonksiyonunu kullanarak ba\u011flant\u0131y\u0131 a\u00e7al\u0131m.<\/p>\n\r\n connection.start();\r\n<\/pre>\nArt\u0131k bu a\u00e7\u0131k ba\u011flant\u0131 \u00fczerinden SignalR ile ileti\u015fime ge\u00e7ebilecek, veri transferini sa\u011flayabilece\u011fiz.\n<\/li>\nAd\u0131m 3<\/strong> \nSenaryoya uygun bir \u015fekilde butona t\u0131kland\u0131\u011f\u0131 vakit TextBox’tan girilen de\u011feri okuyal\u0131m ve connection’\u0131n ‘invoke’ fonksiyonuyla server’da ki ‘SendMessageAsync’ fonksiyonunu tetikleyerek elde edilen datay\u0131(message) g\u00f6nderelim.<\/p>\n\r\n $("button").click(() => {\r\n let message = $("#txtMessage").val();\r\n connection.invoke("SendMessageAsync", message)\r\n .catch(error => console.log("Mesaj g\u00f6nderilirken hata al\u0131nm\u0131\u015ft\u0131r."));\r\n });\r\n<\/pre>\n‘SendMessageAsync’ metodunu hat\u0131rlarsan\u0131z e\u011fer server makalesinde tasarlad\u0131\u011f\u0131m\u0131z a\u015fa\u011f\u0131daki gibi bir metottur.<\/p>\n\r\n public class MyHub : Hub\r\n {\r\n public async Task SendMessageAsync(string message)\r\n {\r\n await Clients.All.SendAsync("receiveMessage", message);\r\n }\r\n }\r\n<\/pre>\n\u0130\u00e7eri\u011fine g\u00f6z atarsak e\u011fer; bu metoda gelen t\u00fcm bildiriler, ‘receiveMessage’ fonksiyonunu dinleyen t\u00fcm client’lara g\u00f6nderilecektir. Yukar\u0131daki kodlamada da bizler aynen bu i\u015fi yapm\u0131\u015f bulunmakta ve ilgili metodun tetiklenmesi neticesinde ‘receiveMessage’a abone olan t\u00fcm client’lara mesaj\u0131 g\u00f6ndermekteyiz. Haliyle s\u0131rada client’lar da ‘receiveMessage’ fonksiyonunu tan\u0131mlamam\u0131z gerekmektedir.\n<\/li>\nAd\u0131m 4<\/strong> \nServer taraf\u0131ndan bir client’\u0131n herhangi bir fonksiyonunu tetikleyebilmek i\u00e7in client o fonksiyona ‘on’ fonksiyonu ile subscribe olmal\u0131d\u0131r.<\/p>\n\r\n connection.on("receiveMessage", message => {\r\n $("#messages").append(`${message}<br>`);\r\n });\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, ne zaman server’da ‘SendMessageAsync’ fonksiyonu tetiklendi, o zaman ‘receiveMessage’ fonksiyonuna subscribe olan t\u00fcm client’lar\u0131n bu fonksiyonu tetiklenecektir.\n<\/li>\n<\/ul>\n \u0130\u015fte bu kadar…<\/p>\n Yukar\u0131da bir client’\u0131n yapabilece\u011fi en sade \u00e7al\u0131\u015fmay\u0131 ad\u0131m ad\u0131m ele alm\u0131\u015f bulunmaktay\u0131z. Anla\u015f\u0131labilirli\u011fi kolayla\u015ft\u0131rmak i\u00e7in yukar\u0131daki par\u00e7a kodlar\u0131 derlememiz gerekirse e\u011fer;<\/p>\n \r\n <script>\r\n $(document).ready(() => {\r\n var connection = new signalR.HubConnectionBuilder()\r\n .withUrl("https:\/\/localhost:5001\/myhub")\r\n .build();\r\n\r\n connection.start();\r\n\r\n $("button").click(() => {\r\n let message = $("#txtMessage").val();\r\n connection.invoke("SendMessageAsync", message)\r\n .catch(error => console.log("Mesaj g\u00f6nderilirken hata al\u0131nm\u0131\u015ft\u0131r."));\r\n });\r\n\r\n connection.on("receiveMessage", message => {\r\n $("#messages").append(`${message}<br>`);\r\n });\r\n\r\n });\r\n <\/script>\r\n<\/pre>\n\u015feklinde olacakt\u0131r.<\/p>\n CORS Politikalar\u0131n\u0131 Ayarlama<\/h3>\nYap\u0131lan in\u015fa neticesinde client ile server aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131n sa\u011fl\u0131kl\u0131 olabilmesi i\u00e7in CORS politikalar\u0131n\u0131n ayarlanmas\u0131 gerekmektedir. Aksi taktirde a\u015fa\u011f\u0131daki hatayla kar\u015f\u0131la\u015f\u0131lmas\u0131 y\u00fcksek olas\u0131d\u0131r; \n<\/a> \nCORS politikas\u0131 hakk\u0131nda bir fikre sahip de\u011filseniz Asp.NET Core Uygulamalar\u0131nda CORS(Cross-Origin-Resource-Sharing) Politikas\u0131 Ayarlama<\/a> ba\u015fl\u0131kl\u0131 makaleyi okuman\u0131z\u0131 tavsiye ederim.<\/p>\n CORS politikas\u0131 i\u00e7in a\u015fa\u011f\u0131daki konfig\u00fcrasyon yeterli olacakt\u0131r;<\/p>\n \r\n public class Startup\r\n {\r\n public void ConfigureServices(IServiceCollection services)\r\n {\r\n .\r\n .\r\n .\r\n services.AddCors(options => options.AddDefaultPolicy(policy =>\r\n policy.AllowAnyMethod()\r\n .AllowAnyHeader()\r\n .AllowCredentials()\r\n .SetIsOriginAllowed(origin => true)));\r\n .\r\n .\r\n .\r\n }\r\n\r\n public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n {\r\n .\r\n .\r\n .\r\n app.UseCors();\r\n app.UseRouting();\r\n .\r\n .\r\n .\r\n }\r\n }\r\n<\/pre>\nTest Edelim<\/h3>\n\u015eimdi, in\u015fa edilen uygulama \u00fczerinden birden fazla client olu\u015ftural\u0131m ve a\u015fa\u011f\u0131daki g\u00f6rselde oldu\u011fu gibi test edelim. \n<\/a><\/p>\n K\u00fc\u00e7\u00fck Konfig\u00fcrasyonlar<\/h3>\nstart fonksiyonu durum fonksiyonlar\u0131<\/strong><\/p>\n\r\n connection.start()\r\n .then(() => console.log("Ba\u011flant\u0131 ba\u015far\u0131yla ger\u00e7ekle\u015ftirildi."))\r\n .catch(error => console.log("Ba\u011flant\u0131 sa\u011flan\u0131rken beklenmeyen bir hatayla kar\u015f\u0131la\u015f\u0131ld\u0131."));\r\n<\/pre>\n<\/a><\/p>\n connection state bilgisi<\/strong><\/p>\n \r\n console.log(connection.connectionState)\r\n<\/pre>\n<\/a><\/p>\n \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n Not : \u00d6rnek projeyi indirmek i\u00e7in buraya<\/a> t\u0131klay\u0131n\u0131z.<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, SignalR Yaz\u0131 Serimizin en sonuncu SignalR Server Uygulamas\u0131 ba\u015fl\u0131kl\u0131 makalesinde Asp.NET Core Web API \u00fczerinden bir SignalR server uygulamas\u0131n\u0131n nas\u0131l aya\u011fa kald\u0131r\u0131ld\u0131\u011f\u0131n\u0131 irdelemi\u015ftik. Akabinde bu i\u00e7eri\u011fimizde, geli\u015ftirilen server uygulamas\u0131na kar\u015f\u0131l\u0131k bir client uygulamas\u0131n\u0131...<\/p>\n","protected":false},"author":1,"featured_media":17653,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3760],"tags":[3772,3771,3773],"class_list":["post-17748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-signalr","tag-asp-net-core-signalr-client","tag-signalr-client","tag-signalr-jquery-client"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/17748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=17748"}],"version-history":[{"count":25,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/17748\/revisions"}],"predecessor-version":[{"id":17783,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/17748\/revisions\/17783"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/17653"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=17748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=17748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=17748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Test Edelim<\/h3>\n\u015eimdi, in\u015fa edilen uygulama \u00fczerinden birden fazla client olu\u015ftural\u0131m ve a\u015fa\u011f\u0131daki g\u00f6rselde oldu\u011fu gibi test edelim.\n<\/a><\/p>\n

Test Edelim<\/h3>\n
\u015eimdi, in\u015fa edilen uygulama \u00fczerinden birden fazla client olu\u015ftural\u0131m ve a\u015fa\u011f\u0131daki g\u00f6rselde oldu\u011fu gibi test edelim.
\n $\"Asp.NET$ <\/a><\/p>\n