ASP.NET SignalR Hubs API Kılavuzu - JavaScript İstemcisi

Uyarı

Bu belgeler SignalR'nin en son sürümüne yönelik değildir. ASP.NET Core SignalR'ye göz atın.

Bu belge tarayıcılar ve Windows Mağazası (WinJS) uygulamaları gibi JavaScript istemcilerinde SignalR sürüm 2 için Hubs API'sini kullanmaya giriş niteliğindedir.

SignalR Hubs API'leri, bir sunucudan bağlı istemcilere ve istemcilerden sunucuya uzaktan yordam çağrıları (RPC' ler) yapmanıza olanak tanır. Sunucu kodunda, istemciler tarafından çağrılabilecek yöntemler tanımlarsınız ve istemcide çalışan yöntemleri çağırırsınız. İstemci kodunda, sunucudan çağrılabilecek yöntemler tanımlarsınız ve sunucuda çalışan yöntemleri çağırırsınız. SignalR, istemciden sunucuya tüm tesisatı sizin için halleder.

SignalR ayrıca Kalıcı Bağlantılar adlı alt düzey bir API sunar. SignalR, Hubs ve Kalıcı Bağlantılar'a giriş için bkz. SignalR'ye giriş.

Bu konuda kullanılan yazılım sürümleri

Bu konunun önceki sürümleri

SignalR'nin önceki sürümleri hakkında bilgi için bkz. SignalR Eski Sürümleri.

Sorular ve yorumlar

Lütfen bu öğreticiyi nasıl beğendiğiniz ve sayfanın altındaki yorumlarda neleri geliştirebileceğimiz hakkında geri bildirim bırakın. Öğreticiyle doğrudan ilgili olmayan sorularınız varsa bunları ASP.NET SignalR forumunu veya StackOverflow.com gönderebilirsiniz.

Genel bakış

Bu belge aşağıdaki bölümleri içerir:

Sunucuyu veya .NET istemcilerini programlama hakkında belgeler için aşağıdaki kaynaklara bakın:

SignalR 2 sunucu bileşeni yalnızca .NET 4.5'te kullanılabilir (.NET 4.0 üzerinde SignalR 2 için bir .NET istemcisi vardır).

Oluşturulan ara sunucu ve sizin için yaptıkları

Bir JavaScript istemcisini, SignalR'nin sizin için oluşturduğu bir ara sunucuyla veya proxy olmadan SignalR hizmetiyle iletişim kuracak şekilde programlayabilirsiniz. Ara sunucunun sizin için yaptığı, bağlanmak için kullandığınız kodun söz dizimini basitleştirmek, sunucunun çağırdığı yöntemleri yazmak ve sunucuda yöntemleri çağırmaktır.

Sunucu yöntemlerini çağırmak için kod yazdığınızda, oluşturulan ara sunucu yerel bir işlevi yürütüyormuş gibi görünen söz dizimini kullanmanıza olanak tanır: yerine serverMethod(arg1, arg2)yazabilirsinizinvoke('serverMethod', arg1, arg2). Oluşturulan proxy söz dizimi, bir sunucu yöntemi adını yanlış yazarsanız anında ve anlaşılır bir istemci tarafı hatasına da olanak tanır. Proxy'leri tanımlayan dosyayı el ile oluşturursanız, sunucu yöntemlerini çağıran kod yazmak için IntelliSense desteği de alabilirsiniz.

Örneğin, sunucuda aşağıdaki Hub sınıfına sahip olduğunuzu varsayalım:

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

Sunucuda NewContosoChatMessage yöntemini çağırmak ve sunucudan addContosoChatMessageToPage yönteminin çağrılarını almak için JavaScript kodunun nasıl göründüğünü aşağıdaki kod örnekleri gösterir.

Oluşturulan proxy ile

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
    console.log(name + ' ' + message);
};
$.connection.hub.start().done(function () {
    // Wire up Send button to call NewContosoChatMessage on the server.
    $('#newContosoChatMessage').click(function () {
         contosoChatHubProxy.server.newContosoChatMessage($('#displayname').val(), $('#message').val());
         $('#message').val('').focus();
     });
});

Oluşturulan proxy olmadan

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(name, message) {
    console.log(name + ' ' + message);
});
connection.start().done(function() {
    // Wire up Send button to call NewContosoChatMessage on the server.
    $('#newContosoChatMessage').click(function () {
        contosoChatHubProxy.invoke('newContosoChatMessage', $('#displayname').val(), $('#message').val());
        $('#message').val('').focus();
                });
    });

