Öğretici: ASP.NET Core kullanmaya başlama SignalR

Note

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Warning

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Bu öğretici, SignalR kullanarak gerçek zamanlı bir uygulama oluşturmanın temellerini öğretir. Şunları yapmayı öğreneceksiniz:

  • Web projesi oluşturma.
  • SignalR istemci kitaplığını ekleyin.
  • Bir SignalR hub oluşturun.
  • Projeyi SignalR kullanacak şekilde yapılandırın.
  • Tüm bağlı istemcilere herhangi bir istemciden ileti gönderen kod ekleyin.

Sonunda çalışan bir sohbet uygulamanız olacak:

SignalR örnek uygulama.

Prerequisites

Web uygulaması projesi oluşturma

Visual Studio'nun en son sürümünü başlatın ve Yeni proje oluştur'u seçin.

Başlangıç penceresinden yeni bir proje oluşturun.

Yeni proje oluştur iletişim kutusunda ASP.NET Core Web App (RazorSayfalar) öğesini ve ardından İleri'yi seçin.

ASP.NET Core Web Uygulaması oluşturun.

Yeni projenizi yapılandırın iletişim kutusunda, SignalRChat için girin. Ad alanlarının öğreticideki kodla eşleşmesi için projeyi, büyük/küçük harf kullanımını da aynı şekilde koruyarak, SignalRChat olarak adlandırmak önemlidir.

sonrakiseçin.

Ek bilgiler iletişim kutusunda .NET 10.0 (Uzun Süreli Destek) öğesini ve ardından Oluştur'u seçin.

Ek bilgiler.

SignalR istemci kitaplığını ekleyin

SignalR Sunucu kitaplığı, ASP.NET Core paylaşılan çerçevesine dahildir. JavaScript istemci kitaplığı projeye otomatik olarak dahil değildir. Bu eğitimde, istemci kitaplığını unpkg'den almak için Kitaplık Yöneticisi'ni (LibMan) kullanın. unpkg, npm üzerindeki her şey için hızlı, küresel bir içerik dağıtım ağıdır.

Çözüm Gezgini'nde projeye sağ tıklayın ve Ekle>İstemci Tarafı Kitaplığı'nı seçin.

İstemci Tarafı Kitaplığı Ekle iletişim kutusunda:

  • Sağlayıcı için unpkg'yi seçin
  • @microsoft/signalr@latest için girin.
  • Belirli dosyaları seç seçeneğini belirleyin, dist/browser klasörünü genişletin ve signalr.js ile signalr.min.js öğelerini seçin.
  • Hedef Konumu öğesini wwwroot/js/signalr/ olarak ayarlayın.
  • Yükle'yi seçin.

İstemci Tarafı Kitaplığı Ekle iletişim kutusu - kitaplık seç.

LibMan bir wwwroot/js/signalr klasör oluşturur ve seçili dosyaları bu klasöre kopyalar. libman.json Aşağıdaki kodla bir dosya oluşturulur:

{
  "version": "3.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@microsoft/signalr@latest",
      "destination": "wwwroot/lib/microsoft/signalr/",
      "files": [
        "dist/browser/signalr.js",
        "dist/browser/signalr.min.js"
      ]
    }
  ]
}

SignalR hub oluşturun

Hub, istemci-sunucu iletişimlerini işleyen üst düzey bir işlem hattı olarak hizmet veren bir sınıftır.

SignalRChat proje klasöründe bir Hubs klasör oluşturun.

Hubs klasöründe, aşağıdaki kodla ChatHub sınıfını oluşturun:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHub sınıfı, SignalRHub sınıfından türetilir. Hub sınıfı bağlantıları, grupları ve mesajlaşmayı yönetir.

yöntemi SendMessage , tüm istemcilere ileti göndermek için bağlı bir istemci tarafından çağrılabilir. yöntemini çağıran JavaScript istemci kodu öğreticinin ilerleyen bölümlerinde gösterilir. SignalR kod, maksimum ölçeklenebilirlik sağlamak için zaman uyumsuzdur.

