Rövid útmutató: Csevegőszoba létrehozása a SignalR szolgáltatással

Cikk
11/16/2023

Az Azure SignalR szolgáltatás egy olyan Azure-szolgáltatás, amely segítségével a fejlesztők könnyen hozhatnak létre webalkalmazásokat valós idejű funkciókkal.

Ez a cikk segítséget nyújt az első lépések megtételében az Azure SignalR szolgáltatás használatakor. Ebben a rövid útmutatóban egy csevegőalkalmazást fog létrehozni egy ASP.NET Core-webalkalmazás használatával. Az alkalmazás kapcsolatot létesít az Azure SignalR szolgáltatási erőforrással a valós idejű tartalomfrissítések engedélyezéséhez. A webalkalmazást helyileg fogja üzemeltetni, és több böngészőügyféllel fog csatlakozni. Minden ügyfél képes lesz tartalomfrissítéseket küldeni a többi ügyfélnek.

A rövid útmutató lépései bármilyen szövegszerkesztővel elvégezhetők. Az egyik lehetőség a Visual Studio Code, amely Windows, macOS és Linux platformokon érhető el.

Az oktatóanyag kódja letölthető az AzureSignalR-minták GitHub-adattárjából. Az ebben a rövid útmutatóban használt Azure-erőforrásokat a SignalR-szolgáltatás szkriptjének létrehozásával hozhatja létre.

Ha nem rendelkezik Azure-előfizetéssel, első lépésként mindössze néhány perc alatt létrehozhat egy ingyenes fiókot.

Ismerje meg.

Lépésről lépésre történő buildelés

Csevegési bemutató kipróbálás most

Előfeltételek

Telepítse a legújabb .NET Core SDK-t.
Töltse le vagy klónozza az AzureSignalR-minta GitHub-adattárat.

Problémákat tapasztal? Próbálja ki a hibaelhárítási útmutatót , vagy tudassa velünk.

Azure SignalR-erőforrás létrehozása

Ebben a szakaszban egy alapszintű Azure SignalR-példányt hoz létre az alkalmazáshoz. Az alábbi lépések az Azure Portal használatával hoznak létre új példányt, de használhatja az Azure CLI-t is. További információ: az signalr create command in the Azure SignalR Service CLI Reference.

Jelentkezzen be az Azure Portalra.
A lap bal felső részén válassza az + Erőforrás létrehozása lehetőséget.
Az Erőforrás létrehozása lap Search szolgáltatás és piactér szövegmezőjében adja meg a signalr kifejezést, majd válassza ki a SignalR szolgáltatást a listából.
A SignalR szolgáltatás oldalán válassza a Létrehozás lehetőséget.
Az Alapok lapon adja meg az új SignalR-szolgáltatáspéldány alapvető adatait. Írja be a következő értékeket:

Mező	Ajánlott érték	Leírás
Subscription	Válassza ki az előfizetését	Válassza ki azt az előfizetést, amelyet egy új SignalR-szolgáltatáspéldány létrehozásához szeretne használni.
Erőforráscsoport	SignalRTestResources nevű erőforráscsoport létrehozása	Válasszon ki vagy hozzon létre egy erőforráscsoportot a SignalR-erőforráshoz. Hasznos, ha egy új erőforráscsoportot hoz létre ehhez az oktatóanyaghoz ahelyett, hogy meglévő erőforráscsoportot használ. Ha az oktatóanyag elvégzése után szeretné felszabadítani az erőforrásokat, törölje az erőforráscsoportot. Az erőforráscsoport törlése a csoporthoz tartozó összes erőforrást is törli. This action can't be undone. Mielőtt töröl egy erőforráscsoportot, győződjön meg arról, hogy nem tartalmazza a megtartani kívánt erőforrásokat. További információk: Erőforráscsoportok használata az Azure-erőforrások kezeléséhez.
Erőforrás neve	testsignalr	Írja be a SignalR-erőforráshoz használandó egyedi erőforrásnevet. Ha a testsignalr már szerepel a régióban, adjon hozzá egy számjegyet vagy karaktert, amíg a név egyedi nem lesz. A névnek 1–63 karakter hosszúságú sztringnek kell lennie, és csak számokat, betűket és kötőjelet (`-`) tartalmazhat. A név nem kezdődhet és nem végződhet kötőjeljellel, és az egymást követő kötőjelkarakterek érvénytelenek.
Region	Régió kiválasztása	Válassza ki az új SignalR-szolgáltatáspéldány megfelelő régióját. Az Azure SignalR szolgáltatás jelenleg nem érhető el minden régióban. További információ: Azure SignalR Service-régió rendelkezésre állása
Tarifacsomag	Válassza a Módosítás lehetőséget, majd válassza az Ingyenes (Csak dev/Test) lehetőséget. Válassza a Kiválasztás lehetőséget a tarifacsomag kiválasztásának megerősítéséhez.	Az Azure SignalR szolgáltatás három tarifacsomagot tartalmaz: ingyenes, standard és prémium. Az oktatóanyagok az ingyenes szintet használják, hacsak az előfeltételek másként nem rendelkeznek. A szintek és a díjszabás közötti funkcióbeli különbségekről további információt az Azure SignalR Service díjszabásában talál .
Szolgáltatás mód	Válassza ki a megfelelő szolgáltatási módot	Az Alapértelmezett beállítást akkor használja, ha a SignalR hub logikáját üzemelteti a webalkalmazásokban, és proxyként használja a SignalR szolgáltatást. Kiszolgáló nélküli technológiát, például az Azure Functionst használva üzemeltetheti a SignalR hub logikáját. A klasszikus mód csak a visszamenőleges kompatibilitást szolgálja, ezért nem ajánlott használni. További információ: Szolgáltatás mód az Azure SignalR Service-ben.

