Rychlý start: Vytvoření chatovací místnosti pomocí SignalR Service

Článek
11/24/2021
9 min ke čtení

Azure SignalR je služba Azure, která vývojářům pomáhá snadno vytvářet webové aplikace s funkcemi v reálném čase. Tato služba byla původně založená na signalr pro ASP.NET Core 2.1,ale teď podporuje novější verze.

V tomto článku se dozvíte, jak začít se službou Azure SignalR. V tomto rychlém startu vytvoříte chatovací aplikaci pomocí webové aplikace ASP.NET Core MVC. Tato aplikace naváže připojení k vašemu prostředku služby Azure SignalR a umožní tak aktualizace obsahu v reálném čase. Webovou aplikaci budete hostovat místně a budete se připojovat s více klienty prohlížeče. Každý klient bude moct nabízet aktualizace obsahu do všech ostatních klientů.

K dokončení kroků v tomto rychlém startu můžete použít jakýkoli editor kódu. Jednou z možností je Visual Studio Code, který je k dispozici na platformách Windows, macOS a Linux.

Kód pro tento kurz je k dispozici ke stažení v úložišti GitHub AzureSignalR-samples. Prostředky Azure použité v tomto rychlém startu můžete také vytvořit podle tématu Vytvoření SignalR Service startu.

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet před tím, než začnete.

Požadavky

Nainstalujte .NET Core SDK.
Stáhněte nebo naklonte úložiště AzureSignalR-sample GitHub úložiště.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Vytvořené prostředku služby Azure SignalR

Pokud chcete vytvořit prostředek služby signalizace Azure, nejdřív se přihlaste k Azure Portal. V levé horní části stránky vyberte + vytvořit prostředek. Do textového pole Hledat na Marketplace zadejte službu Signal.
Ve výsledcích vyberte službu signaler a vyberte vytvořit.

Na stránce Nová nastavení signálu přidejte následující nastavení pro nový prostředek signalizace:

Name	Doporučená hodnota	Description
Název prostředku	testsignalr	Zadejte jedinečný název prostředku, který se použije pro prostředek služby SignalR. Název musí být řetězec o 1 až 63 znaků a obsahovat jenom číslice, písmena a spojovníky ( `-` ). Název nesmí začínat ani končit znakem spojovníku a po sobě jdoucí znaky spojovníku nejsou platné.
Předplatné	Zvolte vaše předplatné.	Vyberte předplatné Azure, které chcete k otestování služby SignalR použít. Pokud má váš účet jenom jedno předplatné, vybere se automaticky a rozevírací seznam předplatné se nezobrazí.
Skupina prostředků	Vytvořte skupinu prostředků s názvem SignalRTestResources .	Vyberte nebo vytvořte skupinu prostředků pro prostředek služby SignalR. Tato skupina je užitečná k organizování více prostředků, které můžete chtít odstranit současně odstraněním skupiny prostředků. Další informace najdete v tématu použití skupin prostředků ke správě prostředků Azure.
Umístění	USA – východ	Pomocí Umístění určete zeměpisné umístění, ve kterém se prostředek služby SignalR bude hostovat. Pro zajištění nejlepšího výkonu doporučujeme vytvořit prostředek ve stejné oblasti jako ostatní komponenty vaší aplikace.
Cenová úroveň	Free	V současné době jsou dostupné bezplatné a standardní možnosti.
Připnout na řídicí panel	✔	Toto políčko zaškrtněte, pokud chcete prostředek připnout na řídicí panel, aby bylo snazší ho najít.

Vyberte Zkontrolovat a vytvořit. Počkejte na dokončení ověření.
Vyberte Vytvořit. Dokončení nasazení může trvat několik minut.
Až se nasazení dokončí, v části Nastavení vyberte klíče . Zkopírujte připojovací řetězec pro primární klíč. Pomocí tohoto řetězce později nakonfigurujete aplikaci tak, aby používala prostředek služby Azure Signal.

Připojovací řetězec bude mít následující formát:

Endpoint=<service_endpoint>;AccessKey=<access_key>;

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Vytvoření webové aplikace ASP.NET Core

V této části použijete rozhraní příkazového řádku .NET Core k vytvoření projektu webové aplikace ASP.NET Core MVC. Výhodou použití rozhraní .NET Core CLI před Visual Studio je, že je k dispozici napříč platformami Windows, macOS a Linux.