Yapılandırın SignalR

SignalR sunucusu, SignalR isteklerini SignalR öğesine iletecek şekilde yapılandırılmalıdır. Aşağıdaki vurgulanmış kodu dosyaya Program.cs ekleyin.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthorization();

app.MapStaticAssets();
app.MapHub<ChatHub>("/chatHub");
app.MapRazorPages()
   .WithStaticAssets();

app.Run();

Yukarıda vurgulanan kod, SignalR öğesini ASP.NET Core bağımlılık enjeksiyonu ve yönlendirme sistemlerine ekler.

SignalR istemci kodu ekleyin

içindeki Pages/Index.cshtml içeriği aşağıdaki kodla değiştirin:

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </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>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Yukarıdaki işaretleme:

  • Metin kutuları ve gönder düğmesi oluşturur.
  • id="messagesList" hub'ından alınan iletileri görüntülemek için SignalR ile bir liste oluşturur.
  • SignalR için komut dosyası başvurularını içerir ve chat.js uygulama kodu bir sonraki adımda oluşturulur.

wwwroot/js klasöründe aşağıdaki koda sahip bir chat.js dosya oluşturun:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

Önceki JavaScript:

  • Bir bağlantı oluşturur ve başlatır.
  • Gönder düğmesine, hub'a ileti gönderen bir işleyici ekler.
  • Bağlantı nesnesine, hub'dan ileti alan ve bunları listeye ekleyen bir işleyici ekler.

Uygulamayı çalıştırma

Uygulamayı hata ayıklama olmadan çalıştırmak için Ctrl+F5 seçin.

Adres çubuğundan URL'yi kopyalayın, başka bir tarayıcı örneği veya sekmesi açın ve URL'yi adres çubuğuna yapıştırın.

Tarayıcılardan birini seçin, bir ad ve ileti girin ve İleti Gönder düğmesini seçin.

Ad ve ileti her iki sayfada da anında görüntülenir.

Tamamlanan SignalR örnek uygulama.

Tip

Uygulama çalışmazsa tarayıcı geliştirici araçlarını (F12) açın ve konsola gidin. HTML ve JavaScript koduyla ilgili olası hataları arayın. Örneğin, yönlendirilenden farklı bir klasöre konulduysa signalr.js , bu dosya başvurusu çalışmaz ve konsolda 404 hatasıyla sonuçlanır. signalr.js bulunamadı hatası. Chrome'da bir ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY hata oluştuysa, geliştirme sertifikasını güncelleştirmek için aşağıdaki komutları çalıştırın:

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Azure'a Yayımlama

Azure'a dağıtma hakkında bilgi için bkz . Hızlı Başlangıç: ASP.NET web uygulaması dağıtma. Azure SignalR Hizmeti hakkında daha fazla bilgi için bkz . Azure SignalR Hizmeti nedir?.

Sonraki Adımlar

Bu öğretici, SignalR kullanarak gerçek zamanlı bir uygulama oluşturmanın temellerini öğretir. Şunları yapmayı öğreneceksiniz:

  • Web projesi oluşturma.
  • SignalR istemci kitaplığını ekleyin.
  • Bir SignalR hub oluşturun.
  • Projeyi SignalR kullanacak şekilde yapılandırın.
  • Tüm bağlı istemcilere herhangi bir istemciden ileti gönderen kod ekleyin.

Sonunda çalışan bir sohbet uygulamanız olacak:

SignalR örnek uygulama

Prerequisites

Web uygulaması projesi oluşturma

Visual Studio 2022'yi başlatın ve Yeni proje oluştur'u seçin.

Başlangıç penceresinden yeni proje oluşturma

Yeni proje oluştur iletişim kutusunda ASP.NET Core Web App (RazorSayfalar) öğesini ve ardından İleri'yi seçin.

ASP.NET Core Web Uygulaması oluşturma

Yeni projenizi yapılandırın iletişim kutusunda, SignalRChat için girin. Ad alanlarının öğreticideki kodla eşleşmesi için projeyi, büyük/küçük harf kullanımını da aynı şekilde koruyarak, SignalRChat olarak adlandırmak önemlidir.

