Quickstart: Een chatruimte maken met behulp van SignalR Service

Artikel
11/16/2023

De Azure SignalR-service is een Azure-service waarmee ontwikkelaars eenvoudig webtoepassingen met realtime-functies kunnen bouwen.

In dit artikel leest u hoe u aan de slag gaat met de Azure SignalR-service. In deze quickstart maakt u een chattoepassing met behulp van een ASP.NET Core-web-app. Deze app maakt verbinding met de resource van de Azure SignalR-service om inhoud in realtime bij te werken. U gaat de webtoepassing lokaal hosten en verbinding maken met verschillende browserclients. Elke client kan bijgewerkte inhoud pushen naar alle andere clients.

U kunt elke code-editor gebruiken om de stappen in deze snelstart uit te voeren. Eén optie is Visual Studio Code, dat beschikbaar is op de Windows-, macOS- en Linux-platforms.

De code voor deze zelfstudie is beschikbaar als download in de GitHub-opslagplaats met AzureSignalR-voorbeelden. U kunt de Azure-resources maken die in deze quickstart worden gebruikt door een SignalR Service-script maken te volgen.

Als u geen Azure-abonnement hebt, maakt u een gratis account voordat u begint.

Klaar om aan de slag te gaan?

Stapsgewijze build

Chatdemo nu proberen

Vereisten

Installeer de nieuwste .NET Core SDK.
Download of kloon de AzureSignalR-voorbeelden uit de GitHub-opslagplaats.

Ondervindt u problemen? Probeer de gids voor probleemoplossing of laat het ons weten.

Een Azure SignalR-resource maken

In deze sectie maakt u een azure SignalR-basisexemplaren die u voor uw app kunt gebruiken. In de volgende stappen wordt Azure Portal gebruikt om een nieuw exemplaar te maken, maar u kunt ook de Azure CLI gebruiken. Zie de opdracht az signalr create in de Naslaginformatie over azure SignalR Service CLI voor meer informatie.

Meld u aan bij de Azure-portal.
Selecteer in de linkerbovenhoek van de pagina + Een resource maken.
Voer op de pagina Een resource maken in het tekstvak Search-service s en Marketplace signalr in en selecteer vervolgens SignalR Service in de lijst.
Selecteer Maken op de pagina SignalR Service.
Voer op het tabblad Basisinformatie de essentiële informatie in voor uw nieuwe SignalR Service-exemplaar. Voer de volgende waarden in:

Veld	Voorgestelde waarde	Beschrijving
Abonnement	Kies uw abonnement	Selecteer het abonnement dat u wilt gebruiken om een nieuw SignalR Service-exemplaar te maken.
Resourcegroep	Maak een resourcegroep met de naam SignalRTestResources	Selecteer of maak een resourcegroep voor uw SignalR-resource. Het is handig om een nieuwe resourcegroep te maken voor deze zelfstudie in plaats van een bestaande resourcegroep te gebruiken. Als u resources wilt vrijmaken nadat u de zelfstudie hebt voltooid, verwijdert u de resourcegroep. Als u een resourcegroep verwijdert, worden ook alle resources verwijderd die deel uitmaken van de groep. Deze actie kan niet ongedaan worden gemaakt. Voordat u een resourcegroep verwijdert, moet u ervoor zorgen dat deze geen resources bevat die u wilt behouden. Zie Resourcegroepen gebruiken om Azure-resources te beheren voor meer informatie.
Resourcenaam	testsignalr	Voer een unieke resourcenaam in voor de SignalR-resource. Als testsignalr al in uw regio wordt gebruikt, voegt u een cijfer of teken toe totdat de naam uniek is. De naam moet een tekenreeks zijn van 1 tot 63 tekens die alleen cijfers, letters en het koppelteken (`-`) mag bevatten. De naam kan niet beginnen of eindigen met het afbreekstreepje en opeenvolgende afbreekstreepjes zijn niet geldig.
Regio	Uw regio kiezen	Selecteer de juiste regio voor uw nieuwe SignalR Service-exemplaar. Azure SignalR Service is momenteel niet beschikbaar in alle regio's. Zie beschikbaarheid van azure SignalR-serviceregio's voor meer informatie
Prijscategorie	Selecteer Wijzigen en kies vervolgens Gratis (alleen dev/test). Kies Selecteren om uw keuze in de prijscategorie te bevestigen.	Azure SignalR Service heeft drie prijscategorieën: Gratis, Standard en Premium. Zelfstudies gebruiken de gratis laag, tenzij anders vermeld in de vereisten. Zie prijzen voor Azure SignalR Service voor meer informatie over de verschillen in functionaliteit tussen lagen en prijzen
Servicemodus	De juiste servicemodus kiezen	Gebruik standaard wanneer u de Logica van de SignalR-hub in uw web-apps host en SignalR-service als proxy gebruikt. Gebruik serverloos wanneer u serverloze technologieën zoals Azure Functions gebruikt om de SignalR-hublogica te hosten. Klassieke modus is alleen bedoeld voor compatibiliteit met eerdere versies en wordt niet aanbevolen om te gebruiken. Zie de servicemodus in Azure SignalR Service voor meer informatie.