Vytvořte složku pro váš projekt. V tomto rychlém startu se používá složka E:\Testing\chattest.
Spuštěním následujícího příkazu v nové složce vytvořte projekt:
```
dotnet new mvc
```

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Přidání nástroje Secret Manager do projektu

V této části přidáte do projektu nástroj Secret Manager. Nástroj Secret Manager ukládá citlivá data pro vývoj mimo strom projektu. Tento přístup pomáhá zabránit náhodnému sdílení tajných kódů aplikace ve zdrojovém kódu.

Otevřete soubor .csproj. Přidejte element DotNetCliToolReference zahrnující Microsoft.Extensions.SecretManager.Tools. Přidejte UserSecretsId také element , jak je znázorněno v následujícím kódu pro chattest.csproj, a soubor uložte.

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

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Přidání služby Azure SignalR do webové aplikace

Přidejte odkaz na Microsoft.Azure.SignalR NuGet spuštěním následujícího příkazu:
```
dotnet add package Microsoft.Azure.SignalR
```
Spuštěním následujícího příkazu obnovte balíčky pro váš projekt:
```
dotnet restore
```
Do nástroje Secret Manager přidejte tajný kód Azure:SignalR:ConnectionString.

Tento tajný kód bude obsahovat připojovací řetězec pro přístup k vašemu prostředku služby SignalR. Azure:SignalR:ConnectionString je výchozí konfigurační klíč, který služba SignalR hledá pro navázání připojení. Nahraďte hodnotu v následujícím příkazu připojovacím řetězcem pro váš SignalR Service prostředků.

Tento příkaz je nutné spustit ve stejném adresáři jako soubor .csproj.
```
dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"
```
Secret Manager se použije jenom k testování webové aplikace, když je hostovaná místně. V pozdějším kurzu nasadíte chatovací webovou aplikaci do Azure. Po nasazení webové aplikace do Azure použijete nastavení aplikace místo toho, abyste připojovací řetězec ukládali pomocí nástroje Secret Manager.

K tomuto tajném klíči se přistupuje pomocí konfiguračního rozhraní API. Dvojtečka (:) funguje v názvu konfigurace s konfiguračním rozhraním API na všech podporovaných platformách. Viz Konfigurace podle prostředí.
Otevřete soubor Startup.cs a aktualizujte ConfigureServices metodu tak, aby Azure SignalR Service pomocí volání metod AddSignalR() a AddAzureSignalR() :
```
public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR()
            .AddAzureSignalR();
}
```
Tím, že do parametru předáte parametr , tento kód používá výchozí AddAzureSignalR() konfigurační klíč SignalR Service připojovací řetězec prostředku. Výchozí konfigurační klíč je Azure:SignalR:ConnectionString.

V souboru Startup.cs aktualizujte Configure metodu tak, že ji nahradíte následujícím kódem.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();
    app.UseFileServer();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chat");
    });
}

Přidání třídy centra

V SignalR je centrum základní komponentou, která zveřejňuje sadu metod, které lze volat z klienta. V této části nadefinujete třídu centra se dvěma metodami:

Broadcast: Tato metoda rozešle zprávu do všech klientů.
Echo: Tato metoda odešle zprávu zpět volajícímu.

Obě metody používají Clients rozhraní, které poskytuje ASP.NET Core SignalR SDK. Toto rozhraní poskytuje přístup ke všem připojeným klientům, takže můžete klientům nasazovat obsah.

Do adresáře vašeho projektu přidejte novou složku Hub. Do nové složky přidejte nový soubor kódu centra s názvem ChatHub.cs.

Do souboru ChatHub.cs přidejte následující kód, který definuje třídu centra a soubor uloží.

Pokud jste použili název projektu, který se liší od signalR.Mvc, aktualizujte obor názvů pro tuto třídu.

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

Přidání klientského rozhraní pro webovou aplikaci

Uživatelské rozhraní klienta pro tuto aplikaci chatovací místnosti se bude skládat z HTML a JavaScriptu v souboru s názvem index.html v adresáři wwwroot.

Zkopírujte soubor css/site.css ze složky wwwroot úložiště ukázek. Nahraďte soubor css/site.css projektu zkopírovaný souborem.

Tady je hlavní kód index.html:

Vytvořte nový soubor v adresáři wwwroot s názvem index.html, zkopírujte a vložte do nově vytvořeného souboru následující kód HTML:

<!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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
                    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>

Kód v index.html volání HubConnectionBuilder.build() pro připojení HTTP k prostředku Azure SignalR.

Pokud je připojení úspěšné, předá se do metody bindConnectionMessage, která přidá obslužné rutiny událostí pro příchozí nabídky obsahu do klienta.

HubConnection.start() naváže komunikaci s centrem. Pak přidá onConnected() obslužné rutiny událostí tlačítka. Tyto obslužné rutiny prostřednictvím připojení umožní tomuto klientovi nabízet aktualizace obsahu do všech připojených klientů.

Přidání profilu vývojového modulu runtime

V této části přidáte prostředí development runtime pro ASP.NET Core. Další informace najdete v tématu Práce s více prostředími v ASP.NET Core.

V projektu vytvořte složku Properties.

Přidejte do složky nový soubor launchSettings.json s následujícím obsahem a soubor uložte.

{
    "profiles" : {
        "ChatRoom": {
            "commandName": "Project",
            "launchBrowser": true,
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "applicationUrl": "http://localhost:5000/"
        }
    }
}

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Místní sestavení a spuštění aplikace

Pokud chcete aplikaci sestavit pomocí .NET Core CLI, spusťte v příkazovém prostředí následující příkaz:
```
dotnet build
```

Po úspěšném dokončení sestavení spusťte následující příkaz, který spustí webovou aplikaci místně:

dotnet run

Aplikace bude hostovaná místně na portu 5000, jak je nakonfigurované v našem profilu vývojového modulu runtime:

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

Otevřete dvě okna prohlížeče. V každém prohlížeči přejděte na http://localhost:5000 . Zobrazí se výzva k zadání vašeho jména. Zadejte název klienta pro oba klienty a otestujte odesílání obsahu zpráv mezi oběma klienty pomocí tlačítka Odeslat.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Vyčištění prostředků

Pokud budete pokračovat k dalšímu kurzu, můžete prostředky vytvořené v tomto rychlém startu zachovat a znovu je použít.

Pokud jste s ukázkovou aplikací pro rychlý start hotovi, můžete prostředky Azure vytvořené v tomto rychlém startu odstranit, abyste se vyhnuli poplatkům.

Důležité

Odstranění skupiny prostředků je nevratné a zahrnuje všechny prostředky v této skupině. Ujistěte se, že nechtěně neodstraníte nesprávnou skupinu prostředků nebo prostředky. Pokud jste vytvořili prostředky pro hostování této ukázky v existující skupině prostředků, která obsahuje prostředky, které chcete zachovat, můžete místo odstranění skupiny prostředků odstranit každý prostředek jednotlivě z jeho okna.

Přihlaste se k webu Azure Portal a potom vyberte Skupiny prostředků.

Do textového pole Filtrovat podle názvu zadejte název vaší skupiny prostředků. V pokynech v tomto rychlém startu se používala skupina prostředků SignalRTestResources. Ve skupině prostředků v seznamu výsledků vyberte tři tečky (...) > Odstranit skupinu prostředků.

Výběry pro odstranění skupiny prostředků

Zobrazí se výzva k potvrzení odstranění skupiny prostředků. Potvrďte to zadáním názvu vaší skupiny prostředků a vyberte Odstranit.

Po chvíli se skupina prostředků včetně všech prostředků, které obsahuje, odstraní.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Další kroky

V tomto rychlém startu jste vytvořili nový Azure SignalR Service prostředků. Pak jste ji použili s ASP.NET Core aplikací k nabízení aktualizací obsahu v reálném čase více připojeným klientům. Další informace o používání Azure SignalR Service najdete v kurzu, který ukazuje ověřování.

Ověřování pomocí služby Azure SignalR

Rychlý start: Vytvoření chatovací místnosti pomocí SignalR Service

Ohodnoťte vaše zkušenosti

Požadavky

Vytvořené prostředku služby Azure SignalR

Vytvoření webové aplikace ASP.NET Core

Přidání nástroje Secret Manager do projektu

Přidání služby Azure SignalR do webové aplikace

Přidání třídy centra

Přidání klientského rozhraní pro webovou aplikaci

Přidání profilu vývojového modulu runtime

Místní sestavení a spuštění aplikace

Vyčištění prostředků

Další kroky