sonrakiseçin.

Ek bilgi iletişim kutusunda .NET 8.0 (Uzun Vadeli Destek) öğesini ve ardından Oluştur'u seçin.

Ek bilgiler

SignalR istemci kitaplığını ekleyin

SignalR Sunucu kitaplığı, ASP.NET Core paylaşılan çerçevesine dahildir. JavaScript istemci kitaplığı projeye otomatik olarak dahil değildir. Bu eğitimde, istemci kitaplığını unpkg'den almak için Kitaplık Yöneticisi'ni (LibMan) kullanın. unpkg, npm üzerindeki her şey için hızlı, küresel bir içerik dağıtım ağıdır.

Çözüm Gezgini'nde projeye sağ tıklayın ve Ekle>İstemci Tarafı Kitaplığı'nı seçin.

İstemci Tarafı Kitaplığı Ekle iletişim kutusunda:

  • Sağlayıcı için unpkg'yi seçin
  • @microsoft/signalr@latest için girin.
  • Belirli dosyaları seç seçeneğini belirleyin, dist/browser klasörünü genişletin ve signalr.js ile signalr.min.js öğelerini seçin.
  • Hedef Konumu öğesini wwwroot/js/signalr/ olarak ayarlayın.
  • Yükle'yi seçin.

İstemci Taraflı Kitaplık Ekle iletişim kutusu - kitaplık seçin

LibMan bir wwwroot/js/signalr klasör oluşturur ve seçili dosyaları bu klasöre kopyalar.

SignalR hub oluşturun

Hub, istemci-sunucu iletişimlerini işleyen üst düzey bir işlem hattı olarak hizmet veren bir sınıftır.

SignalRChat proje klasöründe bir Hubs klasör oluşturun.

Hubs klasöründe, aşağıdaki kodla ChatHub sınıfını oluşturun:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHub sınıfı, SignalRHub sınıfından türetilir. Hub sınıfı bağlantıları, grupları ve mesajlaşmayı yönetir.

yöntemi SendMessage , tüm istemcilere ileti göndermek için bağlı bir istemci tarafından çağrılabilir. yöntemini çağıran JavaScript istemci kodu öğreticinin ilerleyen bölümlerinde gösterilir. SignalR kod, maksimum ölçeklenebilirlik sağlamak için zaman uyumsuzdur.

Yapılandırın SignalR

SignalR sunucusu, SignalR isteklerini SignalR öğesine iletecek şekilde yapılandırılmalıdır. Aşağıdaki vurgulanmış kodu dosyaya Program.cs ekleyin.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Yukarıda vurgulanan kod, SignalR öğesini ASP.NET Core bağımlılık enjeksiyonu ve yönlendirme sistemlerine ekler.

SignalR istemci kodu ekleyin

içindeki Pages/Index.cshtml içeriği aşağıdaki kodla değiştirin:

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </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>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Yukarıdaki işaretleme:

  • Metin kutuları ve gönder düğmesi oluşturur.
  • id="messagesList" hub'ından alınan iletileri görüntülemek için SignalR ile bir liste oluşturur.
  • SignalR için komut dosyası başvurularını içerir ve chat.js uygulama kodu bir sonraki adımda oluşturulur.

wwwroot/js klasöründe aşağıdaki koda sahip bir chat.js dosya oluşturun:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

Önceki JavaScript:

  • Bir bağlantı oluşturur ve başlatır.
  • Gönder düğmesine, hub'a ileti gönderen bir işleyici ekler.
  • Bağlantı nesnesine, hub'dan ileti alan ve bunları listeye ekleyen bir işleyici ekler.

Uygulamayı çalıştırma

Uygulamayı hata ayıklama olmadan çalıştırmak için Ctrl+F5 seçin.

Adres çubuğundan URL'yi kopyalayın, başka bir tarayıcı örneği veya sekmesi açın ve URL'yi adres çubuğuna yapıştırın.