Oluşturulan ara sunucu ne zaman kullanılır?

Sunucunun çağırabileceği bir istemci yöntemi için birden çok olay işleyicisi kaydetmek istiyorsanız, oluşturulan proxy'yi kullanamazsınız. Aksi takdirde, oluşturulan ara sunucuyu kullanmayı seçebilir veya kodlama tercihinize bağlı olarak kullanamazsınız. Kullanmamayı seçerseniz, istemci kodunuzda bir script öğedeki "signalr/hubs" URL'sine başvurmanız gerekmez.

İstemci kurulumu

JavaScript istemcisi jQuery ve SignalR core JavaScript dosyasına başvuru gerektirir. jQuery sürümü 1.6.4 veya 1.7.2, 1.8.2 ya da 1.9.1 gibi daha sonraki daha büyük sürümler olmalıdır. Oluşturulan ara sunucuyu kullanmaya karar verirseniz SignalR tarafından oluşturulan ara sunucu JavaScript dosyasına da başvurmanız gerekir. Aşağıdaki örnekte, oluşturulan ara sunucuyu kullanan bir HTML sayfasında başvuruların nasıl görünebileceği gösterilmektedir.

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src="signalr/hubs"></script>

Bu başvurular şu sırayla dahil edilmelidir: önce jQuery, bundan sonra SignalR çekirdeği ve en son SignalR proxy'leri.

Dinamik olarak oluşturulan ara sunucuya başvurma

Yukarıdaki örnekte SignalR tarafından oluşturulan ara sunucuya başvuru, fiziksel bir dosyaya değil dinamik olarak oluşturulmuş JavaScript koduna yöneliktir. SignalR, ara sunucu için JavaScript kodunu anında oluşturur ve "/signalr/hubs" URL'sine yanıt olarak istemciye sunar. Yönteminizdeki MapSignalR sunucuda SignalR bağlantıları için farklı bir temel URL belirttiyseniz, dinamik olarak oluşturulan proxy dosyasının URL'si, sonuna "/hubs" eklenmiş özel URL'nizdir.

Uyarı

Windows 8 (Windows Mağazası) JavaScript istemcileri için dinamik olarak oluşturulan dosya yerine fiziksel proxy dosyasını kullanın. Daha fazla bilgi için bu konunun devamında SignalR tarafından oluşturulan ara sunucu için fiziksel dosya oluşturma konusuna bakın.

ASP.NET MVC 4 veya 5 Razor görünümünde, proxy dosya referansınızda uygulama köküne başvurmak için tilde'yi kullanın.

<script src="~/signalr/hubs"></script>

MVC 5'te SignalR kullanma hakkında daha fazla bilgi için bkz. SignalR ve MVC 5'i Kullanmaya Başlama.

ASP.NET MVC 3 Razor görünümünde proxy dosya başvurusu için Url.Content kullanın.

<script src="@Url.Content("~/signalr/hubs")"></script>

ASP.NET Web Forms uygulamasında, proxy dosyası başvurunuzu ResolveClientUrl olarak kullanın veya bir uygulama kök göreli yolu (tilde ile başlayan) kullanarak ScriptManager aracılığıyla kaydedin.

<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>

Genel bir kural olarak, CSS veya JavaScript dosyaları için kullandığınız "/signalr/hubs" URL'sini belirtmek için aynı yöntemi kullanın. Tilde kullanmadan bir URL belirtirseniz, bazı senaryolarda UYGULAMANıZ IIS Express kullanarak Visual Studio'da test ettiğinizde düzgün çalışır, ancak tam IIS'ye dağıttığınızda 404 hatasıyla başarısız olur. Daha fazla bilgi için, MSDN sitesindeki ASP.NET Web Projeleri için Visual Studio'da Web Sunucuları belgesinde Root-Level Kaynaklarına Başvuruları Çözümleme bölümüne bakın.

Visual Studio 2017'de hata ayıklama modunda bir web projesi çalıştırdığınızda ve tarayıcı olarak Internet Explorer kullanıyorsanız, Proxy dosyasını Çözüm Gezgini'ndeBetikler altında görebilirsiniz.

Dosyanın içeriğini görmek için hubs dosyasına çift tıklayın. Visual Studio 2012 veya 2013 ve Internet Explorer kullanmıyorsanız veya hata ayıklama modunda değilseniz, "/signalR/hubs" URL'sine göz atarak dosyanın içeriğini de alabilirsiniz. Örneğin, siteniz http://localhost:56699 adresinde çalışıyorsa, tarayıcınızda http://localhost:56699/SignalR/hubs adresine gidin.

