Snabbstart: Skapa ett chattrum med hjälp av SignalR Service

Artikel
11/16/2023

Azure SignalR Service är en Azure-tjänst som hjälper utvecklare att enkelt skapa webbappar med realtidsfunktioner.

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-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 webbprogrammet lokalt och ansluta till 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å plattformarna Windows, macOS och Linux.

Koden för de här självstudierna är tillgänglig för nedladdning på GitHub-lagringsplatsen för AzureSignalR-exempel. Du kan 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-prenumeration kan du skapa ettkostnadsfritt konto innan du börjar.

Är du redo att börja?

Steg för steg-version

Prova chattdemo nu

Förutsättningar

Installera den senaste .NET Core SDK:en.
Ladda ned eller klona GitHub-lagringsplatsen för AzureSignalR-exempel.

Har du problem? Prova felsökningsguiden eller meddela oss.

Skapa en Azure SignalR-resurs

I det här avsnittet skapar du en grundläggande Azure SignalR-instans som ska användas för din app. Följande steg använder Azure-portalen för att skapa en ny instans, men du kan också använda Azure CLI. Mer information finns i kommandot az signalr create i Cli-referensen för Azure SignalR Service.

Logga in på Azure-portalen.
Välj + Skapa en resurs längst upp till vänster på sidan.
På sidan Skapa en resurs går du till textrutan tjänsten Search s och marketplace och anger signalr och väljer sedan SignalR Service i listan.
På sidan SignalR Service väljer du Skapa.
På fliken Grundläggande anger du viktig information för din nya SignalR Service-instans. Ange följande värden:

Fält	Föreslaget värde	beskrivning
Abonnemang	Välj din prenumeration	Välj den prenumeration som du vill använda för att skapa en ny SignalR Service-instans.
Resursgrupp	Skapa en resursgrupp med namnet SignalRTestResources	Välj eller skapa en resursgrupp för SignalR-resursen. Det är användbart att skapa en ny resursgrupp för den här självstudien i stället för att använda en befintlig resursgrupp. Om du vill frigöra resurser när du har slutfört självstudien tar du bort resursgruppen. Om du tar bort en resursgrupp tas även alla resurser som tillhör gruppen bort. Det går inte att ångra den här åtgärden. Innan du tar bort en resursgrupp kontrollerar du att den inte innehåller resurser som du vill behålla. Mer information finns i Using resource groups to manage your Azure resources (Hantera dina Azure-resurser med hjälp av resursgrupper).
Resursnamn	testsignalr	Ange ett unikt resursnamn för SignalR-resursen. Om testsignaler redan har tagits i din region lägger du till en siffra eller ett tecken tills namnet är unikt. Namnet måste vara en sträng på 1 till 63 tecken och innehålla endast siffror, bokstäver och bindestreck (`-`). Namnet kan inte starta eller sluta med bindestreckstecknet och efterföljande bindestreck är inte giltiga.
Region	Välj din region	Välj lämplig region för din nya SignalR Service-instans. Azure SignalR Service är för närvarande inte tillgängligt i alla regioner. Mer information finns i Tillgänglighet för Azure SignalR Service-regionen
Prisnivå	Välj Ändra och välj sedan Kostnadsfri (endast dev/test). Välj Välj för att bekräfta ditt val av prisnivå.	Azure SignalR Service har tre prisnivåer: Kostnadsfri, Standard och Premium. Självstudier använder den kostnadsfria nivån, om inget annat anges i förutsättningarna. Mer information om funktionsskillnader mellan nivåer och priser finns i Prissättning för Azure SignalR Service
Tjänstläge	Välj lämpligt tjänstläge	Använd Standard när du är värd för SignalR Hub-logiken i dina webbappar och använder SignalR-tjänsten som proxy. Använd Serverlös när du använder serverlösa tekniker som Azure Functions som värd för SignalR Hub-logiken. Klassiskt läge är endast för bakåtkompatibilitet och rekommenderas inte att använda. Mer information finns i Tjänstläge i Azure SignalR Service.

Du behöver inte ändra inställningarna på flikarna Nätverk och Taggar för SignalR-självstudierna.

Välj knappen Granska + skapa längst ned på fliken Grundläggande.
På fliken Granska + skapa granskar du värdena och väljer sedan Skapa. Det tar en stund innan distributionen har slutförts.
När distributionen är klar väljer du knappen Gå till resurs .
På sidan SignalR-resurs väljer du Nycklar på menyn till vänster under Inställningar.
Kopiera Anslut ionssträngen för primärnyckeln. Du behöver den här anslutningssträng för att konfigurera appen senare i den här självstudien.