U hoeft de instellingen niet te wijzigen op de tabbladen Netwerken en tags voor de SignalR-zelfstudies.

Selecteer de knop Beoordelen en maken onder aan het tabblad Basisbeginselen .
Controleer op het tabblad Beoordelen en maken de waarden en selecteer Vervolgens Maken. Het duurt even voordat de implementatie is voltooid.
Wanneer de implementatie is voltooid, selecteert u de knop Ga naar resource .
Selecteer op de pagina SignalR-resource sleutels in het menu aan de linkerkant, onder Instellingen.
Kopieer de Verbinding maken iontekenreeks voor de primaire sleutel. U hebt deze verbindingsreeks nodig om uw app verderop in deze zelfstudie te configureren.

Een ASP.NET Core-web-app maken

In dit gedeelte gebruikt u de opdrachtregelinterface (CLI) van .NET Core om een web-app-project van ASP.NET Core MVC te maken. Het voordeel van de CLI van .NET Core ten opzichte van Visual Studio is dat de interface beschikbaar is voor Windows, macOS en Linux.

Maak een map voor uw project. In deze quickstart wordt de map chattest gebruikt.
Voer in de nieuwe map de volgende opdracht uit om het project te maken:
```
dotnet new web
```

Secret Manager toevoegen aan het project

In dit gedeelte voegt u het hulpprogramma Secret Manager toe aan uw project. Dit hulpprogramma slaat gevoelige gegevens voor ontwikkeltaken op buiten de projectstructuur. Deze aanpak voorkomt dat er per ongeluk appgeheimen worden gedeeld in de broncode.

Voer in de map init UserSecretsId de volgende opdracht uit:
```
dotnet user-secrets init
```
Voeg een geheim met de naam Azure:SignalR:ConnectionString toe aan Secret Manager.

Dit geheim bevat straks de verbindingsreeks voor toegang tot de resource van de SignalR-service. Azure:SignalR:ConnectionString is de standaardconfiguratiesleutel waarnaar SignalR zoekt om een verbinding tot stand te brengen. Vervang de waarde in de volgende opdracht door de verbindingsreeks voor de resource van de SignalR-service.

U moet deze opdracht uitvoeren in dezelfde map als het csproj bestand.
```
dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"
```
Secret Manager wordt alleen gebruikt om de web-app te testen terwijl deze lokaal wordt gehost. In een latere zelfstudie gaat u de web-app voor de chatruimte implementeren in Azure. Nadat de web-app is geïmplementeerd, gebruikt u een toepassingsinstelling in plaats van de verbindingsreeks op te slaan met Secret Manager.

Dit geheim is toegankelijk met de Configuratie-API. Een dubbele punt (:) werkt in de configuratienaam met de configuratie-API op alle ondersteunde platforms. Zie Configuratie per omgeving.

Azure SignalR toevoegen aan de web-app

Voeg een verwijzing toe naar het NuGet-pakket Microsoft.Azure.SignalR door de volgende opdracht uit te voeren:
```
dotnet add package Microsoft.Azure.SignalR
```
Open Program.cs en werk de code bij naar het volgende, het roept de AddSignalR() en AddAzureSignalR() methoden aan om Azure SignalR Service te gebruiken:
```
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR().AddAzureSignalR();
var app = builder.Build();

app.UseDefaultFiles();
app.UseRouting();
app.UseStaticFiles();
app.MapHub<ChatSampleHub>("/chat");
app.Run();
```
Het doorgeven van een parameter betekent AddAzureSignalR() dat deze gebruikmaakt van de standaardconfiguratiesleutel voor de SignalR Service-resource verbindingsreeks. De standaardconfiguratiesleutel is Azure:SignalR:ConnectionString. Het maakt ook gebruik ChatSampleHub van wat we maken in de onderstaande sectie.

Een hub-klasse toevoegen

In SignalR is een hub een kernonderdeel dat een set methoden beschikbaar maakt die door de client kunnen worden aangeroepen. In dit gedeelte gaat u een hub-klasse met twee methoden definiëren:

BroadcastMessage: met deze methode verstuurt u een bericht naar alle clients.
Echo: met deze methode stuurt u een bericht terug naar de aanroepende functie.

Beide methoden maken gebruik van de Clients-interface die wordt geboden door de SignalR-SDK van ASP.NET Core. Via deze interface hebt u toegang tot alle verbonden clients, zodat u inhoud naar uw clients kunt pushen.

Voeg in de projectmap een nieuwe map toe met de naam Hub. Voeg een nieuw hubcodebestand met de naam ChatSampleHub.cs toe aan de nieuwe map.

Voeg de volgende code toe aan ChatSampleHub.cs om uw hubklasse te definiëren en het bestand op te slaan.

using Microsoft.AspNetCore.SignalR;

public class ChatSampleHub : 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)");
}