A SignalR-oktatóanyagok Hálózatkezelés és Címkék lapján nem kell módosítania a beállításokat.

Válassza az Alapismeretek lap alján található Véleményezés + létrehozás gombot.
A Véleményezés + létrehozás lapon tekintse át az értékeket, majd válassza a Létrehozás lehetőséget. Az üzembe helyezés végrehajtása néhány percet vesz igénybe.
Amikor az üzembe helyezés befejeződött, válassza az Erőforrás megnyitása gombot.
A SignalR erőforráslapján válassza a bal oldali menü kulcsait a Gépház alatt.
Másolja ki az elsődleges kulcshoz tartozó Csatlakozás ion sztringet. Erre a kapcsolati sztring van szüksége az alkalmazás konfigurálásához az oktatóanyag későbbi részében.

ASP.NET Core-webalkalmazás létrehozása

Ebben a szakaszban a .NET Core parancssori felülettel (CLI) hozhat létre egy ASP.NET Core MVC-webalkalmazás-projektet. A .NET Core CLI Visual Studióval való használatának előnye, hogy windowsos, macOS és Linux platformokon is elérhető.

Hozzon létre egy mappát a projekthez. Ez a rövid útmutató a chattest mappát használja.
Az új mappában futtassa a következő parancsot a projekt létrehozásához:
```
dotnet new web
```

A Secret Manager hozzáadása a projekthez

Ebben a szakaszban a Secret Manager eszközt fogja hozzáadni a projekthez. A Secret Manager eszköz bizalmas adatokat tárol a projektfán kívüli fejlesztési munkákhoz. Ez a módszer segít megelőzni az alkalmazás titkos kulcsainak véletlen megosztását a forráskódban.

A mappában inicializálásához UserSecretsId futtassa a következő parancsot:
```
dotnet user-secrets init
```
Adjon hozzá egy Azure:SignalR:ConnectionString nevű titkos kódot a Secret Managerhez.

Ez a titkos kód tartalmazza a SignalR szolgáltatási erőforrás elérésére szolgáló kapcsolati sztringet. Az Azure:SignalR:Csatlakozás ionString az alapértelmezett konfigurációs kulcs, amelyet a SignalR a kapcsolat létrehozásához keres. Cserélje le a következő parancs értékét a SignalR-szolgáltatás erőforrásának kapcsolati sztring.

Ezt a parancsot a fájllal megegyező könyvtárban csproj kell futtatnia.
```
dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"
```
A Secret Manager csak a webalkalmazás tesztelésére használható, amíg helyileg van üzemeltetve. Egy későbbi oktatóanyagban üzembe helyezi a csevegő webalkalmazást az Azure-ban. Miután a webalkalmazás üzembe lett helyezve az Azure-ban, a kapcsolati sztring a Secret Managerrel való tárolása helyett egy alkalmazásbeállítást fog használni.

Ez a titkos kód a Configuration API-val érhető el. A kettőspont (:) a konfiguráció nevében működik a Configuration API-val az összes támogatott platformon. Lásd: Konfiguráció környezet szerint.

Az Azure SignalR hozzáadása a webalkalmazáshoz

Adjon hozzá egy hivatkozást a Microsoft.Azure.SignalR NuGet-csomaghoz az alábbi parancs futtatásával:
```
dotnet add package Microsoft.Azure.SignalR
```
Nyissa meg a Program.cs fájlt, és frissítse a kódot a következőre, meghívja az AddSignalR() Azure SignalR Szolgáltatás használatára vonatkozó metódusokat és AddAzureSignalR() metódusokat:
```
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();
```
Ha nem ad át paramétert, AddAzureSignalR() az azt jelenti, hogy a SignalR szolgáltatás erőforrásának alapértelmezett konfigurációs kulcsát használja kapcsolati sztring. Az alapértelmezett konfigurációs kulcs az Azure:SignalR:Csatlakozás ionString. Azt is használja ChatSampleHub , amelyet az alábbi szakaszban fogunk létrehozni.

