Snabbstart: Skapa ett chattrum med hjälp av SignalR Service
Azure SignalR Service är en Azure-tjänst som hjälper utvecklare att enkelt skapa webbappar med realtidsfunktioner. Den här tjänsten baserades ursprungligen på SignalR för ASP.NET Core 2.1, men har nu stöd för senare versioner.
Den här artikeln visar hur du kommer igång med Azure SignalR Service. I den här snabbstarten skapar du ett chattprogram med hjälp av en ASP.NET Core MVC-webbapp. Den här appen skapar en anslutning till din Azure SignalR Service-resurs för att aktivera uppdateringar av innehåll i realtid. Du kommer att vara värd för webbappen lokalt och ansluta med flera webbläsarklienter. Varje klient kommer att kunna skicka innehållsuppdateringar till alla andra klienter.
Du kan använda valfritt kodredigeringsprogram för att slutföra stegen i den här snabbstarten. Ett alternativ är Visual Studio Code, som är tillgängligt på Windows-, macOS- och Linux-plattformar.
Koden för de här självstudierna är tillgänglig för nedladdning på GitHub-lagringsplatsen AzureSignalR-samples. Du kan också skapa De Azure-resurser som används i den här snabbstarten genom att följa Skapa ett SignalR Service skript.
Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.
Förutsättningar
- Installera .NET Core SDK.
- Ladda ned eller klona GitHub-lagringsplatsen AzureSignalR-sample.
Har du problem? Prova felsökningsguiden eller berätta för oss.
Skapa en Azure SignalR-resurs
Om du vill skapa en Azure SignalR service-resurs måste du först logga in på Azure Portal. I den övre vänstra sidan av sidan väljer du + skapa en resurs. I text rutan Sök på Marketplace anger du SignalR-tjänsten.
Välj signal tjänst i resultaten och välj skapa.
På sidan nya signal inställningar lägger du till följande inställningar för din nya signalerar-resurs:
Name Rekommenderat värde Beskrivning Resursnamn testsignalr Ange ett unikt resursnamn för SignalR-resursen. Namnet måste vara en sträng med 1 till 63 tecken och får bara innehålla siffror, bokstäver och bindestreck ( -). Namnet får inte börja eller sluta med bindestrecket, och de efterföljande bindestrecken är inte giltiga.Prenumeration Välj din prenumeration Välj den Azure-prenumeration du vill använda när du testar SignalR. Om ditt konto bara har en prenumeration väljs den automatiskt och list rutan prenumeration visas inte. Resursgrupp Skapa en resurs grupp med namnet SignalRTestResources Välj eller skapa en resursgrupp för SignalR-resursen. Den här gruppen är användbar för att organisera flera resurser som du kanske vill ta bort samtidigt genom att ta bort resurs gruppen. Mer information finns i Using resource groups to manage your Azure resources (Hantera dina Azure-resurser med hjälp av resursgrupper). Location USA, östra Använd Plats till att ange den geografiska plats där SignalR-resursen finns. Du får bästa prestanda om du skapar resursen i samma region som de andra komponenterna i appen. Prisnivå Kostnadsfri För närvarande finns det kostnads fria och standard alternativ. Fäst vid instrumentpanelen ✔ Markera den här rutan om du vill att resursen ska fästa på instrument panelen så att den blir lättare att hitta. Välj Granska + skapa. Vänta tills verifieringen har slutförts.
Välj Skapa. Det kan ta några minuter att slutföra distributionen.
När distributionen är klar väljer du nycklar under Inställningar. Kopiera anslutnings strängen för den primära nyckeln. Du kommer att använda den här strängen senare för att konfigurera din app att använda Azure SignalR service-resursen.
Den här anslutningssträngen har följande format:
Endpoint=<service_endpoint>;AccessKey=<access_key>;
Har du problem? Prova felsökningsguiden eller berätta för oss.
Skapa en ASP.NET Core-webbapp
I det här avsnittet använder du .NET Core-kommandoradsgränssnittet (CLI) för att skapa ett ASP.NET Core MVC-webbappsprojekt. Fördelen med att använda .NET Core CLI jämfört Visual Studio är att den är tillgänglig på Windows-, macOS- och Linux-plattformarna.
Skapa en mapp för projektet. I den här snabbstarten används mappen E:\Testing\chattest.
Kör följande kommando i den nya mappen för att skapa projektet:
dotnet new mvc
Har du problem? Prova felsökningsguiden eller berätta för oss.
Lägg till Secret Manager i projektet
I det här avsnittet lägger du till verktyget Secret Manager i projektet. Secret Manager-verktyget lagrar känsliga data för utvecklingsarbete utanför projektträdet. Den här metoden förhindrar oavsiktlig delning av apphemligheter i källkoden.
Öppna .csproj-filen. Lägg till ett
DotNetCliToolReference-element att inkludera Microsoft.Extensions.SecretManager.Tools. Lägg även tillUserSecretsIdett -element enligt följande kod för chattest.csproj och spara filen.<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>
Har du problem? Prova felsökningsguiden eller berätta för oss.
Lägg till Azure SignalR till webbappen
Lägg till en referens till
Microsoft.Azure.SignalRNuGet-paketet genom att köra följande kommando:dotnet add package Microsoft.Azure.SignalRKör följande kommando för att återställa paket för projektet:
dotnet restoreLägg till en hemlighet med namnet Azure: SignalR:ConnectionString till Secret Manager.
Den här hemligheten innehåller anslutningssträngen för åtkomst till din SignalR Service-resurs. Azure:SignalR:ConnectionString är standardkonfigurationsnyckeln som SignalR letar efter för att upprätta en anslutning. Ersätt värdet i följande kommando med anslutningssträngen för din SignalR Service resursen.
Du måste köra det här kommandot i samma katalog som .csproj-filen.
dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"Secret Manager används endast för att testa webbappen när den finns lokalt. I en senare självstudiekurs distribuerar du chattwebbappen till Azure. När webbappen har distribuerats till Azure använder du en programinställning i stället för att lagra anslutningssträngen med Secret Manager.
Den här hemligheten nås med konfigurations-API:et. Ett kolon (:) fungerar i konfigurationsnamnet med konfigurations-API:et på alla plattformar som stöds. Se Konfiguration efter miljö.
Öppna Startup.cs och uppdatera metoden
ConfigureServicesså att den använder Azure SignalR Service anropa metoderna ochAddSignalR()AddAzureSignalR():public void ConfigureServices(IServiceCollection services) { services.AddSignalR() .AddAzureSignalR(); }Genom att inte skicka en parameter
AddAzureSignalR()till använder den här koden standardkonfigurationsnyckeln för SignalR Service-resursanslutningssträngen. Standardkonfigurationsnyckeln är Azure:SignalR:ConnectionString.I Startup.cs uppdaterar du
Configuremetoden genom att ersätta den med följande kod.public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseRouting(); app.UseFileServer(); app.UseEndpoints(endpoints => { endpoints.MapHub<ChatHub>("/chat"); }); }
Lägg till en hubbklass
I SignalR är en hubb en kärnkomponent som exponerar en uppsättning metoder som kan anropas från klienten. I det här avsnittet får du lära dig att definiera en hubbklass med en av två metoder:
Broadcast: Den här metoden sänder ett meddelande till alla klienter.Echo: Den här metoden skickar ett meddelande tillbaka till anroparen.
Båda metoderna använder det Clients gränssnitt som ASP.NET Core SignalR SDK tillhandahåller. Det här gränssnittet ger dig åtkomst till alla anslutna klienter, så att du kan skicka innehåll till dina klienter.
Lägg till en ny mapp med namnet Hubb i projektkatalogen. Lägg till en ny hubbkodfil med namnet ChatHub.cs i den nya mappen.
Lägg till följande kod i ChatHub.cs för att definiera hubbklassen och spara filen.
Uppdatera namnområdet för den här klassen om du använde ett projektnamn som skiljer sig från SignalR.Mvc.
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)"); } }
Lägga till klientgränssnittet för webbappen
Klientens användargränssnitt för den här chattrumsappen består av HTML och JavaScript i en filindex.html i katalogen wwwroot.
Kopiera filen css/site.css från mappen wwwroot på lagringsplatsen för exemplen. Ersätt projektets css/site.css med det som du kopierade.
Här är huvudkoden för index.html:
Skapa en ny fil i katalogen wwwroot med namnetindex.html, kopiera och klistra in följande HTML i den nya filen:
<!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>
Koden i index.html för HubConnectionBuilder.build() att upprätta en HTTP-anslutning till Azure SignalR-resursen.
Om anslutningen lyckas skickas anslutningen till bindConnectionMessage som lägger till händelsehanterare för inkommande innehåll som skickas till klienten.
HubConnection.start() startar kommunikationen med hubben. Lägger sedan onConnected() till knapphändelsehanterare. Dessa hanterare använder anslutningen för att klientens ska kunna skicka innehållsuppdateringar till alla anslutna klienter.
Lägg till en körningsprofil för utveckling
I det här avsnittet lägger du till en körningsmiljö för utveckling för ASP.NET Core. Mer information finns i Arbeta med flera miljöer i ASP.NET Core.
Skapa en mapp med namnet Egenskaper i projektet.
Lägg till en ny fil med namnet launchSettings.json i mappen med följande innehåll och spara filen.
{ "profiles" : { "ChatRoom": { "commandName": "Project", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, "applicationUrl": "http://localhost:5000/" } } }
Har du problem? Prova felsökningsguiden eller berätta för oss.
Skapa och köra appen lokalt
Skapa appen med hjälp av .NET Core CLI kör du följande kommando i kommandogränssnittet:
dotnet buildNär bygget är klart kör du följande kommando för att köra webbappen lokalt:
dotnet runAppen kommer att finnas lokalt på port 5000, enligt konfiguration i vår utvecklingskörningsprofil:
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Öppna två webbläsarfönster. I varje webbläsare går du till
http://localhost:5000. Du uppmanas att ange ditt namn. Ange ett klientnamn för båda klienterna och testa att skicka meddelandeinnehåll mellan båda klienterna med hjälp av knappen Skicka.
Har du problem? Prova felsökningsguiden eller berätta för oss.
Rensa resurser
Om du fortsätter till nästa självstudie kan du behålla resurserna som skapats i den här snabbstarten och återanvända dem.
Om du är klar med exempelprogrammet för snabbstart kan du ta bort De Azure-resurser som skapades i den här snabbstarten för att undvika kostnader.
Viktigt
Det går inte att ångra borttagningen av en resursgrupp och alla resurser i gruppen tas med. Var noga så att du inte tar bort fel resursgrupp eller resurser av misstag. Om du har skapat resurserna som ska vara värdar för det här exemplet i en befintlig resursgrupp som innehåller resurser som du vill behålla, kan du ta bort varje resurs separat från dess blad i stället för att ta bort resursgruppen.
Logga in på Azure Portal och välj Resursgrupper.
I textrutan Filtrera efter namn skriver du namnet på din resursgrupp. Anvisningarna för den här snabbstarten använde en resursgrupp med namnet SignalRTestResources. I resursgruppen i resultatlistan väljer du ellipsen (...) > Ta bort resursgrupp.
Du blir ombedd att bekräfta borttagningen av resursgruppen. Ange namnet på resursgruppen för att bekräfta och välj Ta bort.
Efter en liten stund tas resursgruppen och de resurser som finns i den bort.
Har du problem? Prova felsökningsguiden eller berätta för oss.
Nästa steg
I den här snabbstarten skapade du en Azure SignalR Service resurs. Sedan använde du den med en ASP.NET Core-webbapp för att skicka innehållsuppdateringar i realtid till flera anslutna klienter. Om du vill veta mer om Azure SignalR Service kan du fortsätta till självstudien som visar autentisering.