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

Bu öğreticide kullanarak SignalRgerçek zamanlı uygulama oluşturmanın temelleri öğretildi. Şunları yapmayı öğreneceksiniz:

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

Önkoşullar

Web uygulaması projesi oluşturma

dotnet new webapp -o SignalRChat
code -r SignalRChat

İstemci kitaplığını SignalR ekleme

SignalR Sunucu kitaplığı, ASP.NET Core 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ın. unpkgnpm üzerindeki her şey için hızlı, genel bir içerik teslim ağıdır.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js

Downloading file https://unpkg.com/@microsoft/signalr@latest/dist/browser/signalr.js...
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Hub oluşturma SignalR

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 sınıfını oluşturunChatHub:

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);
        }
    }
}

sınıfı ChatHub sınıfından devralır SignalRHub . 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ırmak SignalR

Sunucunun SignalR istekleri 'a geçirmek SignalR için yapılandırılması SignalRgerekir. 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ıdaki vurgulanan kod, ASP.NET Core bağımlılık ekleme ve yönlendirme sistemlerine eklenir SignalR .

İstemci kodu ekleme SignalR

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.
• Hub'dan SignalR alınan iletileri görüntülemek için ile id="messagesList" bir liste oluşturur.
• betik başvurularını SignalR içerir ve chat.js uygulama kodu 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

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.

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

• Hub'ları kullanma
• Kesin türemiş hub'lar
• ASP.NET Core'da kimlik doğrulaması ve yetkilendirme SignalR
• Örnek kodu görüntüleme veya indirme (indirme)

Bu öğreticide kullanarak SignalRgerçek zamanlı uygulama oluşturmanın temelleri öğretildi. Şunları yapmayı öğreneceksiniz:

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

Önkoşullar

Web uygulaması projesi oluşturma

dotnet new webapp -o SignalRChat
code -r SignalRChat

İstemci kitaplığını SignalR ekleme

SignalR Sunucu kitaplığı, ASP.NET Core 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ın. unpkgnpm üzerindeki her şey için hızlı, genel bir içerik teslim ağıdır.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Hub oluşturma SignalR

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 sınıfını oluşturunChatHub:

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);
        }
    }
}

sınıfı ChatHub sınıfından devralır SignalRHub . 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ırmak SignalR

Sunucunun SignalR istekleri 'a geçirmek SignalR için yapılandırılması SignalRgerekir. 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ıdaki vurgulanan kod, ASP.NET Core bağımlılık ekleme ve yönlendirme sistemlerine eklenir SignalR .

İstemci kodu ekleme SignalR

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.
• Hub'dan SignalR alınan iletileri görüntülemek için ile id="messagesList" bir liste oluşturur.
• betik başvurularını SignalR içerir ve chat.js uygulama kodu 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

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.

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

• Hub'ları kullanma
• Kesin türemiş hub'lar
• ASP.NET Core'da kimlik doğrulaması ve yetkilendirme SignalR
• Örnek kodu görüntüleme veya indirme (indirme)

Bu öğreticide kullanarak SignalRgerçek zamanlı uygulama oluşturmanın temelleri öğretildi. Şunları yapmayı öğreneceksiniz:

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

Önkoşullar

Web uygulaması projesi oluşturma

dotnet new webapp -o SignalRChat
code -r SignalRChat

İstemci kitaplığını SignalR ekleme

SignalR Sunucu kitaplığı, ASP.NET Core 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ın. unpkgnpm üzerindeki her şey için hızlı, genel bir içerik teslim ağıdır.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Hub oluşturma SignalR

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 sınıfını oluşturunChatHub:

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);
        }
    }
}

sınıfı ChatHub sınıfından devralır SignalRHub . 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ırmak SignalR

Sunucunun SignalR istekleri 'a geçirmek SignalR için yapılandırılması SignalRgerekir. 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ıdaki vurgulanan kod, ASP.NET Core bağımlılık ekleme ve yönlendirme sistemlerine eklenir SignalR .

İstemci kodu ekleme SignalR

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.
• Hub'dan SignalR alınan iletileri görüntülemek için ile id="messagesList" bir liste oluşturur.
• betik başvurularını SignalR içerir ve chat.js uygulama kodu 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

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.

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

• Hub'ları kullanma
• Kesin türemiş hub'lar
• ASP.NET Core'da kimlik doğrulaması ve yetkilendirme SignalR
• Örnek kodu görüntüleme veya indirme (indirme)

Bu öğreticide kullanarak SignalRgerçek zamanlı uygulama oluşturmanın temelleri öğretildi. Şunları yapmayı öğreneceksiniz:

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

Önkoşullar

Web uygulaması projesi oluşturma

dotnet new webapp -o SignalRChat
cd SignalRChat
code -r .

İstemci kitaplığını SignalR ekleme

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, düğüm olan npm'de bulunan her şeyi teslim abilen bir içerik teslim ağıdır (CDN).js paket yöneticisi.

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Hub oluşturma SignalR

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);
        }
    }
}

sınıfı ChatHub sınıfından devralır SignalRHub . 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ırmak SignalR

Sunucunun SignalR istekleri 'a geçirmek SignalR için yapılandırılması SignalRgerekir.

• 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 ASP.NET Core bağımlılık ekleme ve yönlendirme sistemlerine eklenir SignalR .

İstemci kodu ekleme SignalR

• 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.
  • Hub'dan SignalR alınan iletileri görüntülemek için ile id="messagesList" bir liste oluşturur.
  • betik başvurularını SignalR ve chat.js sonraki adımda oluşturduğunuz uygulama kodunu içerir.

• 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 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

• 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.

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

• Hub'ları kullanma
• Kesin türemiş hub'lar
• ASP.NET Core'da kimlik doğrulaması ve yetkilendirme SignalR
• Örnek kodu görüntüleme veya indirme (indirme)