.Net Core’da SignalR ile Client’a Özel Background Değiştirme

Yazar: borsoft · 6 Kasım 2017

Selamlar Arkadaşlar,

Bu makalede bir sayafaya connect olan tüm userlar arasından istediğimiz bir tanesinin arka rengini, yine istediğimiz bir resim ile signalR websocket kullanarak .Net Core ortamında nasıl değiştireceğimizi beraberce inceleyeceğiz. .Net Core 2.0 ‘da SignalR üzerinde daha detaylı bilgiye buradaki makalemden erişebilirsiniz. Özellikle bu makalede anlatılmayan, signalR’ın bir .Net Core projesine eklenme adımlarını incelemenizi tavsiye ederim.

Yapılacak İşler:

Öncelikle, .Net Core ile bir Mvc projesi oluşturacağız.
Daha sonra sayfaya gelen her bir kişiyi ayırt etmek için Login sayfası yapacağız. Login için gelen kullanıcıları Session State’den konturol edeceğiz. Bunun için gene .Net Core’da bir takım Configurasyon işlemlerinin yapılması gerekmektedir. Eğer ilgili kullanıcı session’da yok ise, login sayfasına var ise Index sayfasına yönlendireceğiz.
Daha sonra signalR bir “Background:Hub” sınıfı yaratıp, ilgili client’ın bağlandığı an, yeni oluşan connectionID’sini kendisine gönderip, alınan bu Nick’i ve yeni connectionID’sini static bir listeye yok ise ekleyeceğiz var ise güncelleyeceğiz ki aynı kullanıcı bir daha geldiğinde aynı Nick’i alabilsin. Ya da 2. bir kullanıcı bir başkasının Nick’ini alamasın.
Bu işlemin sonunda değişen static listeyi tüm clientlara göndereceğiz. Bu bizim yeni Online Listemiz olacak.
Son olarak seçilen kişiye yine istenen background resmi realtime olarak signalR ile atanacaktır.

Hata ve İncelenmesi Gereken Durumları:

Aynı Nick ile 2.bir kişi sisteme dahil edilmemelidir.
Connect olan user sayfayı refresh eder ise, connectionID’si değişecektir. Tüm clientların listesinden ve static listeden, aynı Nick’e ait yeni connectionID’nin değiştirilmesi gerekmektedir.
Bir user logout olur ise, tüm clientlardan ve statick listeden çıkarılması gerekmektedir.
Statick Listenin, Mvc “HomeController” sınıfı ve “Background:Hub” sınıfı için ortak ve tek olması gerekmektedir.
Diyelim ki bir client 2 tab açtı ve 1 sini kapattı. Session’dan dolayı 2 sinde de aynı Nick’e ait farklı connectionIDler vardır. SignalR sınıfı, ilk tab kapanınca ilgili connectionID’ye ait user Nick’ini Static Listeden çıkarır. Diğer clientlarda bu user’ın aslında halen durması gerekmektedir. Çünkü gerçekte client çıkmamış, halen açık tab’i vardır. Ayrıca client’ın en son açık kalan tab’ı, geçerli olan yeni bir connectionID almalı ve bu durum da tüm clientlara bildirilmelidir. Yoksa ilgili Nick’e tıklanıp, istenen resimin listeden seçilen user’a gösterilmesi denendiğinde bu client’a erişilemiyecektir.

.NET Core Mvc Proje oluşturlması: Aşağıdaki komut ile ilgili proje oluşturulur.

dotnet new mvc -o coreSignalRPrivate

1	dotnet new mvc -o coreSignalRPrivate

Home / Index(): Sayfaya ilk gelinildiğinde “Index()” action’ına gelinir. Session’da tanımlı bir “UserName” yok ise “Login” sayfasına yönlenilir.

 public IActionResult Index()
        {
            if (HttpContext.Session.GetString("UserName") == null)
            {
                return RedirectToAction("Login");
            }

            return View();
        }

public IActionResult Index()

{

if (HttpContext.Session.GetString("UserName") == null)

{

return RedirectToAction("Login");

}

return View();

}

.Net Core’da Session Tanımlama: Öncelikle session için ilgili package aşağıda görüldüğü gibi indirilir.

dotnet add package Microsoft.AspNetCore.Session

1	dotnet add package Microsoft.AspNetCore.Session

