Hızlı başlangıç: SignalR hizmetini kullanarak sohbet odası oluşturma
Azure SignalR Hizmeti, geliştiricilerin gerçek zamanlı özelliklerle web uygulamalarını kolayca derlemesine yardımcı olan bir Azure hizmetidir. bu hizmet başlangıçta ASP.NET Core 2,1 için signalrtabanlıdır, ancak bundan sonra daha sonra sürümleri desteklemektedir.
Bu makalede Azure SignalR Hizmeti ile çalışmaya başlama işlemi gösterilmektedir. bu hızlı başlangıçta, bir ASP.NET Core MVC web uygulaması kullanarak bir sohbet uygulaması oluşturacaksınız. Bu uygulama, gerçek zamanlı içerik güncelleştirmelerini etkinleştirmek üzere Azure SignalR Hizmeti kaynağınızla bağlantı kuracaktır. Web uygulamasını yerel olarak barındıracak ve birden çok tarayıcı istemcisine bağlanırsınız. Her istemci, diğer tüm istemcilere içerik güncelleştirmeleri gönderebilecektir.
Bu hızlı başlangıçtaki adımları tamamlamak için herhangi bir kod düzenleyicisini kullanabilirsiniz. bir seçenek, Windows, macos ve Linux platformlarında kullanılabilen Visual Studio Code.
Bu öğreticinin kodu AzureSignalR-samples GitHub deposundan indirilebilir. Ayrıca, bu hızlı başlangıçta kullanılan Azure kaynaklarını bir SignalR Hizmet betiği oluştur' u izleyerek oluşturabilirsiniz.
Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.
Önkoşullar
- .NET Core SDK'i yükler.
- AzureSignalR-sample GitHub deposunu indirin veya kopyalayın.
Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bilgi verin.
Azure SignalR kaynağı oluşturma
Bir Azure SignalR hizmeti kaynağı oluşturmak için öncelikle Azure Portaloturum açın. Sayfanın sol üst kısmında + kaynak oluştur' u seçin. Market 'te Ara metin kutusuna SignalR hizmeti girin.
Sonuçlarda SignalR hizmetini seçin ve Oluştur' u seçin.
Yeni SignalR ayarları sayfasında, yeni SignalR kaynağınız için aşağıdaki ayarları ekleyin:
Name Önerilen değer Description Kaynak adı testsignalr SignalR kaynağı için kullanılacak benzersiz kaynak adını girin. Ad, 1 ile 63 karakter arasında bir dize olmalı ve yalnızca rakam, harf ve kısa çizgi ( -) karakteri içermelidir. Ad, tire karakteriyle başlayamaz veya bitmez ve ardışık çizgi karakterleri geçerli değildir.Abonelik Aboneliğinizi seçin SignalR testi için kullanmak istediğiniz Azure aboneliğini seçin. Hesabınızda yalnızca bir abonelik varsa, bu otomatik olarak seçilir ve abonelik açılan düzeyi gösterilmez. Kaynak grubu Signalrtestresources adlı bir kaynak grubu oluşturun SignalR kaynağınız için bir kaynak grubu seçin veya oluşturun. Bu grup, kaynak grubunu silerek aynı anda silmek isteyebileceğiniz birden çok kaynağı düzenlemek için yararlıdır. Daha fazla bilgi için bkz. Azure kaynaklarınızı yönetmek için kaynak gruplarını kullanma. Konum Doğu ABD SignalR kaynağınızın barındırılacağı coğrafi konumu belirtmek için Konum’u kullanın. En iyi performans için kaynağınızı uygulamanızın diğer bileşenleriyle aynı bölgede oluşturmanızı öneririz. Fiyatlandırma katmanı Ücretsiz Şu anda, ücretsiz ve Standart seçenekler kullanılabilir. Panoya sabitle ✔ Daha kolay bulabilmek için kaynağın panonuza sabitlendiği bu kutuyu seçin. Gözden geçir ve oluştur’u seçin. Doğrulamanın tamamlanmasını bekleyin.
Oluştur’u seçin. Dağıtımın tamamlanması birkaç dakika sürebilir.
Dağıtım tamamlandıktan sonra Ayarlar altında anahtarlar ' ı seçin. Birincil anahtar için Bağlantı dizenizi kopyalayın. Bu dizeyi daha sonra uygulamanızı Azure SignalR hizmeti kaynağını kullanacak şekilde yapılandırmak için kullanacaksınız.
Bağlantı dizesi aşağıdaki şekildedir:
Endpoint=<service_endpoint>;AccessKey=<access_key>;
Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bilgi verin.
ASP.NET Core web uygulaması oluşturma
bu bölümde, bir ASP.NET Core MVC web uygulaması projesi oluşturmak için .net Core komut satırı arabirimini (clı) kullanacaksınız. Visual Studio üzerinden .NET Core CLI kullanmanın avantajı Windows, macos ve Linux platformları arasında kullanılabilir.
Projeniz için bir klasör oluşturun. Bu hızlı başlangıç, E:\Testing\chattest klasörünü kullanır.
Yeni klasörde, projeyi oluşturmak için aşağıdaki komutu çalıştırın:
dotnet new mvc
Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bilgi verin.
Projeye Gizli Dizi Yöneticisi ekleme
Bu bölümde, projenize gizli yönetici aracını ekleyeceksiniz. Gizli dizi Yöneticisi Aracı, geliştirme çalışması için hassas verileri proje ağacınızdaki dışında depolar. Bu yaklaşım, kaynak kodundaki uygulama gizli anahtarlarının yanlışlıkla paylaşılmasını önlemeye yardımcı olur.
.csproj dosyanızı açın. Microsoft.Extensions.SecretManager.Tools öğesini dahil etmek için bir
DotNetCliToolReferenceöğesi ekleyin. AyrıcaUserSecretsId, chattest. csproj için aşağıdaki kodda gösterildiği gibi bir öğesi ekleyin ve dosyayı kaydedin.<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> <UserSecretsId>SignalRChatRoomEx</UserSecretsId> </PropertyGroup> <ItemGroup> <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.4" /> <DotNetCliToolReference Include="Microsoft.Extensions.SecretManager.Tools" Version="2.0.2" /> </ItemGroup> </Project>
Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bilgi verin.
Web uygulamasına Azure SignalR ekleme
Microsoft.Azure.SignalRaşağıdaki komutu çalıştırarak NuGet paketine bir başvuru ekleyin:dotnet add package Microsoft.Azure.SignalRProjenizin paketlerini geri yüklemek için aşağıdaki komutu çalıştırın:
dotnet restoreGizli bir yöneticiye Azure: SignalR: ConnectionString adlı bir gizli dizi ekleyin.
Bu gizli dizi, SignalR Hizmetinizin kaynağına erişmeye yarayan bağlantı dizesini içerir. Azure: SignalR: ConnectionString , bir bağlantı kurmak Için SignalR 'nin aradığı varsayılan yapılandırma anahtarıdır. Aşağıdaki komutta bulunan değeri, SignalR hizmet kaynağınızın bağlantı dizesiyle değiştirin.
Bu komutu . csproj dosyasıyla aynı dizinde çalıştırmalısınız.
dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"Gizli dizi Yöneticisi, yalnızca yerel olarak barındırılırken Web uygulamasını test etmek için kullanılacaktır. Daha sonraki bir öğreticide, sohbet web uygulamasını Azure 'a dağıtırsınız. Web uygulaması Azure 'a dağıtıldıktan sonra, bağlantı dizesini gizli yönetici ile depolamak yerine bir uygulama ayarı kullanırsınız.
Bu gizli dizi Yapılandırma API 'siyle erişilir. İki nokta (:) yapılandırma adında, desteklenen tüm platformlarda Yapılandırma API 'SI ile birlikte kullanılır. Bkz. ortama göre yapılandırma.
Başlangıç. cs ' i açın ve
ConfigureServicesve yöntemlerini çağırarak Azure SignalR hizmetini kullanmak üzere yöntemiAddSignalR()güncelleştirinAddAzureSignalR():public void ConfigureServices(IServiceCollection services) { services.AddSignalR() .AddAzureSignalR(); }Parametresi öğesine geçirilmeyen
AddAzureSignalR()Bu kod, SignalR hizmeti kaynak bağlantı dizesinin varsayılan yapılandırma anahtarını kullanır. Varsayılan yapılandırma anahtarı Azure: SignalR: ConnectionString.Startup. cs dosyasında,
Configureaşağıdaki kodla değiştirerek yöntemi güncelleştirin.public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseRouting(); app.UseFileServer(); app.UseEndpoints(endpoints => { endpoints.MapHub<ChatHub>("/chat"); }); }
Hub sınıfı ekleme
SignalR 'de, bir hub, istemciden çağrılabilen bir yöntemler kümesini kullanıma sunan bir çekirdek bileşendir. Bu bölümde, iki yöntemle bir hub sınıf tanımlayacaksınız:
Broadcast: Bu yöntem bir iletiyi tüm istemcilere yayınlar.Echo: Bu yöntem bir iletiyi çağırana geri gönderir.
her iki yöntem de Clients ASP.NET Core signalr SDK 'nın sağladığı arabirimi kullanır. Bu arabirim, istemcilere içerik gönderebilmeniz için tüm bağlı istemcilere erişmenizi sağlar.
Proje dizininizde Hub adlı yeni bir klasör ekleyin. Yeni klasöre ChatHub. cs adlı yeni bir merkez kodu dosyası ekleyin.
Hub sınıfınızı tanımlamak ve dosyayı kaydetmek için ChatHub. cs dosyasına aşağıdaki kodu ekleyin.
SignalR. Mvc'den farklı bir proje adı kullandıysanız, bu sınıf için ad alanını güncelleştirin.
using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace SignalR.Mvc { public class ChatHub : Hub { public Task BroadcastMessage(string name, string message) => Clients.All.SendAsync("broadcastMessage", name, message); public Task Echo(string name, string message) => Clients.Client(Context.ConnectionId) .SendAsync("echo", name, $"{message} (echo from server)"); } }
Web uygulaması için istemci arabirimini ekleme
Bu sohbet odası uygulamasının istemci kullanıcı arabirimi, Wwwroot dizinindeki index.html adlı bir dosyada HTML ve JavaScript 'ten oluşur.
CSS/site. css dosyasını örnekler deposunun Wwwroot klasöründen kopyalayın. Projenizin CSS/site. css ' i kopyaladığınız bir ile değiştirin.
index.html ana kodu aşağıda verilmiştir:
index.html adlı Wwwroot dizininde yeni bir dosya oluşturun, kopyalayın ve aşağıdaki HTML 'yi yeni oluşturulan dosyaya yapıştırın:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<title>Azure SignalR Group Chat</title>
</head>
<body>
<h2 class="text-center" style="margin-top: 0; padding-top: 30px; padding-bottom: 30px;">Azure SignalR Group Chat</h2>
<div class="container" style="height: calc(100% - 110px);">
<div id="messages" style="background-color: whitesmoke; "></div>
<div style="width: 100%; border-left-style: ridge; border-right-style: ridge;">
<textarea id="message"
style="width: 100%; padding: 5px 10px; border-style: hidden;"
placeholder="Type message and press Enter to send..."></textarea>
</div>
<div style="overflow: auto; border-style: ridge; border-top-style: hidden;">
<button class="btn-warning pull-right" id="echo">Echo</button>
<button class="btn-success pull-right" id="sendmessage">Send</button>
</div>
</div>
<div class="modal alert alert-danger fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div>Connection Error...</div>
<div><strong style="font-size: 1.5em;">Hit Refresh/F5</strong> to rejoin. ;)</div>
</div>
</div>
</div>
</div>
<!--Reference the SignalR library. -->
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@3.1.8/dist/browser/signalr.min.js"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
const generateRandomName = () =>
Math.random().toString(36).substring(2, 10);
let username = generateRandomName();
const promptMessage = 'Enter your name:';
do {
username = prompt(promptMessage, username);
if (!username || username.startsWith('_') || username.indexOf('<') > -1 || username.indexOf('>') > -1) {
username = '';
promptMessage = 'Invalid input. Enter your name:';
}
} while (!username)
const messageInput = document.getElementById('message');
messageInput.focus();
function createMessageEntry(encodedName, encodedMsg) {
var entry = document.createElement('div');
entry.classList.add("message-entry");
if (encodedName === "_SYSTEM_") {
entry.innerHTML = encodedMsg;
entry.classList.add("text-center");
entry.classList.add("system-message");
} else if (encodedName === "_BROADCAST_") {
entry.classList.add("text-center");
entry.innerHTML = `<div class="text-center broadcast-message">${encodedMsg}</div>`;
} else if (encodedName === username) {
entry.innerHTML = `<div class="message-avatar pull-right">${encodedName}</div>` +
`<div class="message-content pull-right">${encodedMsg}<div>`;
} else {
entry.innerHTML = `<div class="message-avatar pull-left">${encodedName}</div>` +
`<div class="message-content pull-left">${encodedMsg}<div>`;
}
return entry;
}
function bindConnectionMessage(connection) {
var messageCallback = function (name, message) {
if (!message) return;
var encodedName = name;
var encodedMsg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var messageEntry = createMessageEntry(encodedName, encodedMsg);
var messageBox = document.getElementById('messages');
messageBox.appendChild(messageEntry);
messageBox.scrollTop = messageBox.scrollHeight;
};
connection.on('broadcastMessage', messageCallback);
connection.on('echo', messageCallback);
connection.onclose(onConnectionError);
}
function onConnected(connection) {
console.log('connection started');
connection.send('broadcastMessage', '_SYSTEM_', username + ' JOINED');
document.getElementById('sendmessage').addEventListener('click', function (event) {
if (messageInput.value) {
connection.send('broadcastMessage', username, messageInput.value);
}
messageInput.value = '';
messageInput.focus();
event.preventDefault();
});
document.getElementById('message').addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById('sendmessage').click();
return false;
}
});
document.getElementById('echo').addEventListener('click', function (event) {
connection.send('echo', username, messageInput.value);
messageInput.value = '';
messageInput.focus();
event.preventDefault();
});
}
function onConnectionError(error) {
if (error && error.message) {
console.error(error.message);
}
var modal = document.getElementById('myModal');
modal.classList.add('in');
modal.style = 'display: block;';
}
const connection = new signalR.HubConnectionBuilder()
.withUrl('/chat')
.build();
bindConnectionMessage(connection);
connection.start()
.then(() => onConnected(connection))
.catch(error => console.error(error.message));
});
</script>
</body>
</html>
index.html kod, HubConnectionBuilder.build() Azure SIGNALR kaynağına http bağlantısı kurmak için çağırır.
Bağlantı başarılı olursa, o bağlantı bindConnectionMessage konumuna geçirilir ve istemciye gönderilen gelen içerik için olay işleyicileri ekler.
HubConnection.start(), hub ile iletişim başlatır. Ardından, onConnected() düğme olay işleyicilerini ekler. Bu işleyiciler, bağlantıyı kullanarak bu istemcinin tüm bağlı istemcilere içerik güncelleştirmeleri göndermesine olanak tanır.
Geliştirme çalışma zamanı profili ekleme
Bu bölümde, ASP.NET Core için bir geliştirme çalışma zamanı ortamı ekleyeceksiniz. Daha fazla bilgi için bkz. ASP.NET Core birden çok ortamla çalışma.
Projenizde Özellikler adlı bir klasör oluşturun.
Aşağıdaki içerikle, Launchsettings. JSON adlı yeni bir dosyayı klasöre ekleyin ve dosyayı kaydedin.
{ "profiles" : { "ChatRoom": { "commandName": "Project", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, "applicationUrl": "http://localhost:5000/" } } }
Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bilgi verin.
Uygulamayı yerel olarak derleyin ve çalıştırın
.NET Core CLI kullanarak uygulamayı derlemek için komut kabuğu 'nda aşağıdaki komutu çalıştırın:
dotnet buildOluşturma başarıyla tamamlandıktan sonra, Web uygulamasını yerel olarak çalıştırmak için aşağıdaki komutu çalıştırın:
dotnet runUygulama, geliştirme çalışma zamanı profilinizde yapılandırıldığı şekilde 5000 numaralı bağlantı noktasında yerel olarak barındırılır:
info: Microsoft.Hosting.Lifetime[0] Now listening on: https://localhost:5001 info: Microsoft.Hosting.Lifetime[0] Now listening on: http://localhost:5000 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0] Hosting environment: Development info: Microsoft.Hosting.Lifetime[0] Content root path: E:\Testing\chattestİki tarayıcı penceresi açın. Her tarayıcıda öğesine gidin
http://localhost:5000. Adınızı girmeniz istenir. Her iki istemci için bir istemci adı girin ve Gönder düğmesini kullanarak ileti içeriğini her iki istemci arasında iletme sınamasını yapın.
Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bilgi verin.
Kaynakları temizleme
Sonraki öğreticiye devam ederseniz, bu hızlı başlangıçta oluşturulan kaynakları tutabilir ve yeniden kullanabilirsiniz.
Hızlı Başlangıç örnek uygulamasıyla işiniz bittiğinde, ücretlerden kaçınmak için bu hızlı başlangıçta oluşturulan Azure kaynaklarını silebilirsiniz.
Önemli
Bir kaynak grubunu silme işlemi geri alınamaz ve bu gruptaki tüm kaynakları içerir. Yanlış kaynak grubunu veya kaynakları yanlışlıkla silmediğinizden emin olun. Bu örneği tutmak istediğiniz kaynakları içeren mevcut bir kaynak grubunda barındırmak için kaynakları oluşturduysanız, kaynak grubunu silmek yerine her kaynağı dikey penceresinden tek tek silebilirsiniz.
Azure portalda oturum açın ve Kaynak grupları’nı seçin.
Adlara göre filtrele metin kutusuna kaynak grubu adının yazın. Bu hızlı başlangıçtaki yönergelerde SignalRTestResources adlı bir kaynak grubu kullanılmıştır. Sonuç listesinde kaynak grubu üzerinde, Kaynak grubunu sil seçeneğinin yanındaki üç noktayı (...) > seçin.
Kaynak grubunun silinmesini onaylamanız istenir. Onaylamak için kaynak grubu adının girin ve Sil'i seçin.
Birkaç dakika sonra kaynak grubu ve bu gruptaki kaynakların tümü silinir.
Sorun mu var? Sorun giderme kılavuzunu deneyin veya bize haber ver.
Sonraki adımlar
Bu hızlı başlangıçta yeni bir kaynak Azure SignalR Hizmeti. Ardından bunu bir web ASP.NET Core kullanarak birden çok bağlı istemciye gerçek zamanlı içerik güncelleştirmeleri yayımladınız. Kimlik doğrulamasını kullanma hakkında daha Azure SignalR Hizmeti kimlik doğrulamasını gösteren öğreticiye devam edin.