Skapa en ASP.NET Core-webbapp

I det här avsnittet använder du kommandoradsgränssnittet .NET Core (CLI) för att skapa ett ASP.NET Core MVC-webbappsprojekt. Fördelen med att använda .NET Core CLI över Visual Studio är att det är tillgängligt på Plattformarna Windows, macOS och Linux.

Skapa en mapp för projektet. Den här snabbstarten använder mappen chattest .
I den nya mappen kör du följande kommando för att skapa projektet:
```
dotnet new web
```

Lägg till Secret Manager i projektet

I det här avsnittet lägger du till secret manager-verktyget i projektet. Secret Manager-verktyget lagrar känsliga data för utvecklingsarbete utanför projektträdet. Den här metoden hjälper till att förhindra oavsiktlig delning av apphemligheter i källkoden.

I mappen init genom att UserSecretsId köra följande kommando:
```
dotnet user-secrets init
```
Lä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:Anslut ionString är standardkonfigurationsnyckeln som SignalR söker efter för att upprätta en anslutning. Ersätt värdet i följande kommando med anslutningssträng för din SignalR Service-resurs.

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älvstudie 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äng med Secret Manager.

Den här hemligheten används med konfigurations-API:et. Ett kolon (:) fungerar i konfigurationsnamnet med konfigurations-API:et på alla plattformar som stöds. Se Konfiguration efter miljö.

Lägg till Azure SignalR till webbappen

Lägg till en referens till Microsoft.Azure.SignalR NuGet-paketet genom att köra följande kommando:
```
dotnet add package Microsoft.Azure.SignalR
```
Öppna Program.cs och uppdatera koden till följande. Den anropar AddSignalR() metoderna och AddAzureSignalR() för att använda Azure SignalR Service:
```
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();
```
Att inte skicka en parameter till innebär att AddAzureSignalR() den använder standardkonfigurationsnyckeln för SignalR Service-resursen anslutningssträng. Standardkonfigurationsnyckeln är Azure:SignalR:Anslut ionString. Den använder ChatSampleHub också det som vi ska skapa i avsnittet nedan.

Lägg till en hubbklass

I SignalR är en hubb en kärnkomponent som exponerar en uppsättning metoder som kan anropas av klienten. I det här avsnittet får du lära dig att definiera en hubbklass med en av två metoder:

BroadcastMessage: 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 ChatSampleHub.cs i den nya mappen.

Lägg till följande kod i ChatSampleHub.cs för att definiera hubbklassen och spara filen.

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

Lägg till klientgränssnittet för webbappen

Klientanvändargränssnittet för den här chattrumsappen består av HTML och JavaScript i en fil med namnet index.html i katalogen wwwroot .

Kopiera filen css/site.css från mappen wwwroot på exempellagringsplatsen. Ersätt projektets css /site.css med det du kopierade.

Skapa en ny fil i katalogen wwwroot med namnet index.html, kopiera och klistra in följande HTML i den nyligen skapade filen.

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

Koden i index.html anropar HubConnectionBuilder.build() för att göra 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. onConnected() Lägger sedan till knapphändelsehanterarna. Dessa hanterare använder anslutningen för att klientens ska kunna skicka innehållsuppdateringar till alla anslutna klienter.

Skapa och köra appen lokalt

Kör följande kommando för att köra webbappen lokalt:

dotnet run

Appen kommer att finnas lokalt med utdata som innehåller localhost-URL:en, till exempel som följande:

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

Öppna två webbläsarfönster. I varje webbläsare går du till den localhost-URL som visas i utdatafönstret, http://localhost:5000/ till exempel som utdatafönstret ovan visar. 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 .

Rensa resurser

Om du fortsätter till nästa självstudie kan du behålla de resurser som skapats i den här snabbstarten och återanvända dem.

Om du är klar med snabbstartsexempelprogrammet kan du ta bort De Azure-resurser som skapades i den här snabbstarten för att undvika avgifter.

Viktigt!

Det går inte att ångra borttagningen av en resursgrupp och innehåller alla resurser i gruppen. Var noga så att du inte tar bort fel resursgrupp eller resurser av misstag. Om du har skapat resurserna i det här exemplet i en befintlig resursgrupp som innehåller resurser som du vill behålla kan du ta bort varje resurs individuellt från bladet 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å resursgruppen. 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.

Selections for deleting a resource group

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 meddela oss.

Nästa steg

I den här snabbstarten skapade du en ny 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 hur du använder Azure SignalR Service fortsätter du till självstudiekursen som visar autentisering.

Azure SignalR Service-autentisering

Dela via