Központosztály hozzáadása

A SignalR-ben a központ egy alapvető összetevő, amely az ügyfél által meghívható metódusok egy készletét teszi elérhetővé. Ebben a szakaszban meghatároz egy központosztályt két metódussal:

BroadcastMessage: Ez a metódus üzenetet küld az összes ügyfélnek.
Echo: Ez a metódus visszaküld egy üzenetet a hívónak.

Mindkét módszer a Clients ASP.NET Core SignalR SDK által biztosított felületet használja. Ez a felület hozzáférést biztosít az összes csatlakoztatott ügyfélhez, így tartalmat küldhet az ügyfeleknek.

A projektkönyvtárban adjon hozzá egy új, Hub nevű mappát. Adjon hozzá egy új, ChatSampleHub.cs nevű központi kódfájlt az új mappához.

Adja hozzá a következő kódot a ChatSampleHub.cs-hez a központi osztály definiálásához és a fájl mentéséhez.

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

A webalkalmazás ügyfélfelületének hozzáadása

A csevegőszoba-alkalmazás ügyfél-felhasználói felülete HTML-ből és JavaScriptből fog állni egy index.html nevű fájlban a wwwroot könyvtárban.

Másolja ki a css/site.css fájlt a mintaadattár wwwroot mappájából. Cserélje le a projekt css/site.css fájlját a másoltra.

Hozzon létre egy új fájlt az index.html nevű wwwroot könyvtárban, másolja és illessze be az alábbi HTML-fájlt az újonnan létrehozott fájlba.

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

Az index.html kód meghívjaHubConnectionBuilder.build(), hogy HTTP-kapcsolatot létesítsen az Azure SignalR-erőforrással.

Ha a kapcsolat sikeresen létrejött, át lesz adva a bindConnectionMessage számára, amely eseménykezelőket ad a bejövő tartalomhoz, amely le lesz küldve az ügyfélnek.

A HubConnection.start() kommunikálni kezd a központtal. onConnected() Ezután hozzáadja a gombesemény-kezelőket. Ezek az eseménykezelők a kapcsolat segítségével engedélyezik, hogy ez az ügyfél tartalomfrissítéseket küldjön le az összes csatlakozott ügyfélnek.

Az alkalmazás helyi létrehozása és futtatása

Futtassa a következő parancsot a webalkalmazás helyi futtatásához:

dotnet run

Az alkalmazás helyileg lesz üzemeltetve a localhost URL-címet tartalmazó kimenettel, például az alábbiak szerint:

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

Nyisson meg két böngészőablakot. Minden böngészőben nyissa meg a kimeneti ablakban látható localhost URL-címet, http://localhost:5000/ például a fenti kimeneti ablakban látható módon. A rendszer kéri, hogy adja meg a nevét. Adja meg mindkét ügyfél ügyfélnevét, és tesztelje a küldési üzenetek tartalmát mindkét ügyfél között a Küldés gombbal.

Clean up resources

Ha folytatja a következő oktatóanyagot, megtarthatja az ebben a rövid útmutatóban létrehozott erőforrásokat, és újra felhasználhatja őket.

Ha végzett a gyorsútmutató-mintaalkalmazással, törölheti az ebben a rövid útmutatóban létrehozott Azure-erőforrásokat a díjak elkerülése érdekében.

Fontos

Az erőforráscsoport törlése visszavonhatatlan, és az adott csoport összes erőforrását magában foglalja. Figyeljen, nehogy véletlenül rossz erőforráscsoportot vagy erőforrásokat töröljön. Ha a mintában lévő erőforrásokat olyan meglévő erőforráscsoportban hozta létre, amely a megtartani kívánt erőforrásokat tartalmazza, az erőforráscsoport törlése helyett egyenként törölheti az egyes erőforrásokat a panelről.

Jelentkezzen be az Azure Portalra, és válassza az Erőforráscsoportok elemet.

A Szűrő név szerint szövegmezőbe írja be az erőforráscsoport nevét. Ebben a rövid útmutatóban a SignalRTestResources nevű erőforráscsoportot használtuk. Az eredménylistában szereplő erőforráscsoportban válassza ki a három pontot (...) >Erőforráscsoport törlése.

Selections for deleting a resource group

A rendszer az erőforráscsoport törlésének megerősítését kéri. Adja meg a megerősítéshez az erőforráscsoport nevét, és válassza a Törlés lehetőséget.

A rendszer néhány pillanaton belül törli az erőforráscsoportot és annak erőforrásait.