Asp .Net Core SignalR 4 - SignalR'da Anlık Bağlantı ve Durumsal Fonksiyonlar

Selamün Aleyküm, geçtiğimiz yazıda SignalR ile Loglama Mekanizmasını ele almıştık bu yazıda ise anlık bağlantı ve durum fonksiyorlarını ele alacağız.

SİgnalR ile server ve client sayesinde RealTime ( Gerçek Zamanlı ) bağlantı sağlamaya çalışırken, bağlantının olmadığı veya varken koptuğu durumlarda, belli aralıklarla bağlantının kurulmasını sağlamak gerekir. Bağlantı kurulurken, bağlantının durumundan haberdar olabilmek için bazı durum fonksiyonlarını kullanmamız gerekir.

With Automatic Reconnect ( Otomatik yeniden bağlanma )

withAutomaticReconnect, bağlantının hiç olmadığı veya varken koptuğu durumlar için kullanılır. withAutomaticRecconnect fonksiyonu RealTime olarak bağlanan server ve client arasındaki bağlanıtnın kopması durumunda 0 → 2 → 10 → 30 zaman aralığında 4 periyotluk bağlantı denemesi yapacatır, bağlantı sağlanamazsa bir daha client server'a bağlanma isteği göndermeyecektir.

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

yukarıdaki video'da kopan bağlantı yeniden sağlanınca projemiz terardan işlevine kavuşmuş oldu.

withAutomaticReconnect fonksiyonunda dizi tanımlayarak hangi periyotlarda kopan bağlantıya isteklerde bulumasını sağlayabliriz.

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

Bu yapılanmada 1 saniye → 4 saniye → 5 saniye → 3 saniye → 5 saniye → 2 saniye → 10 milisaniye → 1 saniye şeklindeki periyotta client tarafımız server tarafına yeniden bağlanmak için istekte bulunacaktır.

Bağlantının Olmadığı Durumlar

Bağlantının hiç olmadığı durumlarda kullanılabilecek hazır bir fonksiyon bulunmamakta, bunu genelde manuel olarak biz yazarız.

//Bağlantının hiç kurulmadığı  durumlarda bu fonksiyon kullanılır.
async function start() {
    try {
        await connction.start();
    }
    catch (error) {
        setTimeout(() => start(), 1000);
    }
}

Yukarıda start fonksiyonu oluşturduk. connection nesnesinin start fonksiyonunu çağırdığımız esnada hata alırsak her bir saniyede server tarafına istek göndermektedir ve bağlantı sağlanıncaya kadar bu devam eder.

Durum Fonksiyonları

Server ve client arasındaki bağlantının sağlaması durumuna göre tetiklenen farklı events ( olaylar ) vardır. Bunlar sırasıyla; onreconnecting, onreconnected ve oncolse eventleridir.

OnReConnecting

onreconnecting event'i, yeniden bağlanmaya başlamadan evvel gönderilir.

connection.onreconnecting(error => {
   console.assert(connection.state === signalR.HubConnectionState.Reconnecting);
   console.log("Bağlantı gerçekleştiriliyor.")
});

Yukarıdaki kodda server'a tekrar bağlanma isteğinde bulunmaktayız. onreconnecting event'i içinde bulunan console.assert parametresi ile connection.satate değişkenin signalR.HubConnectionState.Reconnecting değerine eşit olup olmadığını sorgular. Eğer eşit değilse hata mesajı verir. console.log ile de ilgili durumua ait mesajı vermekteyiz.

OnReConnected

onreconnected event'i, client'ın server'a yeniden bağlandığında gönderilir.

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

Yukarıdaki kodda onreconnected event'i tetiklendiğinde hub'a bağlı olan kullanıcılara bir connenctionid ataması yapmaktadır. Bir önceki event'te olduğu gibi console.assert içinde connection.state değişkineninin signalR.HubConnectionState.Reconnected değerine eşit olup olmadığın sorgulamaktayız. console.log ile ilgili durumun mesajını yazdırmaktayız.

OnClose

onclose event'i, server'a yapılan bütün isteklerin başarısız olması durumunda gönderilir.

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

Yukaıdaki kodda onclose event'i tetiklendiğinde kullanıcılara bir connectionid ataması yapılmakta ve console.assert parametresi ile connection.state değişkeninin signalR.HubConnectionState.Disconnected değerine eşit olup olmadığını sorgulamaktayız. console.log ile ilgili durumun mesajını yazdırmaktayız.

Client tarafında basit bir örneğimiz olsun.

<!DOCTYPE html>

<html>
<head>
    <script src="~/microsoft/signalr/signalr.min.js"></script>
    <script src="~/jquery/jquery.min.js"></script>
    <script>

        $(document).ready(() => {
            var connection = new signalR.HubConnectionBuilder()
                .withUrl("https://localhost:5001/messagehub")
                .configureLogging(signalR.LogLevel.Information)
                .withAutomaticReconnect([1000, 4000, 5000, 3000, 5000, 2000, 10, 1000])
                .build();


            //Bağlantının hiç kurulmadığı  durumlarda bu fonksiyon kullanılır.
            function start() {
                connection.start().then(() => { }).catch(error => setTimeout(() => start(), 2000))
            }

            start();
            function animation() {
                status.fadeIn(2000, () => {
                    setTimeout(() => {
                        status.fadeOut(2000);
                    }, 2000);
                });
            }

            const status = $("#Status");

            //Bağlantının tekrardan sağlanmaya çalışıldığı durumlarda kullanılır.
            connection.onreconnecting(error => {
                $("#Status").css("background-color", "#6286a0");
                $("#Status").css("color", "#white");
                $("#Status").html("Bağlanılıyor");
                animation();
            });

            //Bağlantının yeniden sağlandığı durumlarda kullanılır,
            connection.onreconnected(connecitonid => {
                $("#Status").css("background-color", "#32a838");
                $("#Status").css("color", "#white");
                $("#Status").html("Bağlandı");
                animation();
            });

            //Bağlantının kulurlamadığı ve sonlandığı durumlarda kullanılır.
            connection.onclose(connecitonid => {
                $("#Status").css("background-color", "red");
                $("#Status").css("color", "#white");
                $("#Status").html("Bağlanılamadı");
                animation();
            });



            $("#btnSendButton").click(() => {
                let userName = $("#txtUserName").val();
                let message = $("#txtMassage").val();
                connection.invoke("SendingMessageAsync", message, userName);
            });

            connection.on("receivedMessage", (message, userName) => {
                $("#messagesList").append(`${userName}: ${message}<br />`);
            });

        });

    </script>
</head>
<body>
    <div id="Status" style="display:none; border-radius:40px 40px 40px 40px; text-shadow: #2d4251 5px 5px 5px;"></div>
    <div class="container">
        <div class="row p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="txtUserName" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="txtMassage" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <button type="button" id="btnSendButton">Gönder</button>
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <hr />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>

</body>
</html>

Bu yazımızın sonuna geldik. Bu yazıda SignalR da anlık bağlantı ve fonksiyonlarını ele aldık. ilgili porjenin github adresine buradan ulaşabilirsiniz. İlgilenenlerin faydalanması ümidiyle.