Tarayıcılardan birini seçin, bir ad ve ileti girin ve İleti Gönder düğmesini seçin.

Ad ve ileti her iki sayfada da anında görüntülenir.

Tamamlanan SignalR örnek uygulama

Tip

Uygulama çalışmazsa tarayıcı geliştirici araçlarını (F12) açın ve konsola gidin. HTML ve JavaScript koduyla ilgili olası hataları arayın. Örneğin, yönlendirilenden farklı bir klasöre konulduysa signalr.js , bu dosya başvurusu çalışmaz ve konsolda 404 hatasıyla sonuçlanır. signalr.js bulunamadı hatası Chrome'da bir ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY hatası oluştuysa, geliştirme sertifikasını güncelleştirmek için aşağıdaki komutları çalıştırın:

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Azure'a Yayımlama

Azure'a dağıtma hakkında bilgi için bkz . Hızlı Başlangıç: ASP.NET web uygulaması dağıtma. Azure SignalR Hizmeti hakkında daha fazla bilgi için bkz . Azure SignalR Hizmeti nedir?.

Sonraki Adımlar

Bu öğretici, SignalR kullanarak gerçek zamanlı bir uygulama oluşturmanın temellerini öğretir. Şunları yapmayı öğreneceksiniz:

  • Web projesi oluşturma.
  • SignalR istemci kitaplığını ekleyin.
  • Bir SignalR hub oluşturun.
  • Projeyi SignalR kullanacak şekilde yapılandırın.
  • Tüm bağlı istemcilere herhangi bir istemciden ileti gönderen kod ekleyin.

Sonunda çalışan bir sohbet uygulamanız olacak:

SignalR örnek uygulama

Prerequisites

Web uygulaması projesi oluşturma

Visual Studio 2022'yi başlatın ve Yeni proje oluştur'u seçin.

Başlangıç penceresinden yeni proje oluşturma

Yeni proje oluştur iletişim kutusunda ASP.NET Core Web App'i ve ardından İleri'yi seçin.

ASP.NET Core Web Uygulaması oluşturma

Yeni projenizi yapılandırın iletişim kutusunda, SignalRChat için girin. Ad alanlarının öğreticideki kodla eşleşmesi için projeyi, büyük/küçük harf kullanımını da aynı şekilde koruyarak, SignalRChat olarak adlandırmak önemlidir.

sonrakiseçin.

Ek bilgiler iletişim kutusunda .NET 7.0 (Standart Terim Desteği) öğesini ve ardından Oluştur'u seçin.

Ek bilgiler

SignalR istemci kitaplığını ekleyin

SignalR Sunucu kitaplığı, ASP.NET Core paylaşılan çerçevesine dahildir. JavaScript istemci kitaplığı projeye otomatik olarak dahil değildir. Bu eğitimde, istemci kitaplığını unpkg'den almak için Kitaplık Yöneticisi'ni (LibMan) kullanın. unpkg, npm üzerindeki her şey için hızlı, küresel bir içerik dağıtım ağıdır.

Çözüm Gezgini'nde projeye sağ tıklayın ve Ekle>İstemci Tarafı Kitaplığı'nı seçin.

İstemci Tarafı Kitaplığı Ekle iletişim kutusunda:

  • Sağlayıcı için unpkg'yi seçin
  • @microsoft/signalr@latest için girin.
  • Belirli dosyaları seç seçeneğini belirleyin, dist/browser klasörünü genişletin ve signalr.js ile signalr.min.js öğelerini seçin.
  • Hedef Konumu öğesini wwwroot/js/signalr/ olarak ayarlayın.
  • Yükle'yi seçin.

İstemci Taraflı Kitaplık Ekle iletişim kutusu - kitaplık seçin

LibMan bir wwwroot/js/signalr klasör oluşturur ve seçili dosyaları bu klasöre kopyalar.

SignalR hub oluşturun

Hub, istemci-sunucu iletişimlerini işleyen üst düzey bir işlem hattı olarak hizmet veren bir sınıftır.