Startup.cs’de : Aşağıda görülen configurasyon ile projede Session kullanılacağı tanımlanır.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseSession();
            .
            .
        }

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

app.UseSession();

}

Aşağıda görüldüğü gibi “ConfigurationServices()” methodunda, “services.AddSession()” methodu ile timeout süre 30 dakika olucak şekilde cookie’ye izin verilecek şekilde set edilmiştir.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddSignalR();

            services.AddDistributedMemoryCache();

            services.AddSession(options =>
            {
                // Set a short timeout for easy testing.
                options.IdleTimeout = TimeSpan.FromMinutes(30);
                options.Cookie.HttpOnly = true;
            });
        }

public void ConfigureServices(IServiceCollection services)

{

services.AddMvc();

services.AddSignalR();

services.AddDistributedMemoryCache();

services.AddSession(options =>

{

// Set a short timeout for easy testing.

options.IdleTimeout = TimeSpan.FromMinutes(30);

options.Cookie.HttpOnly = true;

});

}

Home/Login: Login sayfasına gelinir.

  public ActionResult LogIn()
        {
            return View();
        }

public ActionResult LogIn()

{

return View();

}

Login.cshtml: Bu sayfada Jquery kullanılmıştır. Sayfada bir giriş buttonu, bir de Nick yazılacak text alanı bulunmaktadır. Amaç sisteme gelen user’a daha önce alınmamış bir Nick’i verip, ilgili ismi statick bir Dictionary listeye eklemektir.