SignalR tarafından oluşturulan ara sunucu için fiziksel dosya oluşturma

Dinamik olarak oluşturulan ara sunucuya alternatif olarak, ara sunucu koduna sahip bir fiziksel dosya oluşturabilir ve bu dosyaya başvurabilirsiniz. Bunu önbelleğe alma veya paketleme davranışı üzerinde denetim sağlamak veya sunucu yöntemlerine çağrı kodlarken IntelliSense almak için yapmak isteyebilirsiniz.

Proxy dosyası oluşturmak için aşağıdaki adımları uygulayın:

  1. Microsoft.AspNet.SignalR.Utils NuGet paketini yükleyin.

  2. Bir komut istemi açın ve SignalR.exe dosyasını içeren araçlar klasörüne göz atın. Araçlar klasörü aşağıdaki konumdadır:

    [your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools

  3. Aşağıdaki komutu girin:

    signalr ghp /path:[path to the .dll that contains your Hub class]

    .dll yolu genellikle proje klasörünüzdeki bin klasörüdür.

    Bu komut ,signalr.exe ile aynı klasörde server.jsadlı bir dosya oluşturur.

  4. server.js dosyasını projenizde uygun bir klasöre yerleştirin, uygulamanız için uygun şekilde yeniden adlandırın ve "signalr/hubs" başvurusu yerine buna bir başvuru ekleyin.

Bağlantı kurma

Bağlantı kurabilmeniz için önce bir bağlantı nesnesi oluşturmanız, ara sunucu oluşturmanız ve sunucudan çağrılabilen yöntemler için olay işleyicileri kaydetmeniz gerekir. Ara sunucu ve olay işleyicileri ayarlandığında, start yöntemini çağırarak bağlantıyı kurun.

Oluşturulan ara sunucuyu kullanıyorsanız, oluşturulan ara sunucu kodu bunu sizin yerinize yaptığı için bağlantı nesnesini kendi kodunuzda oluşturmanız gerekmez.

Bağlantı kurma (oluşturulan proxy ile)

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
    console.log(userName + ' ' + message);
};
$.connection.hub.start()
    .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function(){ console.log('Could not Connect!'); });

Bağlantı kurma (oluşturulan ara sunucu olmadan)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {
    console.log(userName + ' ' + message);
});
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

Örnek kod, SignalR hizmetinize bağlanmak için varsayılan "/signalr" URL'sini kullanır. Farklı bir temel URL belirtme hakkında bilgi için bkz. ASP.NET SignalR Hubs API Kılavuzu - Sunucu - /signalr URL'si.

Varsayılan olarak, hub konumu geçerli sunucudur; farklı bir sunucuya bağlanıyorsanız, aşağıdaki örnekte gösterildiği gibi yöntemi çağırmadan start önce URL'yi belirtin:

$.connection.hub.url = '<yourbackendurl>;

Uyarı

Normalde, start yöntemini çağırarak bağlantıyı kurmadan önce olay işleyicilerini kaydedersiniz. Bağlantıyı kurduktan sonra bazı olay işleyicilerini kaydetmek istiyorsanız, bunu yapabilirsiniz, ancak yöntemini çağırmadan start önce olay işleyicilerinizden en az birini kaydetmeniz gerekir. Bunun bir nedeni, bir uygulamada birçok Hub bulunabilmesidir, ancak yalnızca bir tanesini kullanacaksanız, olayı her Hub'da tetiklemek istemezsiniz OnConnected. Bağlantı kurulduğunda, Hub'un proxy'sinde bir istemci yönteminin varlığı, SignalR'ın OnConnected olayını tetiklemesini sağlar. Yöntemini çağırmadan start önce hiçbir olay işleyicisi kaydetmezseniz, Hub'da yöntemleri çağırabilirsiniz, ancak Hub'ın OnConnected yöntemi çağrılmaz ve sunucudan hiçbir istemci yöntemi çağrılmaz.

$.connection.hub, $.hubConnection() tarafından oluşturulan nesneyle aynıdır

Örneklerden görebileceğiniz gibi, oluşturulan ara sunucuyu $.connection.hub kullandığınızda bağlantı nesnesine başvurur. Bu, oluşturulan proxy'yi kullanmadığınızda çağırarak $.hubConnection() elde ettiğiniz nesneyle aynıdır. Oluşturulan proxy kodu, aşağıdaki deyimi yürüterek bağlantıyı sizin için oluşturur:

Oluşturulan proxy dosyasında bağlantı oluşturma

Oluşturulan proxy'yi kullanırken, oluşturulan ara sunucuyu kullanmadığınız zaman bir bağlantı nesnesiyle yapabildiğiniz her şeyi $.connection.hub ile yapabilirsiniz.

Start yönteminin zaman uyumsuz yürütülmesi

start yöntemi zaman uyumsuz olarak yürütülür. Bir jQuery Ertelenmiş nesnesi döndürür; başka bir deyişle, pipe, done ve fail gibi yöntemleri çağırarak geri çağırma fonksiyonları ekleyebilirsiniz. Bağlantı kurulduktan sonra yürütmek istediğiniz bir kodunuz varsa (örneğin, bir sunucu yöntemine yapılan çağrı), bu kodu bir geri çağırma işlevine yerleştirin veya geri çağırma işlevinden çağırın. .done Geri çağırma yöntemi, bağlantı kurulduktan sonra ve sunucudaki olay işleyici yönteminizde OnConnected bulunan herhangi bir kod yürütmeyi tamamladıktan sonra yürütülür.

Önceki örnekteki "Now connected" ifadesini, start yöntem çağrısından sonraki kod satırına (geri çağırmada .done değil) koyarsanız, bağlantı kurulmadan önce console.log satırı aşağıdaki örnekte gösterildiği gibi yürütülür.

Bağlantı kurulduktan sonra çalıştırılan kodu yazmanın yanlış yolu

Alanlar arası bağlantı kurma

Eğer tarayıcı http://contoso.com adresinden bir sayfa yüklüyorsa, SignalR bağlantısı aynı etki alanında, http://contoso.com/signalr adresindedir. Sayfa http://contoso.com üzerinden http://fabrikam.com/signalr ile bağlantı kurarsa, bu bir etki alanları arası bağlantıdır. Güvenlik nedeniyle, etki alanları arası bağlantılar varsayılan olarak devre dışı bırakılır.

SignalR 1.x'te etki alanları arası istekler tek bir EnableCrossDomain bayrağı tarafından denetlendi. Bu bayrak hem JSONP hem de CORS isteklerini denetledi. Daha fazla esneklik için tüm CORS desteği SignalR'nin sunucu bileşeninden kaldırılmıştır (Tarayıcı tarafından desteklendiği algılanırsa JavaScript istemcileri CORS'yi normal şekilde kullanmaya devam eder) ve bu senaryoları desteklemek için yeni OWIN ara yazılımı kullanıma sunulmuştur.

** İstemcide JSONP gerekiyorsa (eski tarayıcılarda etki alanları arası istekleri desteklemek için), EnableJSONP öğesini HubConfiguration nesnesinde true olarak ayarlayarak açıkça etkinleştirilmesi gerekir, aşağıda gösterildiği gibi. JSONP, CORS'den daha az güvenli olduğundan varsayılan olarak devre dışıdır.

Projenize Microsoft.Owin.Cors ekleme: Bu kitaplığı yüklemek için Paket Yöneticisi Konsolu'nda aşağıdaki komutu çalıştırın:

Install-Package Microsoft.Owin.Cors

Bu komut, paketin 2.1.0 sürümünü projenize ekler.

UseCors Çağırma

Aşağıdaki kod parçacığı, SignalR 2'de etki alanları arası bağlantıların nasıl uygulanduğunu gösterir.

SignalR 2'de etki alanları arası istekleri uygulama

Aşağıdaki kod, SignalR 2 projesinde CORS veya JSONP'nin nasıl etkinleştirileceği gösterilmektedir. Bu kod örneği Map ve RunSignalR yerine MapSignalR kullanır, böylece CORS ara yazılımı yalnızca CORS desteği gerektiren SignalR istekleri için çalışır (içinde MapSignalR belirtilen yoldaki tüm trafik için değil). Eşleme, uygulamanın tamamı yerine, belirli bir URL ön eki için çalışması gereken diğer ara yazılımlar için de kullanılabilir.

using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Cors;
using Owin;
namespace MyWebApplication
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Branch the pipeline here for requests that start with "/signalr"
            app.Map("/signalr", map =>
            {
                // Setup the CORS middleware to run before SignalR.
                // By default this will allow all origins. You can 
                // configure the set of origins and/or http verbs by
                // providing a cors options with a different policy.
                map.UseCors(CorsOptions.AllowAll);
                var hubConfiguration = new HubConfiguration 
                {
                    // You can enable JSONP by uncommenting line below.
                    // JSONP requests are insecure but some older browsers (and some
                    // versions of IE) require JSONP to work cross domain
                    // EnableJSONP = true
                };
                // Run the SignalR pipeline. We're not using MapSignalR
                // since this branch already runs under the "/signalr"
                // path.
                map.RunSignalR(hubConfiguration);
            });
        }
    }
}

Uyarı

  • Kodunuzda jQuery.support.cors öğesini true olarak ayarlamayın.

    jQuery.support.cors değerini true olarak ayarlamayın

    SignalR, CORS kullanımını işler. true ayarı jQuery.support.cors , SignalR'nin tarayıcının CORS'yi desteklediğini varsaymasına neden olduğundan JSONP'yi devre dışı bırakır.

  • Localhost URL'sine bağlanırken, Internet Explorer 10 bunu etki alanları arası bir bağlantı olarak kabul etmez, bu nedenle sunucuda etki alanları arası bağlantıları etkinleştirmemiş olsanız bile uygulama IE 10 ile yerel olarak çalışır.

  • Internet Explorer 9 ile etki alanları arası bağlantıları kullanma hakkında bilgi için bu StackOverflow iş parçacığına bakın.

  • Chrome ile etki alanları arası bağlantıları kullanma hakkında bilgi için bu StackOverflow iş parçacığına bakın.

  • Örnek kod, SignalR hizmetinize bağlanmak için varsayılan "/signalr" URL'sini kullanır. Farklı bir temel URL belirtme hakkında bilgi için bkz. ASP.NET SignalR Hubs API Kılavuzu - Sunucu - /signalr URL'si.

Bağlantıyı yapılandırma

Bağlantı kurmadan önce, sorgu dizesi parametrelerini belirtebilir veya aktarım yöntemini belirtebilirsiniz.

Sorgu dizesi parametrelerini belirtme

İstemci bağlandığında sunucuya veri göndermek istiyorsanız, bağlantı nesnesine sorgu dizesi parametreleri ekleyebilirsiniz. Aşağıdaki örneklerde, istemci kodunda sorgu dizesi parametresinin nasıl ayarlanacağı gösterilmektedir.

Başlangıç yöntemini çağırmadan önce bir sorgu dizesi değeri ayarlayın (oluşturulan ara sunucuyla)

$.connection.hub.qs = { 'version' : '1.0' };

Başlangıç yöntemini çağırmadan önce bir sorgu dizesi değeri ayarlayın (oluşturulan ara sunucu olmadan)

var connection = $.hubConnection();
connection.qs = { 'version' : '1.0' };

Aşağıdaki örnekte, sunucu kodunda sorgu dizesi parametresinin nasıl okunduğu gösterilmektedir.

public class ContosoChatHub : Hub
{
    public override Task OnConnected()
    {
        var version = Context.QueryString['version'];
        if (version != '1.0')
        {
            Clients.Caller.notifyWrongVersion();
        }
        return base.OnConnected();
    }
}

Aktarım yöntemini belirtme

Bağlanma işleminin bir parçası olarak, SignalR istemcisi hem sunucu hem de istemci tarafından desteklenen en iyi aktarımı belirlemek için normalde sunucuyla anlaşma sağlar. Kullanmak istediğiniz taşımayı zaten biliyorsanız, yöntemini çağırdığınızda start aktarım yöntemini belirterek bu anlaşma işlemini atlayabilirsiniz.

Aktarım yöntemini belirten istemci kodu (oluşturulan proxy ile)

$.connection.hub.start( { transport: 'longPolling' });

Aktarım yöntemini belirten istemci kodu (oluşturulan ara sunucu olmadan)

var connection = $.hubConnection();
connection.start({ transport: 'longPolling' });

Alternatif olarak, SignalR'nin denemesini istediğiniz sırayla birden çok aktarım yöntemi belirtebilirsiniz:

Özel bir aktarım geri dönüş şeması belirten istemci kodu (oluşturulan proxy ile)

$.connection.hub.start( { transport: ['webSockets', 'longPolling'] });

Özel bir aktarım geri dönüş şeması belirten istemci kodu (oluşturulan ara sunucu olmadan)

var connection = $.hubConnection();
connection.start({ transport: ['webSockets', 'longPolling'] });

Aktarım yöntemini belirtmek için aşağıdaki değerleri kullanabilirsiniz:

  • "webSockets"
  • foreverFrame
  • "serverSentEvents"
  • "longPolling"

Aşağıdaki örneklerde, bağlantı tarafından hangi aktarım yönteminin kullanıldığının nasıl öğrenildiği gösterilmektedir.

Bağlantı tarafından kullanılan aktarım yöntemini görüntüleyen istemci kodu (oluşturulan ara sunucuyla)

$.connection.hub.start().done(function () {
    console.log("Connected, transport = " + $.connection.hub.transport.name);
});

Bağlantı tarafından kullanılan aktarım yöntemini görüntüleyen istemci kodu (oluşturulan ara sunucu olmadan)

var connection = $.hubConnection();
connection.hub.start().done(function () {
    console.log("Connected, transport = " + connection.transport.name);
});

Sunucu kodunda aktarım yöntemini denetleme hakkında bilgi için bkz. ASP.NET SignalR Hubs API Kılavuzu - Sunucu - Context özelliğinden istemci hakkında bilgi alma. Taşımalar ve geri dönüşler hakkında daha fazla bilgi için bkz. SignalR'ye Giriş - Aktarımlar ve Geri Dönüşler.

Hub sınıfı için ara sunucu elde etme

Oluşturduğunuz her bağlantı nesnesi, bir veya daha fazla Hub sınıfı içeren bir SignalR hizmetine bağlantı hakkındaki bilgileri kapsüller. Hub sınıfıyla iletişim kurmak için, kendi oluşturduğunuz (oluşturulan ara sunucuyu kullanmıyorsanız) veya sizin için oluşturulan bir proxy nesnesi kullanırsınız.

İstemcide proxy adı, Hub sınıf adının camel-case sürümüdür. SignalR, JavaScript kodunun JavaScript kurallarına uygun olabilmesi için bu değişikliği otomatik olarak yapar.

Sunucudaki hub sınıfı

public class ContosoChatHub : Hub

Hub için oluşturulan istemci proxy'sine referans alın

var myHubProxy = $.connection.contosoChatHub

Hub sınıfı için istemci proxy'si oluşturma (proxy oluşturulmadan)

var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');

Hub sınıfınızı bir HubName öznitelikle süslerseniz, büyük/küçük harf değiştirmeden tam adı kullanın.

HubName özniteliğine sahip sunucuda Hub sınıfı

[HubName("ContosoChatHub")]
public class ChatHub : Hub

Hub için oluşturulan istemci proxy'sine referans edinin

var contosoChatHubProxy = $.connection.ContosoChatHub

Hub sınıfı için istemci proxy'si oluşturma (proxy oluşturulmadan)

var contosoChatHubProxy = connection.createHubProxy('ContosoChatHub');

İstemcide sunucunun çağırabileceği yöntemleri tanımlama

Sunucunun bir Hub'dan çağırabileceği bir yöntem tanımlamak için, oluşturulan ara sunucunun özelliğini kullanarak client Hub ara sunucusuna bir olay işleyicisi ekleyin veya oluşturulan ara sunucuyu kullanmıyorsanız yöntemini çağırın on . Parametreler karmaşık nesneler olabilir.

start yöntemini çağırmadan önce, bağlantıyı kurmak için olay işleyicisini ekleyin. (Yöntemi çağırdıktan sonra olay işleyicileri eklemek istiyorsanız, bu belgenin start önceki bölümlerinde yer alan Bağlantı kurma başlığı altındaki nota bakın ve oluşturulan ara sunucuyu kullanmadan yöntem tanımlamak için gösterilen söz dizimini kullanın.)

Yöntem adı eşleştirme büyük/küçük harfe duyarsızdır. Örneğin, Clients.All.addContosoChatMessageToPage sunucuda AddContosoChatMessageToPage, addContosoChatMessageToPage veya addcontosochatmessagetopage istemcide çalıştırılacak.

İstemcide yöntemi tanımlama (oluşturulan proxy ile)

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (userName, message) {
    console.log(userName + ' ' + message);
};
$.connection.hub.start()
    .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function(){ console.log('Could not Connect!'); });

İstemcide yöntem tanımlamanın alternatif yolu (oluşturulan proxy ile)

$.extend(contosoChatHubProxy.client, {
    addContosoChatMessageToPage: function(userName, message) {
    console.log(userName + ' ' + message);
    };
});

İstemcide yöntemi tanımlama (oluşturulan ara sunucu olmadan veya başlangıç yöntemi çağrıldıktan sonra eklerken)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {
    console.log(userName + ' ' + message);
});
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

İstemci yöntemini çağıran sunucu kodu

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

Aşağıdaki örnekler, yöntem parametresi olarak karmaşık bir nesneyi içerir.

Oluşturulan proxy ile karmaşık bir nesne alan bir yöntemi istemcide tanımlayın

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addMessageToPage = function (message) {
    console.log(message.UserName + ' ' + message.Message);
});

Oluşturulan vekil olmadan karmaşık bir nesne alan bir yöntemi istemcide tanımlayın

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
chatHubProxy.on('addMessageToPage', function (message) {
    console.log(message.UserName + ' ' + message.Message);
});

Karmaşık nesneyi tanımlayan sunucu kodu

public class ContosoChatMessage
{
    public string UserName { get; set; }
    public string Message { get; set; }
}

Karmaşık bir nesne kullanarak istemci yöntemini çağıran sunucu kodu

public void SendMessage(string name, string message)
{
    Clients.All.addContosoChatMessageToPage(new ContosoChatMessage() { UserName = name, Message = message });
}

İstemciden sunucu yöntemlerini çağırma

İstemciden bir sunucu yöntemini çağırmak için, oluşturulan proxy'nin server özelliğini veya oluşturulan proxy'yi kullanmıyorsanız, Hub proxy'sinde invoke yöntemini kullanın. Dönüş değeri veya parametreleri karmaşık nesneler olabilir.

Hub'daki yöntemin adını camel case biçiminde iletin. SignalR, JavaScript kodunun JavaScript kurallarına uygun olabilmesi için bu değişikliği otomatik olarak yapar.

Aşağıdaki örneklerde dönüş değeri olmayan bir sunucu yönteminin nasıl çağrıldığı ve dönüş değeri olan bir sunucu yönteminin nasıl çağrıldığı gösterilmektedir.

HubMethodName özniteliği olmayan sunucu yöntemi

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(ChatMessage message)
    {
        Clients.All.addContosoChatMessageToPage(message);
    }
}

Parametrede geçirilen karmaşık nesneyi tanımlayan sunucu kodu

public class ChatMessage
{
    public string UserName { get; set; }
    public string Message { get; set; }
}

Sunucu yöntemini çağıran istemci kodu (oluşturulan proxy ile)

contosoChatHubProxy.server.newContosoChatMessage({ UserName: userName, Message: message}).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Sunucu yöntemini çağıran istemci kodu (oluşturulan ara sunucu olmadan)

contosoChatHubProxy.invoke('newContosoChatMessage', { UserName: userName, Message: message}).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Hub yöntemini bir HubMethodName öznitelikle donatdıysanız, büyük/küçük harf değiştirmeden bu adı kullanın.

HubMethodName özniteliğine sahip sunucu yöntemi

public class ContosoChatHub : Hub
{
    [HubMethodName("NewContosoChatMessage")]
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

Sunucu yöntemini çağıran istemci kodu (oluşturulan proxy ile)

contosoChatHubProxy.server.NewContosoChatMessage(userName, message).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Sunucu yöntemini çağıran istemci kodu (oluşturulan ara sunucu olmadan)

contosoChatHubProxy.invoke('NewContosoChatMessage', userName, message).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Yukarıdaki örneklerde, dönüş değeri olmayan bir sunucu yönteminin nasıl çağrıldığı gösterilmektedir. Aşağıdaki örneklerde, dönüş değeri olan bir sunucu yönteminin nasıl çağrıldığı gösterilmektedir.

Dönüş değerine sahip bir yöntemin sunucu kodu

public class StockTickerHub : Hub
{
    public IEnumerable<Stock> GetAllStocks()
    {
        return _stockTicker.GetAllStocks();
    }
}

Dönüş değeri için kullanılan Stock sınıfı

public class Stock
{
    public string Symbol { get; set; }
    public decimal Price { get; set; }
}

Sunucu yöntemini çağıran istemci kodu (oluşturulan proxy ile)

function init() {
    return stockTickerProxy.server.getAllStocks().done(function (stocks) {
        $.each(stocks, function () {
            var stock = this;
            console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);
        });
    }).fail(function (error) {
        console.log('Error: ' + error);
    });
}

Sunucu yöntemini çağıran istemci kodu (oluşturulan ara sunucu olmadan)

function init() {
    return stockTickerProxy.invoke('getAllStocks').done(function (stocks) {
        $.each(stocks, function () {
            var stock = this;
            console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);
        });
    }).fail(function (error) {
        console.log('Error: ' + error);
    });
}

Bağlantı ömrü olaylarını işleme

SignalR, işleyebileceğiniz aşağıdaki bağlantı ömrü olaylarını sağlar:

  • starting: Bağlantı üzerinden herhangi bir veri gönderilmeden önce tetiklenir.
  • received: Bağlantıdan herhangi bir veri alındığında tetiklenir. Alınan verileri sağlar.
  • connectionSlow: İstemci yavaş çalışan veya sık sık kopan bir bağlantı algıladığında tetiklenir.
  • reconnecting: Altyapı iletişimi yeniden bağlanmaya başladığında tetiklenir.
  • reconnected: Altta yatan aktarım yeniden bağlandığında oluşur.
  • stateChanged: Bağlantı durumu değiştiğinde yükseltildi. Eski durumu ve yeni durumu (Bağlanma, Bağlı, Yeniden Bağlanma veya Bağlantı Kesildi) sağlar.
  • disconnected: Bağlantı kesildiğinde yükseltilir.

Örneğin, fark edilebilir gecikmelere neden olabilecek bağlantı sorunları olduğunda uyarı iletileri görüntülemek istiyorsanız, connectionSlow olayını işleyin.

ConnectionSlow olayını işleme (oluşturulan proxy ile)

$.connection.hub.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
});

ConnectionSlow olayını işleme (oluşturulan ara sunucu olmadan)

var connection = $.hubConnection();
connection.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
});

Daha fazla bilgi için bkz. SignalR'de Bağlantı Ömrü Olaylarını Anlama ve İşleme.

Hataları işleme

SignalR JavaScript istemcisi, işleyici ekleyebileceğiniz bir error olayı sağlar. Sunucu yöntemi çağırmasından kaynaklanan hatalara yönelik işleyici eklemek için de fail yöntemini kullanabilirsiniz.

Sunucuda ayrıntılı hata iletilerini açıkça etkinleştirmezseniz SignalR'nin hatadan sonra döndürdüğü özel durum nesnesi hata hakkında en az bilgi içerir. Örneğin, bir çağrı newContosoChatMessage başarısız olursa, hata nesnesindeki hata iletisi "There was an error invoking Hub method 'contosoChatHub.newContosoChatMessage'." içerir. Üretimdeki istemcilere ayrıntılı hata iletileri gönderme güvenlik nedeniyle önerilmez, ancak sorun giderme amacıyla ayrıntılı hata iletilerini etkinleştirmek istiyorsanız, sunucuda aşağıdaki kodu kullanın.

var hubConfiguration = new HubConfiguration();
hubConfiguration.EnableDetailedErrors = true;
app.MapSignalR(hubConfiguration);

Aşağıdaki örnekte hata olayı için işleyicinin nasıl ekleneceği gösterilmektedir.

Hata işleyicisi ekleme (oluşturulan proxy ile)

$.connection.hub.error(function (error) {
    console.log('SignalR error: ' + error)
});

Hata işleyicisi ekleme (oluşturulan ara sunucu olmadan)

var connection = $.hubConnection();
connection.error(function (error) {
    console.log('SignalR error: ' + error)
});

Aşağıdaki örnekte, bir yöntem çağrısından gelen bir hatanın nasıl işleneceğini gösterilmektedir.

Yöntem çağrısından gelen bir hatayı işleme (oluşturulan ara sunucuyla)

contosoChatHubProxy.newContosoChatMessage(userName, message)
    .fail(function(error) { 
        console.log( 'newContosoChatMessage error: ' + error) 
    });

Yöntem çağrısından gelen bir hatayı işleme (oluşturulan ara sunucu olmadan)

contosoChatHubProxy.invoke('newContosoChatMessage', userName, message)
    .fail(function(error) { 
        console.log( 'newContosoChatMessage error: ' + error) 
    });

Bir yöntem çağrısı başarısız olursa, olay da tetiklenir ve yöntem işleyicisindeki error ile yöntem geri çağırma fonksiyonundaki .fail kodunuz yürütülür.

İstemci tarafı günlüğünü nasıl etkinleştirebilirim?

Bir bağlantıda istemci tarafı günlüğünü etkinleştirmek için, bağlantıyı kurmak amacıyla start metodunu çağırmadan önce bağlantı nesnesinde logging özelliğini ayarlayın.

Günlüğe kaydetmeyi etkinleştir (oluşturulan proxy ile)

$.connection.hub.logging = true;
$.connection.hub.start();

Vekil sunucu olmadan günlüğe kaydetmeyi etkinleştir

var connection = $.hubConnection();
connection.logging = true;
connection.start();

Günlükleri görmek için tarayıcınızın geliştirici araçlarını açın ve Konsol sekmesine gidin. Bunun nasıl yapıldığını gösteren adım adım yönergeleri ve ekran görüntülerini gösteren bir öğretici için bkz. ASP.NET Signalr ile Sunucu Yayını - Günlüğü Etkinleştirme.

  • Last updated on