SignalRChat proje klasöründe bir Hubs klasör oluşturun.

Hubs klasöründe, aşağıdaki kodla ChatHub sınıfını oluşturun:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHub sınıfı, SignalRHub sınıfından türetilir. Hub sınıfı bağlantıları, grupları ve mesajlaşmayı yönetir.

yöntemi SendMessage , tüm istemcilere ileti göndermek için bağlı bir istemci tarafından çağrılabilir. yöntemini çağıran JavaScript istemci kodu öğreticinin ilerleyen bölümlerinde gösterilir. SignalR kod, maksimum ölçeklenebilirlik sağlamak için zaman uyumsuzdur.

Yapılandırın SignalR

SignalR sunucusu, SignalR isteklerini SignalR öğesine iletecek şekilde yapılandırılmalıdır. Aşağıdaki vurgulanmış kodu dosyaya Program.cs ekleyin.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Yukarıda vurgulanan kod, SignalR öğesini ASP.NET Core bağımlılık enjeksiyonu ve yönlendirme sistemlerine ekler.

SignalR istemci kodu ekleyin

içindeki Pages/Index.cshtml içeriği aşağıdaki kodla değiştirin:

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </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>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Yukarıdaki işaretleme:

  • Metin kutuları ve gönder düğmesi oluşturur.
  • id="messagesList" hub'ından alınan iletileri görüntülemek için SignalR ile bir liste oluşturur.
  • SignalR için komut dosyası başvurularını içerir ve chat.js uygulama kodu bir sonraki adımda oluşturulur.

wwwroot/js klasöründe aşağıdaki koda sahip bir chat.js dosya oluşturun:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

Önceki JavaScript:

  • Bir bağlantı oluşturur ve başlatır.
  • Gönder düğmesine, hub'a ileti gönderen bir işleyici ekler.
  • Bağlantı nesnesine, hub'dan ileti alan ve bunları listeye ekleyen bir işleyici ekler.

Uygulamayı çalıştırma

Uygulamayı hata ayıklama olmadan çalıştırmak için Ctrl+F5 seçin.

Adres çubuğundan URL'yi kopyalayın, başka bir tarayıcı örneği veya sekmesi açın ve URL'yi adres çubuğuna yapıştırın.

Tarayıcılardan birini seçin, bir ad ve ileti girin ve İleti Gönder düğmesini seçin.

Ad ve ileti her iki sayfada da anında görüntülenir.

Tamamlanan SignalR örnek uygulama

Tip

Uygulama çalışmazsa tarayıcı geliştirici araçlarını (F12) açın ve konsola gidin. HTML ve JavaScript koduyla ilgili olası hataları arayın. Örneğin, yönlendirilenden farklı bir klasöre konulduysa signalr.js , bu dosya başvurusu çalışmaz ve konsolda 404 hatasıyla sonuçlanır. signalr.js bulunamadı hatası Chrome'da bir ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY hatası oluştuysa, geliştirme sertifikasını güncelleştirmek için aşağıdaki komutları çalıştırın:

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Azure'a Yayımlama

Azure'a dağıtma hakkında bilgi için bkz . Hızlı Başlangıç: ASP.NET web uygulaması dağıtma. Azure SignalR Hizmeti hakkında daha fazla bilgi için bkz . Azure SignalR Hizmeti nedir?.

Sonraki Adımlar

Bu öğretici, SignalR kullanarak gerçek zamanlı bir uygulama oluşturmanın temellerini öğretir. Şunları yapmayı öğreneceksiniz:

  • Web projesi oluşturma.
  • SignalR istemci kitaplığını ekleyin.
  • Bir SignalR hub oluşturun.
  • Projeyi SignalR kullanacak şekilde yapılandırın.
  • Tüm bağlı istemcilere herhangi bir istemciden ileti gönderen kod ekleyin.

Sonunda çalışan bir sohbet uygulamanız olacak:

SignalR örnek uygulama

Prerequisites

Web uygulaması projesi oluşturma

Visual Studio 2022'yi başlatın ve Yeni proje oluştur'u seçin.