Sayfa “$(document).ready(function () {” function’ı ile yüklendikten sonra, text alana focus olunur. ==>”$(“#userName”).focus()“.
Button tıklanma durumunda “Home/Login” urline Jquery ile post işlemi yapılır. Parametre olarak name gönderilir ==>”name: $(“#userName”).val()“. Ayrıca aynı işlem, “pushEnter()” function’ı ile Enter tuşuna basılarak da yapılabilir.
Ayrıca geri dönüş değerinde ==>”if (result != “Error”)“, “Error” text’i var ise, bu böyle bir Nick’in daha önceden alınmış olduğu anlamına gelmektedir. Yok ise “Index” sayfasına yönlenilir.==>”location.href = “/Home/Index”“

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>LogIn</title>
    <script src="~/scripts/jquery.min.js"></script>   
    <script>
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                $.post("/Home/Login",
                {
                    name: $("#userName").val(),
                }, function (result) {
                    if (result != "Error") {
                        location.href = "/Home/Index";
                    }
                    else {
                        alert("Bu Nicke'de Bir Kullanıcı Vardır.");
                    }
                });
            });
            $("#userName").focus();
        });
 
        function pushEnter(event) {
            if (event.which == 13) {
                $('#btnSubmit').click();
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-5 col-md-3">
                <div class="form-login">
                    <h3>Private Background</h3>
                    <input type="text" id="userName" class="form-control input-sm chat-input" placeholder="Kullanıcı Adı Giriniz" onkeydown="pushEnter(event)" />
                    <br />
                    <div class="wrapper">
                        <span class="group-btn">
                            <a href="#" class="btn btn-primary btn-md" id="btnSubmit">Giriş Yapınız <i class="fa fa-sign-in"></i></a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<html>

<head>

<title>LogIn</title>

$(document).ready(function () {

$("#btnSubmit").click(function () {

$.post("/Home/Login",

{

name: $("#userName").val(),

}, function (result) {

if (result != "Error") {

location.href = "/Home/Index";

}

else {

alert("Bu Nicke'de Bir Kullanıcı Vardır.");

}

});

$("#userName").focus();

});

function pushEnter(event) {

if (event.which == 13) {

$('#btnSubmit').click();

}

</script>

</head>

<body>

<h3>Private Background</h3>

<br />

<a href="#" class="btn btn-primary btn-md" id="btnSubmit">Giriş Yapınız <i class="fa fa-sign-in"></i></a>

</span>

</div>

</body>

</html>

LogIn(Post): Aşağıda görüldüğü gibi ilgili nickin “UserList” static sınıfına ait bir Dictionary’de olup olmadığına “HasNick()” methodu ile bakılır. Eğer var ise, yani başka biri ilgili nick’i önceden almış ise geriye “Error” text content’i dönülür. Yok ise “Index” sayfasına yönlenilr.

Not: Burada static bir list kullanılmasının sebebi, ilgili nick listesine sadece Mvc “HomeController” sınıfından değil, aynı zamanda ilerde yazacağımız “Background : Hub” sınıfından da erişilecek olmasıdır.

 [HttpPost]
        public ActionResult LogIn(string name)
        {
            //Bu Nick daha önceden alındı mı?            
            if (!UserList.HasNick(name) && name.Trim() != "")
            {
                HttpContext.Session.SetString("UserName", name);
                return RedirectToAction("Index");
            }
            else
            {
                return Content("Error");
            }
        }
    }

[HttpPost]

public ActionResult LogIn(string name)

{

//Bu Nick daha önceden alındı mı?

if (!UserList.HasNick(name) && name.Trim() != "")

{

HttpContext.Session.SetString("UserName", name);

return RedirectToAction("Index");

}

else

{

return Content("Error");

}

UserList: Ortak kullanılan clientların Nicklerinin bir static Dictionary’de yani “_userlist”‘de saklandığı ve gerektiğinde aranıp bakıldığı bir yardımcı sınıftır. Tüm clientlar için tekil ve sabit bir liste olduğu için static olarak ayrılmıştır. Bu şekilde ayırmakta amaç, farklı yerlerde kullanılan ortak bir listeye erişmektir.

Add() : İlgili “_UserList” Dictionary’ye yeni bir Nick eklemek için kullanılır.
Remove() : İlgili “_UserList” Dictionary’den, ilerde bahsediceğimiz client’ın signalR connectionID’sinden Nick’i “GetNickByConnectionID()” methodu ile bulunup çıkarılmasıdır.
GetNickByConnectionID() : signalR sınıfından disconnect (Logout) olan clientların Nicklerinin, ilgili statick listeden çıkarılması gerekmektedir. İşte bu disconnect durumda, hub sınıfına client’ın sadece connectionID’si gelmektedir. İlgili statick dictionary listeden eleman çıkarılma işlemi sadece key ile olduğu için ilgili connectionID’ye ait nick çekilir. Bunun için, ilgili static listeden connectionID yani value ye karşılık gelen key yani Nick bulunur.
HasNick() : Sorgulanacak nick’in listede olup olmadığına bakılır. Bu işlem sayfaya connect olan clientların yeni bir Nick alması durumunda kontrol amaçlı yapılır.

 public static class UserList
    {
        static private Dictionary<string, string> _userlist = new Dictionary<string, string>();

        public static Dictionary<string, string> _UserList
        {
            get
            {
                return _userlist;
            }
        }
        public static void Add(string Nick, string ConnectionID)
        {
            _UserList[Nick] = ConnectionID;
        }
        public static void Remove(string ConnectionID)
        {
            string key=GetNickByConnectionID(ConnectionID);
            if (key != null)
            {
                _UserList.Remove(key);
            }
        }
        public static bool HasNick(string Nick)
        {
            return _UserList.Any(cl => cl.Key.ToUpper() == Nick.ToUpper());
        }
        public static string GetNickByConnectionID(string ConnectionID)
        {
            return _UserList.FirstOrDefault(cl => cl.Value == ConnectionID).Key;
        }
    }

public static class UserList

{

static private Dictionary<string, string> _userlist = new Dictionary<string, string>();

public static Dictionary<string, string> _UserList

{

get

{

return _userlist;

}

public static void Add(string Nick, string ConnectionID)

{

_UserList[Nick] = ConnectionID;

}

public static void Remove(string ConnectionID)

{

string key=GetNickByConnectionID(ConnectionID);

if (key != null)

{

_UserList.Remove(key);

}

public static bool HasNick(string Nick)

{

return _UserList.Any(cl => cl.Key.ToUpper() == Nick.ToUpper());

}

public static string GetNickByConnectionID(string ConnectionID)

{

return _UserList.FirstOrDefault(cl => cl.Value == ConnectionID).Key;

}

Index Sayfasına gelmeden önce gelin hep beraber “Background : Hub” sınıfını hep beraber inceleyelim.

Background : Hub:

“OnConnectedAsync()” : Client’ın SignalR sınıfına connect olduğu an tetiklenen methoddur. Burada connect olan client’a ait signalR connectionID’si alınıp, ilgili user’ın client sidedaki “SetConnectionId()” function’ına parametre olarak gönderilmiştir. Böylece her client’ın imsazısı yani erişin adresi kendi üzerinde saklanır hale getirilmiştir.
“OnDisconnectedAsync()” : Client’ın browser’ını kapattığı zaman ya da başka bir sebepten dolayı signalR sınıfı ile olan connection’ı kopunca ilgili method devreye girer. Burda ayrılan client’ın connectionID’si alınır. Tüm kayıtlı userların bulunduğu static Dictionary UserList’den çıkartılır. Ve listenin son (“UserList._UserList”) hali, tüm clientların “SetListDisconnect()” functionına gönderilir. Böylece comboya dolacak olan isimlerden ayrılan client çıkarılmış olunur. Kısacası Server Side’dan Client Side’a bir push notify atılmış olunur.
- NOT: Gerçek hayatta tüm liste değil, sadece çıkan client’ın bilgileri gönderilmelidir. Ayrıca client side tarafda da, ilgili combo listesinden sadece bu gönderilen client bilgisi çıkarılarak listelenmelidir. Makalenin amacından uzaklaşmaması ve kodları daha da fazla uzamaması için bu basit ama performans katledici :) yöntem ile yapılmıştır. Bu yöntem size ödev olsun. Geri dönüşlerinizi bekliyeceğim.
“AddUserList()“: Bu method client side taraftan çağrılarak, connect olan client’ın static Dictionary UserList’e eklenmesini sağlamaktadır. Daha sonrasında, güncel liste gene tüm clientların “SetList()” function’ına parametre olarak gönderilmektedir. İlgili method parametre olarak, yeni gelen client’ın username’ini ve connectionID’sini almaktadır.
- Sayfanın çalışma döngüsü : sayfanın ilerisinde bu konu ile ilgili detaylı bir abak bulunmaktadır.
  1. Login olan client SignalR sınıfının “1-OnConnectedAsync()” methoduna gelir. Burdan ==>
  2. Connect olan user’ın Client Side tarafdaki “2-SetConnectionId()” function’ına gelinir. Burdan ==>
  3. Tekrardan server side tarafdaki “3-AddUserList()” methoduna gelinir. Burdan ==>
  4. Tüm clientlar’ın “4-SetList()” function’ına gelinir.
“ChangeBackground()“: İlgili client’a gösterilecek resim bilgisinin gönderildiği methoddur. Parametre olarak gönderilecek client’ın connectionID’sini ve gösterilecek resmin adını almaktadır. Gösterilecek resmin adı, ilgili client’ın “ChangeImage()” function’ına paramete olarak gönderilir.

 public class Background : Hub
    {
        public override Task OnConnectedAsync()
        {
            return Clients.Client(Context.ConnectionId).InvokeAsync("SetConnectionId", Context.ConnectionId);
        }
        public override Task OnDisconnectedAsync(Exception exception)
        {
            var connectionID = Context.ConnectionId;
            UserList.Remove(connectionID);
            return Clients.All.InvokeAsync("SetListDisconnect", UserList._UserList);
        }
        public Task AddUserList(string userName, string connectionID)
        {
            UserList.Add(userName, connectionID);            
            return Clients.All.InvokeAsync("SetList", UserList._UserList);
        }
        public Task ChangeBackground(string connectionID,string image)
        {
            return Clients.Client(connectionID).InvokeAsync("ChangeImage", image);
        }
    }

public class Background : Hub

{

public override Task OnConnectedAsync()

{

return Clients.Client(Context.ConnectionId).InvokeAsync("SetConnectionId", Context.ConnectionId);

}

public override Task OnDisconnectedAsync(Exception exception)

{

var connectionID = Context.ConnectionId;

UserList.Remove(connectionID);

return Clients.All.InvokeAsync("SetListDisconnect", UserList._UserList);

}

public Task AddUserList(string userName, string connectionID)

{

UserList.Add(userName, connectionID);

return Clients.All.InvokeAsync("SetList", UserList._UserList);

}

public Task ChangeBackground(string connectionID,string image)

{

return Clients.Client(connectionID).InvokeAsync("ChangeImage", image);

}

Geldik tüm işin yürüdüğü “Index” sayfasına:

Index.cshtm: Bu sayfada signalR ve jquery kütüphaneleri kullanılmıştır. Bir daha hatırlatmak isterim. Artık signalR jquery kütüphanesine ihtiyaç duymamaktadır. Zaten bu projede de jquery özellikle signalR kütüphanesinden sonra tanımlanmıştır. Jquery bu projede tamamen benim kendi inisiyatifimde kullanılmıştır.

“@using Microsoft.AspNetCore.Http” : Session’dan Username bilgisinin alınabilmesi için eklenmiştir.
“<script src=”~/scripts/signalr-client-1.0.0-alpha2-final.min.js”></script>” : İlgili signalR ve Jquery kütüphaneleri eklenir.
“let connection = new signalR.HubConnection(‘background’)” : Server side taraftaki “Background: Hub” sınıfına bağlanılır.
“connection.on(‘SetConnectionId’, data =>” : Client’ın Server Side tarafta, ilgili Background sınıfına connect olması durumunda “OnConnectedAsync()” methodu tarafından çağrılan functiondır. Burada kendisine parametre olarak gönderilen “ConnectionID” degerini ve Session’dan (“@Context.Session.GetString(“UserName”)“) aldığı UserName’i hidden fieldlara atar. Sonra da bu Nick’in, server side taraftaki statick dictionary bir List’de saklanması için “AddUserList()” methoduna gönderir.

 connection.on('SetConnectionId', data => {
                $("#hdnConnectionID").val(data);
                $("#hdnUserName").val('@Context.Session.GetString("UserName")');
                console.log($("#hdnUserName").val());
                console.log("ConnectionID : "+data);
                
                connection.invoke('AddUserList', $("#hdnUserName").val(),data);
        });

connection.on('SetConnectionId', data => {

$("#hdnConnectionID").val(data);

$("#hdnUserName").val('@Context.Session.GetString("UserName")');

console.log($("#hdnUserName").val());

console.log("ConnectionID : "+data);

connection.invoke('AddUserList', $("#hdnUserName").val(),data);

});

“connection.on(‘ChangeImage’, data => {” : Diğer bir client’dan kendisine atanan resmin, “pictureDiv” id’li html element’in arka rengi olarak atandığı yerdir.

connection.on('ChangeImage', data => {
                    $('#pictureDiv').css('background-image',"url(/images/" + data + ".jpg)");
        });

connection.on('ChangeImage', data => {

$('#pictureDiv').css('background-image',"url(/images/" + data + ".jpg)");

});

“connection.on(‘SetListDisconnect’, data => {” : Herhangi bir client’ın disconnect olduğu zaman server side tarafında “OnDisconnectedAsync()” methodu tarafından tetiklenen, yeni UserList’in parametre olarak gönderildiği functiondır. Burda başlıca 2 durum sözkonusudur:
1. Gönderilen liste boş ise: Diyelimki Online tek bir client var ve 2 tab açmış. 1 tanesini kapatılır ise kendisi de listeden çıkarılacağı için geriye dönen liste boş olur. İşte bu neden ile ana sayfa yönlendirilmiş ve tekrar son client’ın connect olması sağlanmıştır. Böylece 2. bir tab açılması ile pasif hale gelen ilk tab, 2. tab’in kapatılması ile tekrardan yeni bir connectionID alınarak aktif hale getirilmiştir.
2. Bu durumda geriye içi dolu bir UserList dönülmüştür. Bu koşul da kendi içinde 2 duruma ayrılmaktadır.
  1. Gönderilen UserList içinde client’ın kendi UserName’i var ise, ilgili liste gezilerek “selectUser“‘id li (<select>) html elementi altına, her bir item(Nick, connectionID) tek tek eklenir.
  2. Eğer ilgili liste içerisinde client’ın UserName’i yok ise ==> Aynı user için 2 tab açılması ve 1’inin kapatılması durumu sözkonusudur. Bu durumda yukarıda bahsedildiği gibi, eski pasif tab’in aktif hale getirlimesi ve tekrardan yeni bir connectionID alması için ==>”window.location.href =”/Home/Index”” ana sayfaya yönlenme işlemi yapılır.

connection.on('SetListDisconnect', data => {
            if(jQuery.isEmptyObject(data)){
                return window.location.href ="/Home/Index";
            }            
            else
            {
                var haskey=false;
                $.each(data,function(key, value) 
                {
                    console.log("Key="+key.toUpperCase());
                    console.log("name="+$("#hdnUserName").val().toUpperCase());
                    if($("#hdnUserName").val().toUpperCase()==key.toUpperCase()){
                        haskey=true
                    }
                });
                if(haskey==false){
                    return window.location.href ="/Home/Index";
                }
            }
            $('#selectUser').empty();
            $.each(data,function(key, value) 
            {               
                $('#selectUser').append('<option value=' + value + '>' + key + '</option>');
            });
            console.log(JSON.stringify(data));
        });

connection.on('SetListDisconnect', data => {

if(jQuery.isEmptyObject(data)){

return window.location.href ="/Home/Index";

}

else

{

var haskey=false;

$.each(data,function(key, value)

{

console.log("Key="+key.toUpperCase());

console.log("name="+$("#hdnUserName").val().toUpperCase());

if($("#hdnUserName").val().toUpperCase()==key.toUpperCase()){

haskey=true

}

});

if(haskey==false){

return window.location.href ="/Home/Index";

}

$('#selectUser').empty();

$.each(data,function(key, value)

{

$('#selectUser').append('<option value=' + value + '>' + key + '</option>');

});

console.log(JSON.stringify(data));

});

“connection.on(‘SetList’, data => {” : Yeni bir kullanıcı signalR “background:Hub” sınıfına connect olduğu anda server side taraftaki “OnConnectedAsync()” methodu tetiklenir. Burada connect olan client’a ait connectionID çekilir. Daha sonra bu method da çekilen connectionID ile beraber==> Client Side taraftaki “SetConnectionID()” function’ını tetikler. Bu function’da, alınan Nick ve connectionID client side tarafdaki hidden alanlara saklanır. Bu function’ın sonunda ==> server side taraftaki “AddUserList()” methodu çağrılır. Burda da en son alınan Nick ve connectionID, static bir listeye kaydedilir. Burdan da en sonunda client site tarafındaki ==> “Setlist()” function’ını çağrır. Bu function’da, yeni gelen client’ın bilgilerinin de eklendiği statict Dictionary UserList’i gezilerek, “selectUser” dropdown list’i doldurulur.

connection.on('SetList', data => {            
            $('#selectUser').empty();
            $.each(data,function(key, value) 
            {               
                $('#selectUser').append('<option value=' + value + '>' + key + '</option>');
            });
            console.log(JSON.stringify(data));
        });

connection.on('SetList', data => {

$('#selectUser').empty();

$.each(data,function(key, value)

{

$('#selectUser').append('<option value=' + value + '>' + key + '</option>');

});

console.log(JSON.stringify(data));

});

“$(“.img-check”).click(function(){” : Sıralanan resimlerden biri tıklanıldığı zaman, Server Side tarafdaki “ChangeBackground()” function’ı tıklanan resmin adı ile birlikte tetiklenir. Amaç ilgili resmin seçilen client’da gösterilmesidir.

$(".img-check").click(function(){
                    connection.invoke('ChangeBackground', $("#selectUser").val(),$(this).attr("alt"));
                    console.log($(this).attr("alt"));
				    $(this).toggleClass("check");
			});

$(".img-check").click(function(){

connection.invoke('ChangeBackground', $("#selectUser").val(),$(this).attr("alt"));

console.log($(this).attr("alt"));

$(this).toggleClass("check");

});

Index.cshtml: Sayfanın tam kodu.

@using Microsoft.AspNetCore.Http;
<script src="~/scripts/signalr-client-1.0.0-alpha2-final.min.js"></script>  
<script src="~/scripts/jquery.min.js"></script>   
<script>
    let connection = new signalR.HubConnection('background');
    connection.on('SetConnectionId', data => {
                $("#hdnConnectionID").val(data);
                $("#hdnUserName").val('@Context.Session.GetString("UserName")');
                console.log($("#hdnUserName").val());
                console.log("ConnectionID : "+data);
                
                connection.invoke('AddUserList', $("#hdnUserName").val(),data);
        }); 

        /*connection.on('Close', data =>{
                   var popup = window.open(location, '_self', '');
                   popup.close();
        });*/

        connection.on('ChangeImage', data => {
                    $('#pictureDiv').css('background-image',"url(/images/" + data + ".jpg)");
        });

        connection.on('SetListDisconnect', data => {
            if(jQuery.isEmptyObject(data)){
                return window.location.href ="/Home/Index";
            }            
            else
            {
                var haskey=false;
                $.each(data,function(key, value) 
                {
                    console.log("Key="+key.toUpperCase());
                    console.log("name="+$("#hdnUserName").val().toUpperCase());
                    if($("#hdnUserName").val().toUpperCase()==key.toUpperCase()){
                        haskey=true
                    }
                });
                if(haskey==false){
                    return window.location.href ="/Home/Index";
                }
            }
            $('#selectUser').empty();
            $.each(data,function(key, value) 
            {               
                $('#selectUser').append('<option value=' + value + '>' + key + '</option>');
            });
            console.log(JSON.stringify(data));
        });
        connection.on('SetList', data => {            
            $('#selectUser').empty();
            $.each(data,function(key, value) 
            {               
                $('#selectUser').append('<option value=' + value + '>' + key + '</option>');
            });
            console.log(JSON.stringify(data));
        });
        connection.start();
        $(document).ready(function () {
            	$(".img-check").click(function(){
                    connection.invoke('ChangeBackground', $("#selectUser").val(),$(this).attr("alt"));
                    console.log($(this).attr("alt"));
				    $(this).toggleClass("check");
			});
        });
</script>
<style>
    .check
    {
        opacity:0.5;
	    color:#996;	
    }
    select{
        font-size:25px;
    }
</style>
<div class="container">
    <div class="jumbotron">
       <h2 style="text-align:center">@Html.Raw('@')@Context.Session.GetString("UserName") Profil Sayfası</h2>
    </div>
    <hr>
    <table>
        <tr>
            <td>
                <h3>Gönderilecek Kişi:</h3>
                <select id="selectUser"></select>
                <input type="hidden" id="hdnUserName" />
                <input type="hidden" id="hdnConnectionID" />
            </td>            
            <td style="padding-left: 50px">
                <h3>Arka Resimler :</h3>
                <div class="form-group">	                 
                    <div class="col-md-3"><label class="btn btn-primary"><img src="~/images/painting.jpg"  class="img-thumbnail img-check" width="100" height="50" alt="painting"><input type="checkbox" name="painting" id="painting" value="painting" class="hidden" autocomplete="off"></label></div>
                    <div class="col-md-3"><label class="btn btn-primary"><img src="~/images/Oldmans.jpg" class="img-thumbnail img-check" width="100" height="50" alt="oldmans"><input type="checkbox" name="oldmans" id="oldmans" value="oldmans" class="hidden" autocomplete="off"></label></div>                    
                    <div class="col-md-3"><label class="btn btn-primary"><img src="~/images/SeeView.jpg"  class="img-thumbnail img-check" width="100" height="50" alt="seeView"><input type="checkbox" name="seeview" id="seeView" value="seeView" class="hidden" autocomplete="off"></label></div>
                    <div class="col-md-3"><label class="btn btn-primary"><img src="~/images/Picnic.jpg"  class="img-thumbnail img-check" width="100" height="50" alt="picnic"><input type="checkbox" name="picnic" id="picnic" value="picnic" class="hidden" autocomplete="off"></label></div>
                </div>          
            </td>
        </tr>
    </table>
    <div id="pictureDiv" style="width:1000px; height:500px; background-size: 1000px 500px" ></div>
</div>

100

101

102

@using Microsoft.AspNetCore.Http;

let connection = new signalR.HubConnection('background');

connection.on('SetConnectionId', data => {

$("#hdnConnectionID").val(data);

$("#hdnUserName").val('@Context.Session.GetString("UserName")');

console.log($("#hdnUserName").val());

console.log("ConnectionID : "+data);

connection.invoke('AddUserList', $("#hdnUserName").val(),data);

});

/*connection.on('Close', data =>{

var popup = window.open(location, '_self', '');

popup.close();

});*/

connection.on('ChangeImage', data => {

$('#pictureDiv').css('background-image',"url(/images/" + data + ".jpg)");

});

connection.on('SetListDisconnect', data => {

if(jQuery.isEmptyObject(data)){

return window.location.href ="/Home/Index";

}

else

{

var haskey=false;

$.each(data,function(key, value)

{

console.log("Key="+key.toUpperCase());

console.log("name="+$("#hdnUserName").val().toUpperCase());

if($("#hdnUserName").val().toUpperCase()==key.toUpperCase()){

haskey=true

}

});

if(haskey==false){

return window.location.href ="/Home/Index";

}

$('#selectUser').empty();

$.each(data,function(key, value)

{

$('#selectUser').append('<option value=' + value + '>' + key + '</option>');

});

console.log(JSON.stringify(data));

});

connection.on('SetList', data => {

$('#selectUser').empty();

$.each(data,function(key, value)

{

$('#selectUser').append('<option value=' + value + '>' + key + '</option>');

});

console.log(JSON.stringify(data));

});

connection.start();

$(document).ready(function () {

$(".img-check").click(function(){

connection.invoke('ChangeBackground', $("#selectUser").val(),$(this).attr("alt"));

console.log($(this).attr("alt"));

$(this).toggleClass("check");

});

</script>

<style>

.check

{

opacity:0.5;

color:#996;

}

select{

font-size:25px;

}

</style>

<h2 style="text-align:center">@Html.Raw('@')@Context.Session.GetString("UserName") Profil Sayfası</h2>

</div>

<hr>

<table>

<tr>

<td>

<h3>Gönderilecek Kişi:</h3>

</td>

<h3>Arka Resimler :</h3>

</div>

</td>

</tr>

</table>

</div>

Projenin Genel Profili:

Geldik bir makalenin daha sonuna. Bu makalede bir .Net Core Mvc projesinde signalR ile iki client arasında nasıl private iletişeme geçildiğini hep beraber inceledik. Private iletişimde en önemli sorun Connection’ın kaybedilmesidir. İşte bu ve bunun gibi sorunları da neler yapabileceğimizi detaylıca inceledik. Bunun yanında bakmadığımız en önemli konu güvenlik. Bununla ilgili de ilerde bizi güzel şeyler bekliyor. Yukarıda gördüğünüz örümcek ağına benzeyen geçişler :) Client Side ve Server Side tarafdaki bağımlılığı ve herbirine düşen görevleri işleme sırası ile birlikte göstermektedir.

Yeni bir makalede görüşmek üzere hoşçakalın.

Source Code : https://github.com/borakasmer/.NetCoreSignalRPrivateBackgroundChange

Ahmet dedi ki:

11 Aralık 2017, 17:26

Bora abi selamlar, bu mükemmel makale için teşekkürler. Projeyi win 2012 server iis 8.5 a deploy ettiğimde. background SignalR Hub için 404 (Not Found) hatası alıyorum ama localhost da çalışıyor. Hatanın nedeni ne olabilir ?

Cevapla
- borsoft dedi ki:
  
  7 Ocak 2018, 16:12
  
  Büyük ihtimalle SignalR server’a IP’si ile gitmiyorsun. Ya da SignalR’da Cross Domain problemi yaşıyorsun. Şöyle bir ayar yapman lazım:
  
  public class Startup
  {
  public void Configuration(IAppBuilder app)
  {
  app.Map(“/signalr”, map =>
  {
  map.UseCors(CorsOptions.AllowAll);
  var hubConfiguration = new HubConfiguration { };
  map.RunSignalR(hubConfiguration);
  });
  }
  }
  
  Cevapla
  - ahmet dedi ki:
    
    23 Ocak 2018, 13:59
    
    Abi cross origin problemini dediğin gibi çözdüm fakat ip adresi ile erişmeme rağmen hub bulunamıyor.
    Error: Failed to start the connection. Error: Not Found şeklinde hata alıyorum
    
    Cevapla

.Net Core’da SignalR ile Client’a Özel Background Değiştirme

Bunlar da hoşunuza gidebilir...

3 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

.Net Core’da SignalR ile Client’a Özel Background Değiştirme

Bunlar da hoşunuza gidebilir...

C# 9.0 İle Gelen Yeni Özellikler

Gelişim Üniversitesi Semineri Mvc,Signalr,AngularJs ve Azure İle Bir Projeyi Canlı Yazıyoruz

DevNot Ankara 2018 – Angular ve SignalR ile Gerçek Zamanlı Oyun Geliştirmek

3 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler