SelamünAleyküm, geçtiğimiz yazıda SignalR'da anlık bağlantı ve durum fonksiyonlarını ele almıştık, bu yazıda ise server tarafında bağlantı olaylarını ele alacağız.
İlk olarak SignalR, bir client'ın bir SignalR hub'ına bağlandığında veya bağlantısı kesildiğinde tetiklenen event'lerdir ( olaylardır ). Bu event'ler, client bağlantılarını yönetmek ve clinet ile server arasında iletişim kurmak amaçlı kullanılır.
Hub'a yapalına bağlantı isteklerini kontrol etmek ve izelemek için OnConnectedAsync ve OnDisconnectedAsync adında virtual ( sanal ) metotlarımız bulunmakta. Bu iki metodu da override edip, herhangi bir Hub'a bağlı olunup olunmadığından haberdar olup ihtiyaca binaen gerekli aksiyonları alabiliriz;
Herhangi bir client Hub'ımıza bağlantı kurduğunda tetiklenen event'tir. Hub'a bağlanan client'a ait connectionId vb. bilgileri elde edebiliriz. Bu şekilde, bütün bağlantıları izleyip yönetebiliriz.
public async override Task OnConnectedAsync()
{
await Clients.All.SendAsync("JoinedUser", $"{Context.ConnectionId}");
}
Herhangi bir clinet Hub'ımıza bağlı iken herhangi bir sebepten ötürü bağlantısının kopması durumunda tetiklenen event'tir. Bağlantının kopması ile eşzamalı olarak bize gelecek verilerin istatistiklerini elde edebiliriz.
async public override Task OnDisconnectedAsync(Exception exception)
{
await Clients.All.SendAsync("LeavedUser", $"{Context.ConnectionId}");
}
| Not: | Bağlantı event'leri SignalR projelerimizde loglama yapmaya oldukça müsait fonksiyon yapılanmalarıdır. |
Misalen, önceki yazmızdaki örneğimiz olduğu gibi kalsın, üzerine OnConnectedAsync ve OnDisconnectedAsync fonksiyonlarını override edelim.
public class MessageHub : Hub
{
public async Task SendingMessageAsync(string message, string userName)
{
await Clients.All.SendAsync("receivedMessage", message, userName);
}
public async override Task OnConnectedAsync()
{
await Clients.All.SendAsync("JoinedUser", $"{Context.ConnectionId}");
}
async public override Task OnDisconnectedAsync(Exception exception)
{
await Clients.All.SendAsync("LeavedUser", $"{Context.ConnectionId}");
}
}
Şimdi ise client tarafında bu durumu gösterecek şekilde revize edelim
<!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);
});
}
//Bağlantı sağlnadığında server'a client'ın bağlantı sağlandığını belirtir ve client tarafında kısa süreliğine hangi client'ın bağlandığını gösterir.
connection.on("JoinedUser", connectionId => {
$("#clinetstatus").html(`${connectionId} katıldı.`);
$("#clinetstatus").fadeIn(2000, () => {
setTimeout(() => {
$("#clinetstatus").fadeOut(2000);
}, 2000);
});
});
//Bağlantı koptuğunda server'a client'ın bağlantının koptuğunu belirtir ve client tarafında kısa süreliğine hangi client'ın ayrıldığını gösterir.
connection.on("LeavedUser", connectionId => {
$("#clinetstatus").html(`${connectionId} Ayrıldı.`);
$("#clinetstatus").fadeIn(2000, () => {
setTimeout(() => {
$("#clinetstatus").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 class="alert alert-success" id="clinetstatus" style="display:none;">
A Simple success alret yeri
</div>
<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>
Ayrıca yazımızı zengişleşmesi adına bir Console Application projesi oluşturalım ve birden fazla client ile aynı SignalR server'ına bağlayalım.
using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Threading.Tasks;
namespace SignalRConsoleExample
{
public class Program
{
static HubConnection connection;
async static Task Main(string[] args)
{
connection = new HubConnectionBuilder().WithUrl("https://localhost:5001/messagehub").Build();
await connection.StartAsync();
Console.WriteLine(connection.State);
connection.On<string, string>("receivedMessage", (message, userName) =>
{
Console.WriteLine($"{userName}: {message}");
});
connection.On<string>("JoinedUser", userid =>
{
Console.WriteLine($"{userid} Katıldı");
});
connection.On<string>("LeavedUser", userid =>
{
Console.WriteLine($"{userid} Ayrıldı");
});
while (true)
{
Console.WriteLine("Mesajınız: ");
await connection.InvokeAsync("SendingMessageAsync", Console.ReadLine());
}
}
}
}
Bu Console projesi üzerinden SignalR ile nasıl bağlanıldığına dair bir örnek teşkil ediyor, ilerleyeneyazılarda Console Aplication üzerinde daha ayrıntılı olacak şekilde anlatılacaktır. Şimdi Console projemizide çalışıtralım.
Sırada server'a bağlanan client'ları listelemek için clients adındaki fonksiyonu kullanacağız.
public class MessageHub : Hub
{
static List<string> clients = new List<string>();
public async Task SendingMessageAsync(string message, string userName)
{
await Clients.All.SendAsync("receivedMessage", message, userName);
}
public async override Task OnConnectedAsync()
{
clients.Add(Context.ConnectionId);
await Clients.All.SendAsync("clients", clients);
await Clients.All.SendAsync("JoinedUser", $"{Context.ConnectionId}");
}
async public override Task OnDisconnectedAsync(Exception exception)
{
clients.Remove(Context.ConnectionId);
await Clients.All.SendAsync("clients", clients);
await Clients.All.SendAsync("LeavedUser", $"{Context.ConnectionId}");
}
}
Yukarıda olduğu gibi "clients" fonksiyonu dinlendiği vakit Hub'a bağlı olan client'ların verileri elde etmiş oluruz. Client tarafını şu şekilde revize edebiliriz.
@{
Layout = null;
}
<!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);
});
}
//Bağlantı sağlnadığında server'a client'ın bağlantı sağlandığını belirtir ve client tarafında kısa süreliğine hangi client'ın bağlandığını gösterir.
connection.on("JoinedUser", connectionId => {
$("#clinetstatus").html(`${connectionId} katıldı.`);
$("#clinetstatus").fadeIn(2000, () => {
setTimeout(() => {
$("#clinetstatus").fadeOut(2000);
}, 2000);
});
});
//Bağlantı koptuğunda server'a client'ın bağlantının koptuğunu belirtir ve client tarafında kısa süreliğine hangi client'ın ayrıldığını gösterir.
connection.on("LeavedUser", connectionId => {
$("#clinetstatus").html(`${connectionId} Ayrıldı.`);
$("#clinetstatus").fadeIn(2000, () => {
setTimeout(() => {
$("#clinetstatus").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 />`);
});
//Server'a bağlanan tüm client'ları listeler
connection.on("clients", clients => {
let klnc= "";
for (const client in clients) {
klnc+= `<li>${clients[client]}</li>`;
}
$("#clients").html(klnc);
});
});
</script>
</head>
<body>
<div class="alert alert-success" id="clinetstatus" style="display:none;">
A Simple success alret yeri
</div>
<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>
<ul id="clients" >
</ul>
</body>
</html>
Bu yazımın sonuna geldik. Bu yazıda SignalR'da bağlantı olaylarını ele almış olduk, ilgili projenin github adresine buradan ulaşabilirsiniz. İlgilenenlerin faydalanması ümidiyle.
Yazılım, teknoloji ve daha fazlası için bizi takip edin.
© Techno Guide. Tüm Hakları Saklıdır.
HTML Codex Tasarımıdır.