Başlangıç penceresinden yeni proje oluşturma

Yeni proje oluştur iletişim kutusunda ASP.NET Core Web App'i ve ardından İleri'yi seçin.

ASP.NET Core Web Uygulaması oluşturma

Yeni projenizi yapılandırın iletişim kutusunda, SignalRChat için girin. Ad alanlarının öğreticideki kodla eşleşmesi için projeyi, büyük/küçük harf kullanımını da aynı şekilde koruyarak, SignalRChat olarak adlandırmak önemlidir.

sonrakiseçin.

Ek bilgi iletişim kutusunda .NET 6.0 (uzun süreli destek) öğesini ve ardından Oluştur'u seçin.

Ek bilgiler

SignalR istemci kitaplığını ekleyin

SignalR Sunucu kitaplığı, ASP.NET Core paylaşılan çerçevesine dahildir. JavaScript istemci kitaplığı projeye otomatik olarak dahil değildir. Bu eğitimde, istemci kitaplığını unpkg'den almak için Kitaplık Yöneticisi'ni (LibMan) kullanın. unpkg, npm üzerindeki her şey için hızlı, küresel bir içerik dağıtım ağıdır.

Çözüm Gezgini'nde projeye sağ tıklayın ve Ekle>İstemci Tarafı Kitaplığı'nı seçin.

İstemci Tarafı Kitaplığı Ekle iletişim kutusunda:

  • Sağlayıcı için unpkg'yi seçin
  • @microsoft/signalr@latest için girin.
  • Belirli dosyaları seç seçeneğini belirleyin, dist/browser klasörünü genişletin ve signalr.js ile signalr.min.js öğelerini seçin.
  • Hedef Konumu öğesini wwwroot/js/signalr/ olarak ayarlayın.
  • Yükle'yi seçin.

İstemci Taraflı Kitaplık Ekle iletişim kutusu - kitaplık seçin

LibMan bir wwwroot/js/signalr klasör oluşturur ve seçili dosyaları bu klasöre kopyalar.

SignalR hub oluşturun

Hub, istemci-sunucu iletişimlerini işleyen üst düzey bir işlem hattı olarak hizmet veren bir sınıftır.

SignalRChat proje klasöründe bir Hubs klasör oluşturun.

Hubs klasöründe, aşağıdaki kodla ChatHub sınıfını oluşturun:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHub sınıfı, SignalRHub sınıfından türetilir. Hub sınıfı bağlantıları, grupları ve mesajlaşmayı yönetir.

yöntemi SendMessage , tüm istemcilere ileti göndermek için bağlı bir istemci tarafından çağrılabilir. yöntemini çağıran JavaScript istemci kodu öğreticinin ilerleyen bölümlerinde gösterilir. SignalR kod, maksimum ölçeklenebilirlik sağlamak için zaman uyumsuzdur.

Yapılandırın SignalR

SignalR sunucusu, SignalR isteklerini SignalR öğesine iletecek şekilde yapılandırılmalıdır. Aşağıdaki vurgulanmış kodu dosyaya Program.cs ekleyin.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Yukarıda vurgulanan kod, SignalR öğesini ASP.NET Core bağımlılık enjeksiyonu ve yönlendirme sistemlerine ekler.

SignalR istemci kodu ekleyin

içindeki Pages/Index.cshtml içeriği aşağıdaki kodla değiştirin:

@page
    <div class="container">
        <div class="row p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="userInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <input type="button" id="sendButton" value="Send Message" />
            </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>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Yukarıdaki işaretleme:

  • Metin kutuları ve gönder düğmesi oluşturur.
  • id="messagesList" hub'ından alınan iletileri görüntülemek için SignalR ile bir liste oluşturur.
  • SignalR için komut dosyası başvurularını içerir ve chat.js uygulama kodu bir sonraki adımda oluşturulur.

wwwroot/js klasöründe aşağıdaki koda sahip bir chat.js dosya oluşturun:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

