Asp.NET Core – SignalR Serisi #3 – SignalR Client Uygulaması(jQuery)

Gençay

6 yıl önce

Merhaba,

SignalR Yazı Serimizin en sonuncu SignalR Server Uygulaması başlıklı makalesinde Asp.NET Core Web API üzerinden bir SignalR server uygulamasının nasıl ayağa kaldırıldığını irdelemiştik. Akabinde bu içeriğimizde, geliştirilen server uygulamasına karşılık bir client uygulamasını tasarlayacak ve hangi prensiplerle ayağa kaldırıldığını irdeleyeceğiz.

İlk olarak bir çoğumuzun aklında muhtemel olan Client’ta Hangi UI Teknolojisini Kullanmalıyız? sualine karşılık bir aydınlatmayla başlayalım. Client olarak Angular, Vue.js, React vs. gibi gelişmiş UI teknolojilerinden herhangi birini kullanabilir yahut jQuery gibi standart JavaScript kütüphanesiyle de geliştirme yapabilirsiniz. Hangi mimari ya da kütüphane ile çalışıyorsanız çalışın ilgili uygulamaya @microsoft/signalr JavaScript kütüphanesini entegre etmeniz yeterli olacaktır. Geri kalan prensipler burada anlatılacak olan mantıkla paralel bir şekilde seyredecektir.

Bu içerikteki kullanılacak teknolojiyi sorarsanız eğer ilk etapta jQuery ile bir girizgah gerçekleştirilecek ve yazı serisinin ileriki makalelerinde Angular üzerinden de derinlemesine örnekler barındıran numuneler paylaşılacaktır. O halde buyrun başlayalım…

Başlarken

Yukarıda belirtildiği gibi hangi UI teknolojisi kullanılırsa kullanılsın temel olarak @microsoft/signalr kütüphanesi üzerinden çalışma gerçekleştirilecektir. Bizler, örneklendirmede şimdilik jQuery + HTML kullanacağımızdan dolayı ilgili kütüphaneyi ya npm üzerinden ya da manuel entegre edeceğiz.

Tabi ben şimdilik npm üzerinden bir entegrasyonu tercih ediyorum. Bunun için öncelikle ‘package.json’ dosyasını oluşturabilmek için npm i(nit) -y komutunu çalıştırıyor, ardından npm install @microsoft/signalr komutuyla signalr.js kütüphanesini uygulamaya indiriyoruz.

Ardından ‘signalr.js’ ya da ‘signalr.min.js’ dosyalarından herhangi birini HTML dosyasına kaynak olarak göstererek aşağıdaki tasarımda bulunuyoruz.

<!DOCTYPE html>
<html>
<head>
   <script src="node_modules/@microsoft/signalr/dist/browser/signalr.min.js"></script>
   <script src="node_modules/jquery/dist/jquery.min.js"></script>
   <script>
      $(document).ready(() => {
         //SignalR JavaScript kodları burada yazılacak...
      });
   </script>
</head>
<body>
   <input type="text" id="txtMessage"> <button>Gönder</button>
   <ul id="messages">
   </ul>
</body>
</html>

Yukarıdaki tasarımı incelerseniz eğer mesaj yazabilmek ve diğer client’lara gönderebilmek için TextBox ve Button nesneleri oluşturulmuş ve mesaj trafiğini listeleyebilmek içinse ‘ul’ nesnesi eklenmiştir.

Şimdi SignalR client kodlamasını adım adım detaylıca ele alalım;

