Asp.NET Core – SignalR Serisi #5 – Client’da Otomatik Bağlantı Konfigürasyonu ve Durum Fonksiyonları(jQuery)

Merhaba,

SignalR vasıtasıyla client ile server arasında eşzamanlı bir etkileşim sağlanmaya çalışılırken, ilk etapta bir bağlantının olmaması yahut var olan bağlantının süreç içerisinde kopması durumlarına istinaden bu bağlantının yeniden veya ilk olarak belli aralıklarla sağlanmaya çalışılması gerekmektedir. Bir yandan bu bağlantı gerçekleştirme süreçlerinde, bağlantının durumu hakkında bilgi edinebilmek için tasarlanmış olaylar devreye sokularak, kullanıcıyı yönlendirmemiz gerekebilmektedir. İşte bu içeriğimizde, bu ihtiyaçlar doğrultusunda otomatik bağlantı konfigürasyonunun nasıl gerçekleştirileceği, bağlantı durumu hakkında bilgi veren event’lerin neler olduğu ve nasıl tanımlandığı hakkında jQuery üzerinden detaylı incelemede bulunacağız.

Otomatik Bağlantı Konfigürasyonu

Otomatik bağlantı konfigürasyonu; ilk etapta bir bağlantının olmadığı veya bağlantının süreç içerisinde koptuğu durumlarına istinaden özel olarak yapılandırılabilir. İlk olarak bağlantının süreç içerisinde koptuğu durumlarda otomatik bağlantı konfigürasyonunu ele alalım. Bunun için withAutomaticReconnect fonksiyonu kullanılmaktadır.

withAutomaticReconnect; eşzamanlı etkileşime girmiş olan client ile server arasındaki bağlantının süreç esnasında kopması sonucu tekrar bağlanılmasını sağlayan bir fonksiyondur. Bağlantı koptuktan sonra sırasıyla 0 -> 2 -> 10 -> 30 saniyelik periyotlarla dört kez tekrarlı bir şekilde bağlantıyı deneyecektir.

         var connection = new signalR.HubConnectionBuilder()
            .configureLogging(signalR.LogLevel.Information)
            .withUrl("https://localhost:5001/myhub")
            .withAutomaticReconnect()
            .build();

Asp.NET Core – SignalR Serisi #5 – Client'da Otomatik Bağlantı Konfigürasyonu ve Durum Fonksiyonları(jQuery)
Yukarıdaki ekran görüntüsünde olduğu gibi bu denemelerden herhangi birinde bağlantı sağlanıyorsa uygulama işlevine sağlıklı bir şekilde devam edecektir.

withAutomaticReconnect’in parametresi üzerinden verilen dizisel değerler ile tekrardan deneme periyodu belirlenerek, özelleştirilebilmektedir.

         var connection = new signalR.HubConnectionBuilder()
            .configureLogging(signalR.LogLevel.Information)
            .withUrl("https://localhost:5001/myhub")
            .withAutomaticReconnect([1000, 1000, 2000, 3000, 5000, 1000, 100, 100])
            .build();

Yukarıdaki tanımlamaya göz atarsanız eğer süreçte bağlantının kopması durumunda sırasıyla 1 saniye -> 1 saniye -> 2 saniye -> 3 saniye -> 5 saniye -> 1 saniye -> 100 milisaniye -> 100 milisaniye aralıklarıyla tekrar bağlantı denenmiş olacaktır.

İkinci olarak ilk etapta bağlantının olmadığı durumdaki otomatik bağlantı konfigürasyonunu ele alalım. Buna el ile yeniden bağlantı yahut manuel yeniden bağlantıda diyebiliriz.

         async function start() {
            try {
               await connection.start()
            } catch (error) {
               setTimeout(() => start(), 2000);
            }
         }

         start();

Yukarıdaki kod bloğunu incelerseniz eğer connection nesnesinin ‘start’ fonksiyonu çağrıldığında herhangi bir hata fırlatılıyorsa eğer akış catch’e düşecek ve 2000 saniye sonra yeniden bir bağlantı gerçekleştirilmeye çalışılacaktır ve bu işlem başarılı oluncaya kadar devam edecektir.

İlgili çalışma benzer mantıkla aşağıdaki gibi de kodlanabilir;

         function start() {
            connection.start().then(() => { }).catch(error => setTimeout(() => start(), 2000))
         }

         start();

Asp.NET Core – SignalR Serisi #5 – Client'da Otomatik Bağlantı Konfigürasyonu ve Durum Fonksiyonları(jQuery)

Durum Fonksiyonları

Durum fonksiyonları, client ile server arasındaki bağlantının gerçekleşme durumuna göre fırlatılan event’lerdir. onreconnecting, onreconnected ve onclose olmak üzere üç adettir.

  • onreconnecting
    Yeniden bağlanma girişimlerini başlatmadan önce fırlatılan event’tir.

             connection.onreconnecting(error => {
                console.assert(connection.state === signalR.HubConnectionState.Reconnecting);
                console.log("Bağlantı gerçekleştiriliyor.")
             });
    
  • onreconnected
    Yeniden bağlantı gerçekleştirildiğinde fırlatılır.

             connection.onreconnected(connecitonid => {
                console.assert(connection.state === signalR.HubConnectionState.Connected);
                console.log("Bağlantı gerçekleştirildi.")
             });
    

    Burada bağlantı gerçekleştiren client’a diğerlerinden ayırmak için server tarafından bir connectionid verilmektedir.

  • onclose
    Yeniden bağlantı girişimlerinin sonuçsuz kaldığı durumda fırlatılır.

             connection.onclose(connecitonid => {
                console.assert(connection.state === signalR.HubConnectionState.Disconnected);
                console.log("Bağlantı gerçekleştirilemedi.")
             });
    

Örnek Yapalım

<!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(() => {
         var connection = new signalR.HubConnectionBuilder()
            .configureLogging(signalR.LogLevel.Information)
            .withUrl("https://localhost:5001/myhub")
            .withAutomaticReconnect([1000, 1000, 1000, 1000])
            .build();
         function start() {
            connection.start().then(() => { }).catch(error => setTimeout(() => start(), 2000))
         }
         start();
         connection.onreconnecting(error => {
            $("div").css("background-color", "#6286a0");
            $("div").css("color", "#white");
            $("div").html("Bağlanılıyor")
         });
         connection.onreconnected(connecitonid => {
            $("div").css("background-color", "#32a838");
            $("div").css("color", "#white");
            $("div").html("Bağlandı")
         });
         connection.onclose(connecitonid => {
            $("div").css("background-color", "red");
            $("div").css("color", "#white");
            $("div").html("Bağlanılamadı")
         });
      });
   </script>
   <style>
      div {
         background-color: #6286a0;
         border: 15px solid rgba(255, 255, 255, .5);
         border-radius: 115px;
         width: 80px;
         height: 80px;
         line-height: 80px;
         font-size: 12px;
         color: white;
         font-family: Arial, Helvetica, sans-serif;
         font-weight: bold;
         text-shadow: #2d4251 5px 5px 5px;
      }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

Asp.NET Core – SignalR Serisi #5 – Client'da Otomatik Bağlantı Konfigürasyonu ve Durum Fonksiyonları(jQuery)

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

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

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 23 Eylül 2020

    […] Asp.NET Core – SignalR Serisi #5 – Client’da Otomatik Bağlantı Konfigürasyonu ve Durum Fonk… […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*