Önceki JavaScript:

  • Bir bağlantı oluşturur ve başlatır.
  • Gönder düğmesine, hub'a ileti gönderen bir işleyici ekler.
  • Bağlantı nesnesine, hub'dan ileti alan ve bunları listeye ekleyen bir işleyici ekler.

Uygulamayı çalıştırma

Uygulamayı hata ayıklamadan çalıştırmak için CTRL+F5 tuşlarına basın.

Adres çubuğundan URL'yi kopyalayın, başka bir tarayıcı örneği veya sekmesi açın ve URL'yi adres çubuğuna yapıştırın.

Tarayıcılardan birini seçin, bir ad ve ileti girin ve İleti Gönder düğmesini seçin.

Ad ve ileti her iki sayfada da anında görüntülenir.

SignalR örnek uygulama

Tip

Uygulama çalışmazsa tarayıcı geliştirici araçlarını (F12) açın ve konsola gidin. HTML ve JavaScript koduyla ilgili olası hataları arayın. Örneğin, yönlendirilenden farklı bir klasöre konulduysa signalr.js , bu dosya başvurusu çalışmaz ve konsolda 404 hatasıyla sonuçlanır. signalr.js bulunamadı hatası Chrome'da bir ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY hatası oluştuysa, geliştirme sertifikasını güncelleştirmek için aşağıdaki komutları çalıştırın:

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Azure'a Yayımlama

Azure'a dağıtma hakkında bilgi için bkz . Hızlı Başlangıç: ASP.NET web uygulaması dağıtma. Azure SignalR Hizmeti hakkında daha fazla bilgi için bkz . Azure SignalR Hizmeti nedir?.

Sonraki Adımlar

Bu öğretici, SignalR kullanarak gerçek zamanlı bir uygulama oluşturmanın temellerini öğretir. Şunları yapmayı öğreneceksiniz:

  • Web projesi oluşturma.
  • SignalR istemci kitaplığını ekleyin.
  • Bir SignalR hub oluşturun.
  • Projeyi SignalR kullanacak şekilde yapılandırın.
  • Tüm bağlı istemcilere herhangi bir istemciden ileti gönderen kod ekleyin.

Sonunda çalışan bir sohbet uygulamanız olacak:

SignalR örnek uygulama

Prerequisites

Web uygulaması projesi oluşturma

  • Menüden Dosya > Yeni Proje'yi seçin.
  • Yeni proje oluştur iletişim kutusunda ASP.NET Core Web Application öğesini seçin ve ardından İleri seçeneğini belirleyin.
  • Yeni projenizi yapılandırın iletişim kutusunda projeyi SignalRChat olarak adlandırın ve oluştur'u seçin.
  • Yeni ASP.NET Core web Uygulaması oluştur iletişim kutusunda .NET Core ve ASP.NET Core 3.1'i seçin.
  • Pages kullanan bir proje oluşturmak için Razor seçin ve ardından Create öğesini seçin.

Visual Studio'da Yeni Proje iletişim kutusu

SignalR istemci kitaplığını ekleyin

Sunucu SignalR kitaplığı ASP.NET Core 3.1 paylaşılan çerçevesine dahildir. JavaScript istemci kitaplığı projeye otomatik olarak dahil değildir. Bu öğreticide, istemci kitaplığını unpkg'den almak için Kitaplık Yöneticisi'ni (LibMan) kullanırsınız. unpkg, Node.js paket yöneticisi npm'de bulunan her şeyi teslim abilen bir içerik teslim ağıdır (CDN).

  • Çözüm Gezgini'nde projeye sağ tıklayın ve Ekle>İstemci Tarafı Kitaplığı'nı seçin.
  • İstemci Tarafı Kitaplığı Ekle iletişim kutusunda Sağlayıcı için unpkg seçeneğini belirleyin.
  • Kitaplık için @microsoft/signalr@latest girin.
  • Belirli dosyaları seç seçeneğini belirleyin, dist/browser klasörünü genişletin ve signalr.js ile signalr.min.js öğelerini seçin.
  • Hedef Konumwwwroot/js/signalr/ olarak ayarlayın
  • Yükle'yi seçin

İstemci Taraflı Kitaplık Ekle iletişim kutusu - kitaplık seçin

LibMan bir wwwroot/js/signalr klasörü oluşturur ve seçili dosyaları bu klasöre kopyalar.

SignalR hub oluşturun

Hub, istemci-sunucu iletişimlerini işleyen üst düzey bir işlem hattı olarak hizmet veren bir sınıftır.

  • SignalRChat proje klasöründe bir Hubs klasörü oluşturun.
  • Hubs klasöründe aşağıdaki koda sahip bir ChatHub.cs dosya oluşturun:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHub sınıfı, SignalRHub sınıfından türetilir. Hub sınıfı bağlantıları, grupları ve mesajlaşmayı yönetir.

yöntemi SendMessage , tüm istemcilere ileti göndermek için bağlı bir istemci tarafından çağrılabilir. yöntemini çağıran JavaScript istemci kodu öğreticinin ilerleyen bölümlerinde gösterilir. SignalR kod, maksimum ölçeklenebilirlik sağlamak için zaman uyumsuzdur.

Yapılandırın SignalR

SignalR sunucusu, SignalR isteklerini SignalR öğesine iletecek şekilde yapılandırılmalıdır.

  • Aşağıdaki vurgulanmış kodu dosyaya Startup.cs ekleyin.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SignalRChat.Hubs;

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

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

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

    Bu değişiklikler, SignalR öğesini ASP.NET Core bağımlılık enjeksiyonu ve yönlendirme sistemlerine ekler.

SignalR istemci kodu ekleyin

  • içindeki Pages/Index.cshtml içeriği aşağıdaki kodla değiştirin:

    @page
    <div class="container">
        <div class="row p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="userInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <input type="button" id="sendButton" value="Send Message" />
            </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>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

    Yukarıdaki kod:

    • Ad ve ileti metni için metin kutuları ve gönder düğmesi oluşturur.
    • id="messagesList" hub'ından alınan iletileri görüntülemek için SignalR ile bir liste oluşturur.
    • SignalR ve sonraki adımda oluşturduğunuz chat.js uygulama koduna yönelik betik başvurularını içerir.

  • wwwroot/js klasöründe aşağıdaki koda sahip bir dosyası oluşturun:

    "use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

    Yukarıdaki kod:

    • Bir bağlantı oluşturur ve başlatır.
    • Gönder düğmesine, hub'a ileti gönderen bir işleyici ekler.
    • Bağlantı nesnesine, hub'dan ileti alan ve bunları listeye ekleyen bir işleyici ekler.

Uygulamayı çalıştırma

  • Uygulamayı hata ayıklamadan çalıştırmak için CTRL+F5 tuşlarına basın.
  • Adres çubuğundan URL'yi kopyalayın, başka bir tarayıcı örneği veya sekmesi açın ve URL'yi adres çubuğuna yapıştırın.
  • Tarayıcılardan birini seçin, bir ad ve ileti girin ve İleti Gönder düğmesini seçin. Ad ve ileti her iki sayfada da anında görüntülenir.

SignalR örnek uygulama

Tip

  • Uygulama çalışmazsa tarayıcı geliştirici araçlarınızı (F12) açın ve konsola gidin. HTML ve JavaScript kodunuzla ilgili hatalar görebilirsiniz. Örneğin, yönlendirilenden farklı bir klasör eklediğinizi signalr.js varsayalım. Bu durumda bu dosyaya başvuru çalışmaz ve konsolda bir 404 hatası görürsünüz. signalr.js bulunamadı hatası

  • Chrome'da hata ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY alırsanız geliştirme sertifikanızı güncelleştirmek için şu komutları çalıştırın:

    dotnet dev-certs https --clean
dotnet dev-certs https --trust

Azure'a Yayımlama

Azure'a dağıtma hakkında bilgi için bkz . Hızlı Başlangıç: ASP.NET web uygulaması dağıtma.

Sonraki Adımlar

  • Last updated on