Adım 1
İlk olarak SignalR server uygulamasını(bir önceki makalemizde oluşturmuştuk. bknz : SignalR Server Uygulaması) ayağa kaldıralım ve oluşturulan Hub endpoint’i üzerinden bir connection sağlayalım.
```
         var connection = new signalR.HubConnectionBuilder()
            .withUrl("https://localhost:5001/myhub")
            .build();
```
Adım 2
Build edilen connection üzerinden ‘start’ fonksiyonunu kullanarak bağlantıyı açalım.
```
         connection.start();
```
Artık bu açık bağlantı üzerinden SignalR ile iletişime geçebilecek, veri transferini sağlayabileceğiz.
Adım 3
Senaryoya uygun bir şekilde butona tıklandığı vakit TextBox’tan girilen değeri okuyalım ve connection’ın ‘invoke’ fonksiyonuyla server’da ki ‘SendMessageAsync’ fonksiyonunu tetikleyerek elde edilen datayı(message) gönderelim.
```
         $("button").click(() => {
            let message = $("#txtMessage").val();
            connection.invoke("SendMessageAsync", message)
               .catch(error => console.log("Mesaj gönderilirken hata alınmıştır."));
         });
```
‘SendMessageAsync’ metodunu hatırlarsanız eğer server makalesinde tasarladığımız aşağıdaki gibi bir metottur.
```
    public class MyHub : Hub
    {
        public async Task SendMessageAsync(string message)
        {
            await Clients.All.SendAsync("receiveMessage", message);
        }
    }
```
İçeriğine göz atarsak eğer; bu metoda gelen tüm bildiriler, ‘receiveMessage’ fonksiyonunu dinleyen tüm client’lara gönderilecektir. Yukarıdaki kodlamada da bizler aynen bu işi yapmış bulunmakta ve ilgili metodun tetiklenmesi neticesinde ‘receiveMessage’a abone olan tüm client’lara mesajı göndermekteyiz. Haliyle sırada client’lar da ‘receiveMessage’ fonksiyonunu tanımlamamız gerekmektedir.
Adım 4
Server tarafından bir client’ın herhangi bir fonksiyonunu tetikleyebilmek için client o fonksiyona ‘on’ fonksiyonu ile subscribe olmalıdır.
```
         connection.on("receiveMessage", message => {
            $("#messages").append(`${message}<br>`);
         });
```
Görüldüğü üzere, ne zaman server’da ‘SendMessageAsync’ fonksiyonu tetiklendi, o zaman ‘receiveMessage’ fonksiyonuna subscribe olan tüm client’ların bu fonksiyonu tetiklenecektir.

İşte bu kadar…

Yukarıda bir client’ın yapabileceği en sade çalışmayı adım adım ele almış bulunmaktayız. Anlaşılabilirliği kolaylaştırmak için yukarıdaki parça kodları derlememiz gerekirse eğer;

   <script>
      $(document).ready(() => {
         var connection = new signalR.HubConnectionBuilder()
            .withUrl("https://localhost:5001/myhub")
            .build();

         connection.start();

         $("button").click(() => {
            let message = $("#txtMessage").val();
            connection.invoke("SendMessageAsync", message)
               .catch(error => console.log("Mesaj gönderilirken hata alınmıştır."));
         });

         connection.on("receiveMessage", message => {
            $("#messages").append(`${message}<br>`);
         });

      });
   </script>

şeklinde olacaktır.

CORS Politikalarını Ayarlama

Yapılan inşa neticesinde client ile server arasında veri paylaşımının sağlıklı olabilmesi için CORS politikalarının ayarlanması gerekmektedir. Aksi taktirde aşağıdaki hatayla karşılaşılması yüksek olasıdır;

CORS politikası hakkında bir fikre sahip değilseniz Asp.NET Core Uygulamalarında CORS(Cross-Origin-Resource-Sharing) Politikası Ayarlama başlıklı makaleyi okumanızı tavsiye ederim.

CORS politikası için aşağıdaki konfigürasyon yeterli olacaktır;

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            .
            .
            .
            services.AddCors(options => options.AddDefaultPolicy(policy =>
                                policy.AllowAnyMethod()
                                      .AllowAnyHeader()
                                      .AllowCredentials()
                                      .SetIsOriginAllowed(origin => true)));
            .
            .
            .
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            .
            .
            .
            app.UseCors();
            app.UseRouting();
            .
            .
            .
        }
    }

Test Edelim

Şimdi, inşa edilen uygulama üzerinden birden fazla client oluşturalım ve aşağıdaki görselde olduğu gibi test edelim.

Küçük Konfigürasyonlar

start fonksiyonu durum fonksiyonları

         connection.start()
            .then(() => console.log("Bağlantı başarıyla gerçekleştirildi."))
            .catch(error => console.log("Bağlantı sağlanırken beklenmeyen bir hatayla karşılaşıldı."));

connection state bilgisi

         console.log(connection.connectionState)

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Not : Örnek projeyi indirmek için buraya tıklayınız.