De clientinterface voor de web-app toevoegen

De clientgebruikersinterface voor deze chatruimte-app bestaat uit HTML en JavaScript in een bestand met de naam index.html in de map wwwroot.

Kopieer het bestand css/site.css uit de map wwwroot van de sample-opslagplaats. Vervang de css/site.css van het project door de versie die u hebt gekopieerd.

Maak een nieuw bestand in de wwwroot-map met de naam index.html, kopieer en plak de volgende HTML in het zojuist gemaakte bestand.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <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://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>

  <!--Add script to update the page and send messages.-->
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      function getUserName() {
        function generateRandomName() {
          return Math.random().toString(36).substring(2, 10);
        }

        // Get the user name and store it to prepend to messages.
        var username = generateRandomName();
        var 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)
        return username;
      }

      username = getUserName();
      // Set initial focus to message input box.
      var 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 appendMessage(encodedName, encodedMsg) {
        var messageEntry = createMessageEntry(encodedName, encodedMsg);
        var messageBox = document.getElementById("messages");
        messageBox.appendChild(messageEntry);
        messageBox.scrollTop = messageBox.scrollHeight;
      }

      function bindConnectionMessage(connection) {
        var messageCallback = function (name, message) {
          if (!message) return;
          // Html encode display name and message.
          var encodedName = name;
          var encodedMsg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
          appendMessage(encodedName, encodedMsg);
        };
        // Create a function that the hub can call to broadcast messages.
        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) {
          // Call the broadcastMessage method on the hub.
          if (messageInput.value) {
            connection.send("broadcastMessage", username, messageInput.value)
              .catch((e) => appendMessage("_BROADCAST_", e.message));
          }

          // Clear text box and reset focus for next comment.
          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) {
          // Call the echo method on the hub.
          connection.send("echo", username, messageInput.value);

          // Clear text box and reset focus for next comment.
          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;";
      }

      var connection = new signalR.HubConnectionBuilder()
        .withUrl("/chat")
        .build();
      bindConnectionMessage(connection);
      connection.start()
        .then(function () {
          onConnected(connection);
        })
        .catch(function (error) {
          console.error(error.message);
        });
    });
  </script>
</body>
</html>

Met de code in index.html wordt HubConnectionBuilder.build() aangeroepen om een HTTP-verbinding tot stand te brengen met de Azure SignalR-resource.

Als de verbinding tot stand is gebracht, wordt de verbinding doorgegeven aan bindConnectionMessage. Deze functie voegt gebeurtenis-handlers toe om binnenkomende inhoud naar de client te pushen.

HubConnection.start() start de communicatie met de hub. Vervolgens worden met onConnected() de knopgebeurtenis-handlers toegevoegd. Deze handlers gebruiken de verbinding om deze client in staat te stellen updates van inhoud naar alle verbonden clients te pushen.

De app lokaal bouwen en uitvoeren

Voer de volgende opdracht uit om de web-app lokaal uit te voeren:

dotnet run

De app wordt lokaal gehost met uitvoer die de localhost-URL bevat, bijvoorbeeld als het volgende:

Building...
info: Microsoft.Hosting.Lifetime[14]
      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

Open twee browservensters. Ga in elke browser naar de localhost-URL die wordt weergegeven in het uitvoervenster, bijvoorbeeld zoals http://localhost:5000/ in het bovenstaande uitvoervenster wordt weergegeven. U wordt gevraagd uw naam in te voeren. Voer een clientnaam in voor beide clients en test het pushen van berichtinhoud tussen beide clients met behulp van de knop Send.

Resources opschonen

Als u van plan bent verder te gaan met de volgende zelfstudie, kunt u de resources die in deze snelstart zijn gemaakt behouden en opnieuw gebruiken.

Als u klaar bent met de voorbeeldtoepassing uit de quickstart, kunt u de Azure-resources verwijderen die in deze quickstart zijn gemaakt, om kosten te voorkomen.

Belangrijk

Het verwijderen van een resourcegroep is onomkeerbaar, en omvat alle resources in die groep. Zorg ervoor dat u niet per ongeluk de verkeerde resourcegroep of resources verwijdert. Als u de resources in dit voorbeeld hebt gemaakt in een bestaande resourcegroep die resources bevat die u wilt behouden, kunt u elke resource afzonderlijk van de blade verwijderen in plaats van de resourcegroep te verwijderen.

Meld u aan bij de Azure-portal en selecteer Resourcegroepen.

Typ de naam van de resourcegroep in het tekstvak Filteren op naam. In de instructies voor deze snelstart is een resourcegroep met de naam SignalRTestResources gebruikt. Selecteer in de resourcegroep in de resultatenlijst het beletselteken (...) >Resourcegroep verwijderen.

Selections for deleting a resource group

U wordt gevraagd om het verwijderen van de resourcegroep te bevestigen. Voer de naam van de resourcegroep in ter bevestiging en selecteer Verwijderen.

Na enkele ogenblikken worden de resourcegroep en alle bijbehorende resources verwijderd.