ASP.NET Core SignalR JavaScript istemcisi

, Oychel Appel tarafından

SignalRJavaScript istemci kitaplığı ASP.NET Core, geliştiricilerin sunucu tarafı hub kodunu çağırmasını sağlar.

Örnek kodu görüntüleme veya indirme (nasıl indirileceği)

SignalRİstemci paketini yükler

SignalRJavaScript istemci kitaplığı NPM paketi olarak dağıtılır. Aşağıdaki bölümlerde, istemci kitaplığını yüklemenin farklı yolları ana hatlarıyla verilmiştir.

NPM ile yüklensin

Visual Studio için kök klasörde Paket Yöneticisi konsolundan aşağıdaki komutları çalıştırın. Visual Studio Code için, tümleşik terminalden aşağıdaki komutları çalıştırın.

npm init -y
npm install @microsoft/signalr

NPM *node_modules \ @microsoft\signalr\dist\browser* klasöre paket içeriğini yüklüyor. Wwwroot \ kitaplığı klasörünün altında SignalR adlı yeni bir klasör oluşturun. signalr.js dosyasını wwwroot\lib\signalr klasörüne kopyalayın.

SignalRÖğesindeki JavaScript istemcisine başvurun <script> . Örnek:

<script src="~/lib/signalr/signalr.js"></script>

Content Delivery Network kullanma (CDN)

istemci kitaplığını npm önkoşulu olmadan kullanmak için, istemci kitaplığının CDN barındırılan bir kopyasına başvurun. Örnek:

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>

İstemci kitaplığı aşağıdaki CDNs üzerinde kullanılabilir:

• cdnjs
• jsDelivr
• unpkg

LibMan ile Install

libman , CDN barındırılan istemci kitaplığından belirli istemci kitaplığı dosyalarını yüklemek için kullanılabilir. Örneğin, yalnızca küçültülmüş JavaScript dosyasını projeye ekleyin. Bu yaklaşım hakkında daha fazla bilgi için bkz. SignalR Istemci kitaplığı ekleme.

bir hub 'a Bağlan

Aşağıdaki kod bir bağlantı oluşturur ve başlatır. Hub 'ın adı büyük/küçük harfe duyarlıdır:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

async function start() {
    try {
        await connection.start();
        console.log("SignalR Connected.");
    } catch (err) {
        console.log(err);
        setTimeout(start, 5000);
    }
};

connection.onclose(async () => {
    await start();
});

// Start the connection.
start();

Çapraz kaynak bağlantıları

Genellikle, tarayıcılar istenen sayfayla aynı etki alanındaki bağlantıları yükler. Ancak, başka bir etki alanına bağlantı gerektiğinde bu durumlar vardır.

Kötü amaçlı bir sitenin başka bir siteden hassas verileri okumasını engellemek için, Çıkış noktaları varsayılan olarak devre dışı bırakılır. Bir çapraz kaynak isteğine izin vermek için Startup sınıfında etkinleştirin:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SignalRChat.Hubs;

namespace SignalRChat
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddSignalR();

            services.AddCors(options =>
            {
                options.AddDefaultPolicy(builder =>
                {
                    builder.WithOrigins("https://example.com")
                        .AllowCredentials();
                });
            });
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();
            app.UseRouting();

            app.UseCors();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapHub<ChatHub>("/chathub");
            });
        }
    }
}

İstemciden çağrı merkezi yöntemleri

JavaScript istemcileri, Hubconnection'un Invoke yöntemi aracılığıyla hub 'larda ortak yöntemleri çağırır. invokeYöntemi kabul eder:

• Hub yönteminin adı.
• Hub yönteminde tanımlanan bağımsız değişkenler.

Aşağıdaki örnekte, hub 'daki Yöntem adı SendMessage . invokeHub yönteminin user ve bağımsız değişkenlerine eşlemek için geçirilen ikinci ve üçüncü bağımsız değişkenler message :

try {
    await connection.invoke("SendMessage", user, message);
} catch (err) {
    console.error(err);
}

invokeYöntemi bir JavaScript Promisedöndürür. , Promise Sunucu üzerindeki yöntemi döndürdüğünde (varsa) dönüş değeri ile çözümlenir. Sunucu üzerindeki yöntem bir hata oluşturursa, Promise hata iletisiyle reddedilir. async await Promise then catch Bu durumları işlemek için ve ve yöntemlerini kullanın.

JavaScript istemcileri Ayrıca, içindeki Send yöntemi aracılığıyla genel yöntemleri hub 'larda çağırabilir HubConnection . Yönteminden farklı olarak invoke , send Yöntem sunucudan bir yanıt beklemez. sendYöntemi bir JavaScript döndürür Promise . Promiseİleti sunucuya gönderildiğinde çözümlenir. İleti gönderilirken bir hata oluşursa, Promise hata iletisiyle reddedilir. async await Promise then catch Bu durumları işlemek için ve ve yöntemlerini kullanın.

Hub 'dan istemci yöntemlerini çağırma

Hub 'dan ileti almak için, öğesinin on metodunu kullanarak bir yöntemi tanımlayın HubConnection .

• JavaScript istemci yönteminin adı.
• Hub 'ın yönteme geçirdiği bağımsız değişkenler.

Aşağıdaki örnekte, yöntem adı ' dir ReceiveMessage . Bağımsız değişken adları şunlardır user message :

connection.on("ReceiveMessage", (user, message) => {
    const li = document.createElement("li");
    li.textContent = `${user}: ${message}`;
    document.getElementById("messageList").appendChild(li);
});

Yukarıdaki kod, connection.on sunucu tarafı kodu yöntemi kullanarak çağırdığında çalıştırılır SendAsync :

public async Task SendMessage(string user, string message)
{
    await Clients.All.SendAsync("ReceiveMessage", user, message);
}

SignalR ve ' de tanımlanan bağımsız değişkenlerle, hangi istemci yönteminin çağrılacağını belirler SendAsync connection.on .

Hata işleme ve günlüğe kaydetme

try catch async await Promise catch İstemci tarafı hatalarını işlemek için ve ile ve kullanın metodunu kullanın. console.errorHataları tarayıcı konsoluna çıkarmak için kullanın:

try {
    await connection.invoke("SendMessage", user, message);
} catch (err) {
    console.error(err);
}

Bağlantı yapıldığında günlüğe bir günlükçü ve olay türü geçirerek istemci tarafı günlük izlemeyi ayarlayın. İletiler, belirtilen günlük düzeyi ve daha yükseği ile günlüğe kaydedilir. Kullanılabilir günlük düzeyleri aşağıdaki gibidir:

• signalR.LogLevel.Error: Hata iletileri. ErrorYalnızca iletileri günlüğe kaydeder.
• signalR.LogLevel.Warning: Olası hatalarla ilgili uyarı iletileri. Günlükler Warning ve Error mesajlar.
• signalR.LogLevel.Information: Hata olmayan durum iletileri. Günlükler Information , Warning ve Error iletileri.
• signalR.LogLevel.Trace: Trace iletileri. Hub ve istemci arasında taşınan veriler de dahil olmak üzere her şeyi günlüğe kaydeder.

Günlük düzeyini yapılandırmak için Hubconnectionbuilder üzerinde configurelogging yöntemini kullanın. İletiler tarayıcı konsoluna kaydedilir:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

İstemcileri yeniden bağla

Otomatik olarak yeniden bağlan

İçin JavaScript istemcisi, SignalR withAutomaticReconnect hubconnectionbuilder'daki yöntemi kullanılarak otomatik olarak yeniden bağlanacak şekilde yapılandırılabilir. Varsayılan olarak otomatik olarak yeniden bağlanmaz.

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .withAutomaticReconnect()
    .build();

Herhangi bir parametre olmadan, withAutomaticReconnect() her yeniden bağlanma denemesini denemeden önce, dört başarısız denemeden sonra durdurulan istemciyi 0, 2, 10 ve 30 saniye bekleyecek şekilde yapılandırır.

Yeniden bağlanma girişimlerini başlatmadan önce, durumuna HubConnection geçiş yapmak HubConnectionState.Reconnecting yerine geri çağırmaları harekete geçer ve onreconnecting Disconnected onclose HubConnection Otomatik yeniden bağlanma yapılandırması olmadan geri çağırmaları tetikleyerek. Bu, kullanıcıların bağlantının kaybedildiği ve Kullanıcı arabirimi öğelerini devre dışı bırakan kullanıcıları uyarma fırsatı sağlar.

connection.onreconnecting(error => {
    console.assert(connection.state === signalR.HubConnectionState.Reconnecting);

    document.getElementById("messageInput").disabled = true;

    const li = document.createElement("li");
    li.textContent = `Connection lost due to error "${error}". Reconnecting.`;
    document.getElementById("messagesList").appendChild(li);
});

İstemci ilk dört deneme süresi içinde başarıyla yeniden bağlanırsa, HubConnection Connected durum durumuna geçer ve onreconnected geri çağırmaları harekete geçirebilir. Bu, kullanıcılara bağlantı yeniden kurulmadığını bildirmek için bir fırsat sağlar.

Bağlantı sunucuya tamamen yeni göründüğünden geri aramaya yeni bir verilecek connectionId onreconnected .

connection.onreconnected(connectionId => {
    console.assert(connection.state === signalR.HubConnectionState.Connected);

    document.getElementById("messageInput").disabled = false;

    const li = document.createElement("li");
    li.textContent = `Connection reestablished. Connected with connectionId "${connectionId}".`;
    document.getElementById("messagesList").appendChild(li);
});

withAutomaticReconnect() , HubConnection ilk başlatma başarısızlıklarını yeniden denemek üzere yapılandırmaz, bu nedenle başlatma hatalarının el ile işlenmesi gerekir:

async function start() {
    try {
        await connection.start();
        console.assert(connection.state === signalR.HubConnectionState.Connected);
        console.log("SignalR Connected.");
    } catch (err) {
        console.assert(connection.state === signalR.HubConnectionState.Disconnected);
        console.log(err);
        setTimeout(() => start(), 5000);
    }
};

İstemci ilk dört denemeden sonra başarıyla yeniden bağlanmazsa, HubConnection Disconnected durumuna geçer ve OnClose geri aramalarını harekete geçirebilir. Bu, kullanıcılara bağlantının kalıcı olarak kaybedilmediğini bildirme ve sayfayı yenilemeyi önerme olanağı sağlar:

connection.onclose(error => {
    console.assert(connection.state === signalR.HubConnectionState.Disconnected);

    document.getElementById("messageInput").disabled = true;

    const li = document.createElement("li");
    li.textContent = `Connection closed due to error "${error}". Try refreshing this page to restart the connection.`;
    document.getElementById("messagesList").appendChild(li);
});

Bağlantıyı kesmeden veya yeniden bağlanma zamanlamasını değiştirmeden önce özel sayıda yeniden bağlantı girişimi yapılandırmak için, her bir withAutomaticReconnect yeniden bağlanma denemesine başlamadan önce beklenecek gecikme süresi temsil eden bir sayı dizisi kabul eder.

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .withAutomaticReconnect([0, 0, 10000])
    .build();

    // .withAutomaticReconnect([0, 2000, 10000, 30000]) yields the default behavior

Yukarıdaki örnek, bağlantı HubConnection kaybedildikten hemen sonra yeniden bağlanmayı başlatmayı başlatacak şekilde yapılandırıyor. Bu, varsayılan yapılandırma için de doğrudur.

İlk yeniden bağlanma girişimi başarısız olursa, varsayılan yapılandırmada olduğu gibi 2 saniye beklemek yerine ikinci yeniden bağlanma girişimi de hemen başlar.

İkinci yeniden bağlanma girişimi başarısız olursa, üçüncü yeniden bağlanma girişimi 10 saniye içinde başlar ve bu da varsayılan yapılandırmaya benzer.

Özel davranış daha sonra varsayılan yapılandırmada olduğu gibi 30 saniye içinde bir yeniden bağlanma denemesi daha yapmak yerine üçüncü yeniden bağlanma denemesi başarısız olduktan sonra durdurularak varsayılan davranıştan yeniden ayrılır.

Otomatik yeniden bağlanma girişimlerinin zamanlaması ve sayısı üzerinde daha fazla denetime sahip olmak için arabirimini uygulayan ve adlı tek bir yöntemi olan withAutomaticReconnect IRetryPolicy bir nesneyi kabul nextRetryDelayInMilliseconds eder.

nextRetryDelayInMilliseconds , türünde tek bir bağımsız değişken RetryContext alır. üç RetryContext özelliği vardır: previousRetryCount ve elapsedMilliseconds retryReason sırasıyla , ve number number Error olan. İlk yeniden bağlanma denemesi öncesinde hem hem de sıfır olur ve bağlantının previousRetryCount elapsedMilliseconds retryReason kaybedilmeden önce hata olması gerekir. Her başarısız yeniden deneme girişiminden sonra, bir artırılır, o ana kadar milisaniye içinde yeniden bağlanmaya harcanan zamanı yansıtacak şekilde güncelleştirilir ve son yeniden bağlanma girişiminin başarısız olmasına neden olan Hata previousRetryCount elapsedMilliseconds retryReason olacaktır.

nextRetryDelayInMilliseconds bir sonraki yeniden bağlanma denemesi öncesinde bek için milisaniye sayısını temsil eden bir sayı veya yeniden null HubConnection bağlanmayı durdurması gerekir.

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .withAutomaticReconnect({
        nextRetryDelayInMilliseconds: retryContext => {
            if (retryContext.elapsedMilliseconds < 60000) {
                // If we've been reconnecting for less than 60 seconds so far,
                // wait between 0 and 10 seconds before the next reconnect attempt.
                return Math.random() * 10000;
            } else {
                // If we've been reconnecting for more than 60 seconds so far, stop reconnecting.
                return null;
            }
        }
    })
    .build();

Alternatif olarak, el ile yeniden bağlama içinde olduğu gibi istemcinizi el ile yeniden bağlayarak kod yazabilirsiniz.

El ile yeniden bağlanma

Aşağıdaki kod, tipik bir el ile yeniden bağlanma yaklaşımını gösteriyor:

1. Bağlantıyı başlatmak için bir işlev (bu start durumda işlevi) oluşturulur.
2. Bağlantının start olay işleyicisinde onclose işlevini çağırma.

async function start() {
    try {
        await connection.start();
        console.log("SignalR Connected.");
    } catch (err) {
        console.log(err);
        setTimeout(start, 5000);
    }
};

connection.onclose(async () => {
    await start();
});

Üretim uygulamaları genellikle üstel bir geri kapatma kullanır veya belirtilen sayıda yeniden deneme kullanır.

Tarayıcı uyku sekmesi

Bazı tarayıcılar, etkin olmayan sekmeler için bilgisayar kaynağı kullanımını azaltmak için sekme donma veya uyku özelliğine sahiptir. Bu, SignalR bağlantıların kapanmasına neden olabilir ve istenmeyen bir kullanıcı deneyimine neden olabilir. Tarayıcılar, aşağıdakiler gibi bir sekmenin uykuya konarak uyulp uyulmay gerektiğini anlamaları için heuristics kullanır:

• Ses çalma
• Web kilidi tutma
• Kilit IndexedDB tutma
• USB cihazına bağlı olma
• Video veya ses yakalama
• Yansıtılmış olma
• Pencere veya görüntü yakalama

Bir uygulamayı uykuya koymaktan kaçınmak için, uygulamanın tarayıcının kullandığı üristiklerden birini tetiklemesi gerekir.

Aşağıdaki kod örneği, bir sekmeyi uykuda tutmak ve beklenmedik bir bağlantı kapatmasını önlemek için Web Kilidi'nin nasıl kullanılageldiği gösterir.

var lockResolver;
if (navigator && navigator.locks && navigator.locks.request) {
    const promise = new Promise((res) => {
        lockResolver = res;
    });

    navigator.locks.request('unique_lock_name', { mode: "shared" }, () => {
        return promise;
    });
}

Yukarıdaki kod örneği için:

• Web Kilitleri deneyseldir. Koşullu denetim, tarayıcının Web Kilitlerini desteklediğini onaylar.
• Promise çözümleyicisi ( ), sekmenin uykusu kabul edilebilir olduğunda kilidin serbest lockResolver bırakılabilir olması için depolanır.
• Bağlantı kapatılıyorsa kilit çağrılarak serbest lockResolver() bırakılıyor. Kilit serbest bırakıldı mı, sekmenin uykusına izin verilir.

Ek kaynaklar

• JavaScript API'si başvurusu
• JavaScript öğreticisi
• WebPack ve TypeScript öğreticisi
• Merkezler
• .NET istemcisi
• Azure'da yayımlama
• Çıkış Noktası Arası İstekler (CORS)
• Azure SignalR Hizmeti sunucusuz belgeleri
• Bağlantı hatalarını giderme

GöreCe Appel

JavaScript ASP.NET Core SignalR kitaplığı, geliştiricilerin sunucu tarafı hub kodunu çağırmalarını sağlar.

Örnek kodu görüntüleme veya indirme ( nasılindir)

İstemci SignalR paketini yükleme

SignalRJavaScript istemci kitaplığı bir npm paketi olarak teslim edilir. Aşağıdaki bölümlerde, istemci kitaplığını yüklemenin farklı yolları açıklanmaktadır.

npm ile yükleme

Visual Studio kullanıyorsanız, kök klasördeyken Paket Yöneticisi Konsolu'dan aşağıdaki komutları çalıştırın. Daha Visual Studio Code, Tümleşik Terminal'den aşağıdaki komutları çalıştırın.

npm init -y
npm install @aspnet/signalr

npm, paket içeriğini node_modules \ @aspnet\signalr\dist\browser yüklenir. wwwroot \ lib klasörünün altında signalr adlı yeni bir klasör oluşturun. Dosya signalr.js wwwroot\lib\signalr klasörüne kopyalayın.

öğesinde SignalR JavaScript istemcisine <script> başvurun. Örnek:

<script src="~/lib/signalr/signalr.js"></script>

Bir Content Delivery Network (CDN) kullanma

İstemci kitaplığını npm önkolu olmadan kullanmak için, istemci kitaplığının CDN barındırılan bir kopyasına bakın. Örnek:

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.3/signalr.min.js"></script>

İstemci kitaplığı aşağıdaki CDN'lerde kullanılabilir:

• cdnjs
• jsDelivr
• unpkg

LibMan ile yükleme

LibMan, CDN barındırılan istemci kitaplığından belirli istemci kitaplığı dosyalarını yüklemek için kullanılabilir. Örneğin, projeye yalnızca minified JavaScript dosyasını ekleyin. Bu yaklaşımla ilgili ayrıntılar için bkz. İstemci SignalR kitaplığını ekleme.

Bağlan hub'a bağlantı

Aşağıdaki kod bir bağlantı oluşturur ve başlatır. Hub'ın adı büyük/büyük/büyük harfe duyarlı değildir.

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

async function start() {
    try {
        await connection.start();
        console.log("connected");
    } catch (err) {
        console.log(err);
        setTimeout(() => start(), 5000);
    }
};

connection.onclose(async () => {
    await start();
});

// Start the connection.
start();

/* this is here to show an alternative to start, with a then
connection.start().then(() => console.log("connected"));
*/

/* this is here to show another alternative to start, with a catch
connection.start().catch(err => console.error(err));
*/

Çıkış noktası arası bağlantılar

Tarayıcılar genellikle istenen sayfayla aynı etki alanındaki bağlantıları yüklemez. Ancak, başka bir etki alanına bağlantının gerekli olduğu durumlar vardır.

Kötü amaçlı bir sitenin başka bir siteden hassas verileri okumasını önlemek için çıkış noktası arası bağlantılar varsayılan olarak devre dışı bırakılır. Çıkış noktası arası isteklere izin vermek için sınıfında Startup etkinleştirin.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRChat.Hubs;

namespace SignalRChat
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });

            services.AddMvc();

            services.AddCors(options => options.AddPolicy("CorsPolicy", 
            builder => 
            {
                builder.AllowAnyMethod().AllowAnyHeader()
                       .WithOrigins("http://localhost:55830")
                       .AllowCredentials();
            }));

            services.AddSignalR();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseBrowserLink();
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCookiePolicy();
            app.UseCors("CorsPolicy");
            app.UseSignalR(routes => 
            {
                routes.MapHub<ChatHub>("/chathub");
            });
            app.UseMvc();            
        }
    }
}

İstemciden hub yöntemlerini çağırma

JavaScript istemcileri HubConnection'ınçağırma yöntemi aracılığıyla hub'larda ortak yöntemleri çağırır. yöntemi invoke iki bağımsız değişken kabul eder:

• Hub yönteminin adı. Aşağıdaki örnekte, hub'daki yöntem adı şu SendMessage şekildedir: .

• Hub yönteminde tanımlanan tüm bağımsız değişkenler. Aşağıdaki örnekte bağımsız değişken adı message olur. Örnek kod, diğer tarayıcılar dışında tüm ana tarayıcıların geçerli sürümlerinde desteklenen ok işlevi söz dizimi Internet Explorer.

  connection.invoke("SendMessage", user, message).catch(err => console.error(err));
  

yöntemi invoke bir JavaScript Promise döndürür. Promise, sunucusundaki yöntem döndürüyorsa dönüş değeriyle (varsa) çözümlenir. Sunucusundaki yöntemi bir hata döndürürse, Promise hata iletisiyle birlikte reddedilir. Bu örnekleri then catch (veya söz dizimi) işlemek için kendi üzerinde ve Promise yöntemlerini await kullanın.

yöntemi send bir JavaScript Promise döndürür. Promise, ileti sunucuya gönderilirken çözümlenir. İletiyi gönderen bir hata varsa, Promise hata iletisiyle birlikte reddedilir. Bu örnekleri then catch (veya söz dizimi) işlemek için kendi üzerinde ve Promise yöntemlerini await kullanın.

Hub 'dan istemci yöntemlerini çağır

Hub 'dan ileti almak için, öğesinin on metodunu kullanarak bir yöntemi tanımlayın HubConnection .

• JavaScript istemci yönteminin adı. Aşağıdaki örnekte, yöntem adı ' dir ReceiveMessage .
• Hub 'ın yönteme geçirdiği bağımsız değişkenler. Aşağıdaki örnekte, bağımsız değişken değeri message .

connection.on("ReceiveMessage", (user, message) => {
    const encodedMsg = `${user} says ${message}`;
    const li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

Yukarıdaki kod, connection.on sunucu tarafı kodu yöntemini kullanarak çağırdığında çalıştırılır SendAsync .

public async Task SendMessage(string user, string message)
{
    await Clients.All.SendAsync("ReceiveMessage", user, message);
}

SignalR ve ' de tanımlanan bağımsız değişkenlerle, hangi istemci yönteminin çağrılacağını belirler SendAsync connection.on .

Hata işleme ve günlüğe kaydetme

catch start İstemci tarafı hatalarını işlemek için yönteminin sonuna bir yöntemi zincirleyin. console.errorHataları tarayıcı konsoluna çıkarmak için kullanın.

connection.start().catch(err => console.error(err));

Bağlantı yapıldığında günlüğe bir günlükçü ve olay türü geçirerek istemci tarafı günlük izlemeyi ayarlayın. İletiler, belirtilen günlük düzeyi ve daha yükseği ile günlüğe kaydedilir. Kullanılabilir günlük düzeyleri aşağıdaki gibidir:

• signalR.LogLevel.Error: Hata iletileri. ErrorYalnızca iletileri günlüğe kaydeder.
• signalR.LogLevel.Warning: Olası hatalarla ilgili uyarı iletileri. Günlükler Warning ve Error mesajlar.
• signalR.LogLevel.Information: Hata olmayan durum iletileri. Günlükler Information , Warning ve Error iletileri.
• signalR.LogLevel.Trace: Trace iletileri. Hub ve istemci arasında taşınan veriler de dahil olmak üzere her şeyi günlüğe kaydeder.

Günlük düzeyini yapılandırmak için Hubconnectionbuilder üzerinde configurelogging yöntemini kullanın. İletiler tarayıcı konsoluna kaydedilir.

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

İstemcileri yeniden bağla

El ile yeniden bağlan

Aşağıdaki kod, genel bir el ile yeniden bağlantı yaklaşımını göstermektedir:

1. Bağlantıyı başlatmak için bir işlev (Bu durumda start işlev) oluşturulur.
2. startBağlantının onclose olay işleyicisindeki işlevi çağırın.

async function start() {
    try {
        await connection.start();
        console.log("connected");
    } catch (err) {
        console.log(err);
        setTimeout(() => start(), 5000);
    }
};

connection.onclose(async () => {
    await start();
});

Gerçek dünyada bir uygulama, bir üstel geri kapatmayı kullanır veya vermeden önce belirtilen sayıda kez yeniden dener.

Ek kaynaklar

• JavaScript API'si başvurusu
• JavaScript öğreticisi
• WebPack ve TypeScript öğreticisi
• Merkezler
• .NET istemcisi
• Azure 'da yayımlama
• Çıkış noktaları arası Istekler (CORS)
• Azure SignalR hizmeti sunucusuz belgeler